Shopify - Modelo de PDP de teste
Tabela de conteúdo
Curto e agradável
Com o Varify, você pode testar facilmente modelos alternativos de PDP para sua loja da Shopify. Para fazer isso, primeiro crie um novo modelo de PDP com todas as personalizações desejadas. Crie um novo teste A/B e adicione o JavaScript deste guia. Não são necessárias alterações nos produtos ou nas configurações da Shopify.
Criar novo modelo
Primeiro, crie um novo modelo para sua página de detalhes do produto (PDP). Isso permite que você teste arranjos alternativos, widgets de aplicativos ou outros elementos.
Como criar um novo modelo em apenas algumas etapas:
- Vá para Online Store > Themes > Customize
- Clique no menu suspenso na parte superior, que está definido como "Home page" por padrão
- Selecione a área Produtos no menu suspenso
- Clique em Create Template (Criar modelo) para criar seu novo modelo de PDP
Dê um nome ao novo modelo, como: new-pdp.
Em "Based on" (Baseado em), selecione o modelo atualmente em uso - ele servirá como ponto de partida para seu novo modelo.
- Agora, faça todas as alterações desejadas no novo modelo:
- Testar widgets de um aplicativo da Shopify
- Criar novos blocos, elementos ou textos
- Alterar a ordem dos blocos existentes
- Ajustar o esquema de cores
- e muito mais
- Em seguida, salve a nova versão de seu modelo de PDP. Ela ainda não está visível, pois seus produtos ainda estão definidos com o modelo original.
Crie um novo experimento na Varify
Crie um novo experimento em uma de suas páginas de produtos
Clique no símbolo de código no canto superior direito
Selecione "Add JavaScript" (Adicionar JavaScript)
Insira o seguinte JavaScript
Na linha 3, altere o valor da constante pdpVariationName 'new-pdp' e substitua-o pelo nome de seu novo modelo
Salvar o experimento
// ─── CONFIG ───
// Just set this to match your Shopify alternate PDP template name:
const pdpVariationName = 'new-pdp';
(function () {
const href = window.location.href;
const forbiddenRegex = /[?&#](?:varify-variation-id|varify-variation-name|varify-editor)=/;
// ─── 0. Bail out if any forbidden param is present ───
if (forbiddenRegex.test(href)) {
return;
}
// ─── 1. Hide everything until we’ve loaded the variation ───
document.documentElement.style.visibility = 'hidden';
const url = new URL(href);
const params = new URLSearchParams(url.search);
// ─── 2. Merge existing params (e.g. variant=…) & add view ───
params.set('view', pdpVariationName);
// ─── 3. Fetch the variation template HTML ───
fetch(`${url.pathname}?${params.toString()}`, { credentials: 'same-origin' })
.then(res => res.text())
.then(html => {
// ─── 4. Parse & swap head/body ───
const doc = new DOMParser().parseFromString(html, 'text/html');
document.head.replaceWith(doc.head);
document.body.replaceWith(doc.body);
// ─── 5. Remove only the `view` param, keep all others ───
params.delete('view');
const cleanQS = params.toString();
const cleanURL = url.pathname + (cleanQS ? `?${cleanQS}` : '') + url.hash;
history.replaceState(null, '', cleanURL);
// ─── 6. Un-hide the page ───
document.documentElement.style.visibility = '';
})
.catch(() => {
// On error, just show the default template
document.documentElement.style.visibility = '';
});
})();
Configurar e iniciar a segmentação de experimentos
O experimento deve ser exibido em todas as páginas de produtos. Portanto, é necessário um pequeno ajuste na segmentação de páginas.
Abra a página de destino do experimento
Defina o direcionamento para /products/ com o tipo de correspondência "Contains"
Se as páginas de detalhes do produto não forem claramente identificáveis por meio do URL, você também poderá usar um seletor CSS exclusivo que apareça somente nas suas PDPs. O seletor "Buybox" geralmente é adequado para isso.
Iniciar o experimento
