Shopify - Testa preços com o Varify.io

Última atualização em 22 de abr. de 20265 min de leitura

Índice

• Resumidamente
• Porquê testar preços na Shopify?
• Passo 1: Criar filtros e ajustar preços
• Passo 2: Identificar os seletores CSS relevantes
• Passo 3: Personalizar o código para a experiência
• Passo 4: Salvar o novo experimento

Resumidamente

Para descobrires a que preço os teus produtos alcançam a melhor margem de contribuição, podes realizar testes de preços. É adicionado um filtro de variante adicional para o produto correspondente a ser testado. Usas este filtro para definir o preço alternativo.

O experimento é invisível para o utilizador, uma vez que o filtro de preço não é visível para o utilizador. Um código JavaScript no teste A/B garante depois que é exibido o preço original ou o preço a testar na página de detalhe do produto (PDP), consoante a variante.

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

Porquê testar preços na Shopify?

Os testes de preços na Shopify ajudam-te a descobrir qual o preço que melhor funciona para um produto - ou seja, qual o preço que leva a mais vendas ou a um volume de negócios mais elevado. Testes A/B direcionados permitem-te testar diferentes variantes de preço em simultâneo sem interromper a experiência de compra. Isto permite-te tomar decisões baseadas em dados e otimizar a tua loja para obter mais sucesso.

Passo 1: Criar filtros e ajustar preços

1. Abre o produto no backend do Shopify para o qual queres testar o preço.
2. Cria uma nova variante com o "Option name" "varify-pricing-test".
3. Cria dois "Option values" para isto: "Control" e "Variation".

1. Se o produto tiver outras variantes, como um filtro de cor, arrasta o filtro de variante para o topo, de modo a que fique posicionado acima dos outros filtros. Isto é importante para que o teste funcione corretamente.

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

• Dica: Ativa "Group by varify-pricing-test" para gerir melhor as variantes.
• Se tiveres variantes ou cores diferentes, também deves ajustar aqui o preço da variante
• Lembra-te também de ajustar a quantidade disponível para que o produto esteja disponível na loja.
  Por exemplo, se tiveres 1.000 unidades do produto em stock, podes definir 500 unidades para o preço original e 500 unidades para o novo preço da variante.

Passo 2: Identificar os seletores CSS relevantes

Agora encontra os seletores CSS para os elementos:

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

Filtro de preço

• Abra uma página de detalhe do produto (PDP) na qual configurou o filtro de preço e onde a experiência será realizada
• Abra as ferramentas de programador (F12 ou clique com o botão direito > "Inspecionar").
• Utilize a ferramenta de inspeção para selecionar o elemento do filtro varify-pricing-test recém-criado, de forma a que fique completamente destacado - isto garante que identificou o seletor correto.
  • Neste exemplo, é selecionado o primeiro elemento <div> dentro do elemento <variant-selects>. Dependendo do template, a estrutura, as tags HTML e as classes podem ter nomes diferentes.

• Clique com o botão direito na posição destacada no código e depois selecione: Copy → Copy selector
  Isto copia o seletor CSS exato para o filtro de preço.

• É melhor guardar o seletor copiado num documento ou numa nota - vais precisar dele novamente em breve.

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

• Abre uma página de coleção.
• Examina a página (F12 ou clique com o botão direito > "Examinar") e seleciona um elemento do cartão de produto.
• Encontra o elemento pai do cartão - normalmente o elemento exterior do cartão de produto é um elemento de lista.
  • Copia novamente a classe usando "Copy selector" e guarda-a no mesmo documento onde guardaste o seletor para o filtro de preço

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

• Abra novamente o tile do produto na página de coleção nas ferramentas de desenvolvedor.
• Vá mais fundo na estrutura do mapa e procure o elemento "Price"
• Certifique-se de selecionar realmente o elemento que deve mudar durante o teste - ou seja, o texto específico ou bloco HTML que mostra o preço.

• Neste caso, a classe do elemento de preço price__regular. Pode ser diferente no seu site.
• Copie o nome desta classe usando "Copy selector" e guarde-o com os outros dois nomes de classe já determinados

Passo 3: Personalizar o código para a experiência

Crie uma nova experiência através do Varify Dashboard. Para isso, introduza a página inicial da loja no campo de entrada e clique em "Create new Experiment". Abaixo encontra o código JavaScript para o teste de preço. Adicione-o à variante da sua experiência usando a função "Add JS".

Para garantir que o teste de preço também funcione tecnicamente na tua loja, é necessário fazer alguns ajustes no código JavaScript fornecido. Altera o JavaScript na tua variante da seguinte forma:

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

Linha 2: Introduz a classe do preço - ou seja, o elemento que deve mudar posteriormente.

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

A partir da linha 7: Adiciona aqui todos os URLs de produtos nos quais o teste de preço deve ser realizado. (Se estiveres a realizar um teste de preço apenas para um produto, só precisas de adicionar um URL aqui e podes eliminar os outros URLs). Certifica-te de que mantés o formato correspondente dos URLs ('URL'). Adiciona uma vírgula depois de cada 'URL' se se seguirem mais URLs.

💡 Nota: O preço nas páginas de coleção é completamente substituído pelo código. Se símbolos de moeda adicionais ou palavras como "ab" estiverem anexados ao preço, você pode ajustar isso diretamente no código (linha 81)

Sem texto adicional:
ex.: novo preço -> 25,99

priceElement.textContent = `${newPrice}`;

Com texto adicional:
ex.: 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();
});

Passo 4: Salvar o novo experimento

1. Salva o experimento e dá um nome a ele
2. Duplica a variante criada no experimento recém-criado e renomeia-a para "New Original".
3. Clica em "Edit" para editar o "New Original".
4. Abre a janela do JavaScript e altera a variável na linha 4 de 'Variation' para 'Controll'
5. Salva as alterações.
6. Define a divisão do teste como 50:50 entre "Variation 1" e "New Control". "Original" recebe 0 %.
7. Personaliza o direcionamento de página e define-o como "Contains" com o URL da tua loja.
8. Inicia o experimento.

Aviso: A Varify não assume qualquer responsabilidade pela funcionalidade do código e das informações.
É da responsabilidade do utilizador testar o código exaustivamente e implementá-lo corretamente.