Pular para o conteúdo principal

Shopify - Testar template de PDP

Última atualização em 22 de abr. de 20262 min de leitura
Índice

Resumo​

Com o Varify, podes testar facilmente templates de PDP alternativos para a tua loja Shopify. Para isso, primeiro cria um novo template de PDP com todas as personalizações desejadas. Cria um novo teste A/B e adiciona o JavaScript deste guia. Não são necessárias alterações a produtos ou configurações do Shopify.

Criar novo modelo​

Primeiro cria um novo modelo para a tua página de detalhes do produto (PDP). Isto permite-te testar disposições alternativas, widgets de aplicações ou outros elementos.

Como criar um novo modelo em apenas alguns passos:

  1. Vai a Online Store > Themes > Customize
  2. Clica no menu suspenso no topo, que está definido como "Home page" por defeito
  3. Seleciona a área Products no menu suspenso
  4. Clica em Create Template para criar o teu novo modelo de PDP
Editor de temas Shopify em três passos: abre o menu suspenso da página, escolhe «Products», depois clica em «Create template»
  1. Dá um nome ao novo template, por exemplo: new-pdp.
  2. Em «Based on», seleciona o template que estás a usar atualmente — ele vai servir como ponto de partida para o teu novo template.
Diálogo do Shopify «Create a template» com o nome «new-pdp» baseado em «Default product»
  1. Agora faz todas as alterações desejadas ao novo template:
  • Testa widgets de uma app do Shopify
  • Cria novos blocos, elementos ou textos
  • Altera a ordem dos blocos existentes
  • Personaliza o esquema de cores
  • e muito mais
  1. Depois guarda a nova versão do teu template de PDP. Ainda não está visível, pois os teus produtos continuam configurados para o template original.

Criar um novo experimento no Varify​

  1. Cria um novo experimento numa das tuas páginas de produto
  2. Clica no símbolo de código no canto superior direito
  3. Seleciona «Add JavaScript»
  4. Insere o seguinte JavaScript
  5. Na linha 5, altera o valor da constante pdpVariationName 'new-pdp' e substitui-o pelo nome do teu novo template
  6. Nas linhas 3 e 4, altera os IDs do experimento e da variante para os IDs correspondentes do experimento. (Importante: tens de guardar o teste uma vez antes para que os IDs sejam criados. Depois podes guardá-lo novamente através de Edit e substituir os IDs).
  7. Guarda o experimento
(function () {
  // ─── CONFIG ───
  const experimentId = 32898;
  const variationId = 49279;
  const viewValue = 'new-pdp'; //"view"-value (z.B. Template-Name)

  // ─── HELPERS ───
  if (window.varify.helpers.isInEditor()) {
    return
  }

  // ─── LOGIC ───
  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');

  const needsView = params.get('view') !== String(viewValue);
  const needsVa = params.get('va-red') !== paramAsBase64;

  if (needsView || needsVa) {
    params.set('view', String(viewValue));
    params.set('va-red', paramAsBase64);

    const newUrl =
      `${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;

    window.location.href = newUrl;
  }
})();

Configura e inicia o targeting da experiência​

A experiência deve ser exibida em todas as páginas de produto. Por isso, é necessário um pequeno ajuste no targeting de página.

  1. Abre o targeting de página da experiência
  2. Define o targeting para /products/ com o tipo de correspondência "Contains"
  3. Se as tuas páginas de detalhe de produto não forem claramente identificáveis através do URL, também podes usar um seletor CSS único que apareça apenas nas tuas PDPs. O seletor "Buybox" costuma ser adequado para isso.
  4. Inicia a experiência
Targeting de página do «PDP Template test»: a condição de URL «Contains» corresponde a «/products/»
Nesta página