• Shopify - Teste os preços com o Varify.io

    Tabela de conteúdo

    Curto e agradável

    Para descobrir a que preço seus produtos alcançam a melhor margem de contribuição, você pode realizar testes de preço. Para fazer isso, um filtro de variante adicional é adicionado para o produto correspondente a ser testado. Você usa esse filtro para definir o preço alternativo.

    O experimento é invisível para o usuário, pois o filtro de preço não está visível para o usuário. Um código JavaScript no teste A/B garante que o preço original ou o preço a ser testado seja exibido na página de detalhes do produto (PDP), dependendo da variante. 

    Para garantir que o novo preço também seja exibido nas páginas de categoria (páginas de coleção) e que o filtro de preço não esteja visível, insira os URLs dos produtos a serem testados no código JavaScript fornecido.

    Por que testar os preços da Shopify?

    Os testes de preços na Shopify ajudam você a descobrir qual preço funciona melhor para um produto, ou seja, qual preço leva a mais vendas ou maior volume de negócios. Os testes A/B direcionados permitem que você teste diferentes variantes de preço simultaneamente sem interromper 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: Crie filtros e ajuste os preços

    1. Abra o produto no backend da Shopify para o qual você deseja testar o preço.
    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: Identificar os seletores CSS relevantes

    Agora, encontre os seletores CSS para os elementos: 

    • Filtro de preço
    • Cartão de produto na página Coleção
    • Preço na página da Coleção.

    Filtro de preço

    • Abra uma página de detalhes do produto (PDP) na qual você configurou o filtro de preço 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.

    Cartão de produto na página Coleção

    • Abra uma página de coleção.

    • Examine a página (F12 ou clique com o botão direito do mouse > "Examinar") e selecione um elemento do cartão do produto.

    • Encontre o elemento pai do cartão - geralmente o elemento externo do cartão do produto é um elemento de lista.

      • Copie a classe novamente usando "Copiar seletor" e salve-a no mesmo documento em que você salvou o seletor para o filtro de preço

    Preço na página da Coleção

    • Abra o bloco do produto na página de coleção novamente nas ferramentas do desenvolvedor.

    • Aprofunde-se na estrutura do mapa e procure o elemento "Preço"

    • Certifique-se de que você realmente seleciona o elemento que deve ser alterado durante o teste, ou seja, o texto específico ou o bloco HTML que mostra o preço.

    • Nesse caso, a classe do elemento de preço preço__regular. Para o seu lado, o nome pode ser diferente.

    • Copie esse nome de classe usando o "Copy selector" e salve-o com os outros dois nomes de classe determinados até o momento

    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 teste de preço 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 7: Adicione aqui todos os URLs de produtos nos quais o teste de preço deve ser realizado. (Se você estiver realizando um teste de preço para apenas um produto, só precisará adicionar um URL aqui e poderá excluir os outros URLs). Certifique-se de manter o formato correspondente dos URLs ("URL"). Adicione uma vírgula após cada "URL" se houver mais URLs.

    💡 Observação: O preço nas páginas da coleção é completamente substituído pelo código. Se símbolos de moeda ou palavras adicionais, como "ab", forem anexados ao preço, você poderá ajustá-los diretamente no código (linha 81)

    Sem texto adicional:
    Por exemplo, novo preço -> 25,99

    				
    					priceElement.textContent = `${newPrice}`;
    				
    			

    Com texto adicional:
    Por exemplo, novo preço -> A partir de 25,99 EUR

    				
    					priceElement.textContent = `From ${newPrice} EUR`;
    				
    			

    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