Shopify - Realizar teste de custos de envio com Varify.io
Em resumo
Para descobrir com quais custos de envio os seus produtos alcançam a maior conversão ou a melhor margem de contribuição, pode realizar testes de custos de envio no Shopify. Para isso, adicione um filtro de variante adicional aos produtos a serem testados. Atribua um novo perfil de envio com os custos de envio a serem testados às respetivas variantes.
O experimento permanece invisível para os utilizadores, pois o filtro de variante não é exibido na loja. Um código JavaScript no teste A/B garante que, dependendo da variante, sejam exibidos os custos de envio originais ou os custos de envio de teste na página de detalhes do produto (PDP).
Para garantir que os custos de envio corretos também sejam exibidos nas páginas de categoria (páginas de coleção) e que o filtro de variante permaneça oculto, guarde os URLs dos produtos a serem testados no código JavaScript fornecido.
Porquê testar custos de envio no Shopify?
Os testes de custos de envio no Shopify ajudam-no a descobrir qual o nível de custos de envio que funciona melhor - ou seja, qual variante leva a mais vendas ou a um maior faturamento. Testes A/B direcionados permitem-lhe testar diferentes custos de envio ao mesmo tempo sem afetar a experiência de compra. Isto permite-lhe tomar decisões baseadas em dados e otimizar a sua loja para um maior sucesso.
Passo 1: Criar novas variantes de produto
- Abra o produto no backend do Shopify para o qual pretende testar os custos de envio.
- Crie uma nova variante com o "Nome da opção" "varify-pricing-test".
- Crie dois "Valores de opção" para isso: "Control" e "Variation".
- Se o produto tiver outras variantes, como um filtro de cor, arraste o filtro de variante para o topo, para que fique posicionado acima dos outros filtros. Isto é importante para que o teste funcione corretamente.
- Defina o novo preço a ser testado para cada variante de produto na variante de preço "varify-pricing-test".
- Dica: Ative "Group by varify-pricing-test" para gerir melhor as variantes.
- Se tiver diferentes variantes ou cores, também deve ajustar aqui o preço da variante
- Lembre-se também de ajustar a quantidade disponível para que o produto esteja disponível na loja. Por exemplo, se tiver 1.000 unidades do produto em stock, pode definir 500 unidades para o preço original e 500 unidades para o novo preço da variante.
Passo 2: Criar um novo perfil de envio
A seguir, criamos um novo perfil de custos de envio no qual definimos o valor dos custos de envio a serem testados para a variante do produto.
- Vá a "Settings/Shipping and delivery"
- Clique em "Create a custom profile"
- Dê um nome ao perfil, por exemplo "Shipping cost experiment"
- Adicione as variantes de produto que devem receber os custos de envio a serem testados
- Dê um nome ao perfil, por exemplo "Shipping cost experiment"
- Adicione as variantes de produto que devem receber os custos de envio a serem testados
- Agora clique em "Add shipping zone" e defina os países/zonas para os quais as variantes devem ser enviadas. Aqui deve selecionar as mesmas zonas para as quais normalmente envia
- Clique em "Add rate" e defina os custos de envio a serem testados
Passo 3: Configurar o filtro de variante na página de detalhes do produto (PDP)
Ocultar filtro de Variants
- Abra uma página de detalhes do produto (PDP) na qual configurou as variantes para o teste de custos de envio e onde o experimento vai ser realizado
- Abra as ferramentas de programador (F12 ou clique com o botão direito > "Inspecionar").
- Use a ferramenta de inspeção para selecionar o elemento de filtro varify-pricing-test recém-criado, de forma a que fique completamente destacado - isto garantirá que identificou o seletor correto.
- Neste exemplo, é selecionado o primeiro elemento <div> dentro do elemento <variant-selects>. Dependendo do template, a estrutura e as tags e classes HTML 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.
- O melhor é guardar o seletor copiado num documento ou nota - vai precisar dele em breve novamente.
Passo 3: Personalizar o código para o experimento
Crie um novo experimento 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 encontrará o código JavaScript para o teste de preço. Adicione-o à variante do seu experimento usando a função "Add JS".
Para garantir que o experimento de custos de envio também funciona tecnicamente na sua loja, é necessário fazer alguns ajustes no código JavaScript fornecido. Altere o JavaScript na sua variante da seguinte forma:
Linha 1: Cole o seletor CSS copiado para o filtro de preço entre aspas.
Linha 2: Introduza a classe do preço - ou seja, o elemento que vai mudar mais tarde.
Linha 3: Especifique a classe do tile do produto para que o código saiba onde está o preço na página de coleção.
A partir da linha 8: Adicione aqui todos os URLs de produtos nos quais o experimento de custos de envio deve ser realizado. (Se estiver a executar o experimento apenas para um produto, só precisa de adicionar um URL aqui e pode eliminar os outros URLs). Certifique-se de que mantém o formato apropriado dos URLs ('URL'). Adicione uma vírgula após cada 'URL' se houver mais URLs a seguir.
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: Guardar o novo experimento
- Guarde o experimento e dê-lhe um nome
- Duplique a variante criada no experimento recém-criado e renomeie-a para "New Original".
- Clique em "Edit" para editar o "New Original".
- Abra a janela JavaScript e altere a variável na linha 4 de 'Variation' para 'Controll'
- Guarde as alterações.
- Defina a divisão do teste para 50:50 entre "Variation 1" e "New Control". "Original" fica com 0 %.
- Personalize o direcionamento de página e defina-o como "Contains" com o URL da sua loja.
- Inicie o experimento.
