• Shopify - Faça um teste de custos de envio com o Varify.io

    Tabela de conteúdo

    Curto e agradável

    Para descobrir em quais custos de frete seus produtos atingem a maior conversão ou a melhor margem de contribuição, você pode realizar testes de custo de frete na Shopify. Para fazer isso, adicione um filtro de variante adicional aos produtos a serem testados. Atribua um novo perfil de frete com os custos de frete a serem testados para as respectivas variantes.

    O experimento permanece invisível para os usuários, pois o filtro de variantes não é exibido na loja. Um código JavaScript no teste A/B garante que os custos de frete originais ou os custos de frete de teste sejam exibidos na página de detalhes do produto (PDP), dependendo da variante.

    Para garantir que os custos de frete corretos também sejam exibidos nas páginas de categoria (páginas de coleção) e que o filtro de variantes permaneça oculto, armazene os URLs dos produtos a serem testados no código JavaScript fornecido.

    Por que testar os custos de frete na Shopify?

    Os testes de custo de frete na Shopify ajudam você a descobrir qual nível de custo de frete funciona melhor, ou seja, qual variante gera mais vendas ou maior volume de negócios. Os testes A/B direcionados permitem que você teste diferentes custos de frete ao mesmo tempo sem comprometer a experiência de compra. Isso permite que você tome decisões baseadas em dados e otimize sua loja para obter mais sucesso.

    Etapa 1: Criar novas variantes de produtos

    1. Abra o produto no backend da Shopify para o qual você deseja testar os custos de frete.
    2. Crie uma nova variante com o "Nome da opção" "varify-pricing-test".
    3. Crie dois "Valores de opção" para isso: "Controle" e "Variação".

    1. Se o produto tiver outras variantes, como um filtro de cor, arraste e solte o filtro de variante na parte superior para que ele fique posicionado acima dos outros filtros. Isso é importante para que o teste funcione corretamente.

    1. Defina o novo preço a ser testado para cada variante de produto na variante de preço "varify-pricing-test".

      • Dica: ative a opção "Group by varify-pricing-test" para gerenciar melhor as variantes.

      • Se você tiver variantes ou cores diferentes, também deverá ajustar o preço da variante aqui

      • Lembre-se também de ajustar a quantidade disponível para que o produto esteja disponível na loja.
        Por exemplo, se você tiver 1.000 unidades do produto em estoque, poderá definir 500 unidades para o preço original e 500 unidades para o preço da nova variante.

    Etapa 2: Criar um novo perfil de envio

    Em seguida, criamos um novo perfil de custos de remessa no qual definimos o valor dos custos de remessa a serem testados para a variante do produto.

    • Vá para "Settings/Shipping and delivery" (Configurações/Envio e entrega)
    • Clique em "Create a custom profile" (Criar um perfil personalizado)

    • Dê um nome ao perfil, por exemplo, "Experiência de custo de envio"
    • Adicione as variantes do produto que devem receber os custos de envio a serem testados

    • Dê um nome ao perfil, por exemplo, "Experiência de custo de envio"
    • Adicione as variantes do produto que devem receber os custos de envio a serem testados
    • Agora, clique em "Add shipping zone" (Adicionar zona de envio) e defina os países/zonas para os quais as variantes devem ser enviadas. Aqui você deve selecionar as mesmas zonas para as quais geralmente envia
    • Clique em "Add rate" (Adicionar taxa) e defina os custos de remessa a serem testados

    Etapa 3: Configure o filtro de variantes na página de detalhes do produto (PDP)

    Variantes Ocultar filtro

    • Abra uma página de detalhes do produto (PDP) na qual você configurou as variantes para o teste de custo de frete e o experimento deve ser realizado

    • Abra as ferramentas do desenvolvedor (F12 ou clique com o botão direito do mouse > "Inspecionar").

    • Use a ferramenta de inspeção para selecionar o elemento de filtro varify-pricing-test recém-criado, de modo que ele fique completamente destacado - isso garante que você identificou o seletor correto.

      • Neste exemplo, o primeiro <div>-no elemento <variant-selects>-é selecionado. Dependendo do modelo, a estrutura e as tags e classes HTML podem ter nomes diferentes.

    • Clique com o botão direito do mouse na posição destacada no código e selecione : Copiar → Seletor de cópia
      Isso copia o seletor CSS exato para o filtro de preço.

    • É melhor salvar o seletor copiado em um documento ou em uma nota - você precisará dele novamente em breve.

    Etapa 3: Personalizar o código para o experimento

    Crie um novo experimento por meio do Varify Dashboard. Para fazer isso, insira a página inicial da loja no campo de entrada e clique em "Create new Experiment" (Criar novo experimento). Abaixo, você encontrará o código JavaScript para o teste de preço. Adicione-o à variante de seu experimento usando a função "Add JS". 

    Para garantir que o experimento de custos de envio também funcione tecnicamente em sua loja, é necessário fazer alguns ajustes no código JavaScript fornecido. Altere o JavaScript em sua variante da seguinte forma:

    Linha 1: Cole o seletor CSS copiado para o filtro de preço entre aspas.

    Linha 2: Insira a classe do preço, ou seja, o elemento que será alterado posteriormente.

    Linha 3: Especifique a classe do bloco do produto para que o código saiba onde o preço está na página da coleção.

    A partir da linha 8: Adicione aqui todos os URLs de produtos nos quais o experimento de custo de frete deve ser realizado. (Se você estiver executando o experimento para apenas um produto, só precisará adicionar um URL aqui e poderá excluir os outros URLs). Certifique-se de manter o formato apropriado dos URLs ("URL"). Adicione uma vírgula após cada "URL" se houver mais URLs.

    Código JavaScript para o teste de preço

    				
    					const varifyPriceFilterSelector = '#variant-selects-template--25418368778580__main > div:nth-child(1)';
    const priceClass = 'price__regular';
    const cardClass = 'grid__item';
    const desiredVariantOption = 'Variation'; // Variation or Control
    
    // Only URLs – variant IDs no longer required
    const productURLs = [
        'https://demo-shop.com/products/article1',
        'https://demo-shop.com/products/article2',
        'https://demo-shop.com/products/article3'
    ];
    
    const updatedHandles = new Set();
    
    function hidePriceFilterOnMatchingProductPages() {
        const currentURL = window.location.href;
        const matchesProductPage = productURLs.some(url => currentURL.includes(url));
    
        if (matchesProductPage && varifyPriceFilterSelector) {
            const style = document.createElement('style');
            style.textContent = `
          ${varifyPriceFilterSelector} {
            display: none !important;
          }
        `;
            document.head.appendChild(style);
            console.log('Hiding price filter on matching product page:', varifyPriceFilterSelector);
        }
    }
    
    hidePriceFilterOnMatchingProductPages();
    
    function formatPrice(priceInCents) {
        return (priceInCents / 100).toFixed(2);
    }
    
    function extractHandleFromHref(href) {
        const match = href.match(/\/products\/([^/?#]+)/);
        return match ? match[1] : null;
    }
    
    function extractHandlesFromURLs(urls) {
        return urls.map(extractHandleFromHref).filter(Boolean);
    }
    
    function updateProducts(retryCount = 0) {
        const productCards = document.querySelectorAll(`.${cardClass}`);
        const allowedHandles = extractHandlesFromURLs(productURLs);
    
        if (productCards.length === 0 && retryCount < 5) {
            console.warn(`No product cards found – retrying (${retryCount + 1}/5)`);
            setTimeout(() => updateProducts(retryCount + 1), 300);
            return;
        }
    
        allowedHandles.forEach((handle) => {
            if (updatedHandles.has(handle)) return;
    
            fetch(`/products/${handle}.js`)
                .then(response => response.json())
                .then(product => {
                    const targetVariant = product.variants.find(v => v.option1 === desiredVariantOption);
                    if (!targetVariant) {
                        console.warn(`No variant found with option1 === '${desiredVariantOption}' for "${handle}"`);
                        return;
                    }
    
                    let updated = false;
    
                    productCards.forEach(card => {
                        const link = card.querySelector('a[href*="/products/"]');
                        if (!link) return;
    
                        const href = link.getAttribute('href');
                        const linkHandle = extractHandleFromHref(href);
    
                        if (linkHandle === handle) {
                            const priceElement = card.querySelector(`.${priceClass}`);
                            if (priceElement) {
                                const oldPrice = priceElement.textContent.trim();
                                const newPrice = formatPrice(targetVariant.price);
                                priceElement.textContent = `${newPrice}`;
    
                                console.log(`"${product.title}" – Price updated: ${oldPrice} → €${newPrice}`);
                            }
    
                            const imageElement = card.querySelector('.product-card-image img');
                            if (imageElement && targetVariant.featured_image) {
                                imageElement.src = targetVariant.featured_image.src;
                                console.log(`Image updated for "${product.title}".`);
                            }
    
                            // Update link with ?variant=...
                            const url = new URL(link.href, window.location.origin);
                            url.searchParams.set('variant', targetVariant.id);
                            link.href = url.toString();
    
                            updated = true;
                        }
                    });
    
                    if (updated) {
                        updatedHandles.add(handle);
                    }
                })
                .catch(error => {
                    console.error(`Error loading product "${handle}":`, error);
                });
        });
    }
    
    // Optional: Set filter selection on the PDP
    function setPriceFilter() {
        const selectElement = document.querySelector(`${varifyPriceFilterSelector} select`);
        if (selectElement) {
            selectElement.value = desiredVariantOption;
            selectElement.dispatchEvent(new Event('input', { bubbles: true }));
            selectElement.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }
    
    // Initial call after DOM ready
    window.varify.helpers.onDomLoaded(() => {
        setPriceFilter();
        updateProducts();
    });
    
    // Optional: Repeat on DOM changes
    window.varify.helpers.onDomChanged(() => {
        updateProducts();
    });
    				
    			

    Etapa 4: Salve o novo experimento

    1. Salve o experimento e dê um nome a ele

    2. Duplique a variante criada no experimento recém-criado e renomeie-a para "New Original".

    3. Clique em "Edit" (Editar) para editar o "New Original" (Novo Original).

    4. Abra a janela JavaScript e altere a variável na linha 4 de 'Variation' para 'Controll

    5. Salve as alterações.

    6. Defina a divisão do teste como 50:50 entre "Variação 1" e "Novo controle". O "Original" recebe 0 %.

    7. Personalize a segmentação da página e defina-a como "Contém" com o URL da sua loja.

    8. Inicie o experimento.

  • Primeiros passos