• Teste os temas da Shopify com o Varify.io

    Tabela de conteúdo

    Curto e agradável

    Use a função "Shopify Theme Preview" para testar facilmente um novo tema da Shopify com o Varify.io. Crie um novo experimento e use o código JavaScript fornecido. Personalize-o com seu novo ID de tema e teste o novo tema antes de converter sua loja.

    Por que testar os temas da Shopify

    Um novo tema da Shopify deve ser testado A/B antes da mudança para garantir que ele não prejudique o desempenho da loja. As alterações no design podem influenciar o comportamento do cliente e os KPIs, como a taxa de conversão. O teste A/B permite uma verificação orientada por dados para ver se o novo tema oferece melhores resultados.

    Etapa 1: Insira o snippet Varify.io no arquivo theme.liquid

    💡Observação: Recomendamos a integração do snippet Varify por meio do arquivo themes.liquid para testar temas. A etapa 1 só precisa ser executada se o snippet Varify ainda não estiver instalado em seu site.

    Copie o snippet do Varify.io do painel e cole-o o mais alto possível no arquivo theme.liquid de sua loja. Para fazer isso, vá para "Loja on-line" -> "Temas" no backend do Shopify e clique em "editar código"

    Temas da Shopify
    Em seguida, você pode inserir o snippet do Varify.io como no exemplo a seguir. Não altere nada no snippet, mesmo que a Shopify faça sugestões de alterações - as alterações podem levar a efeitos de cintilação ou o teste A/B deixar de funcionar.

    Teste se a implementação foi bem-sucedida. Use o painel do Varify.io para criar um novo experimento em uma página de produto da sua loja como um teste. Se o editor abrir, a implementação foi bem-sucedida.

    Etapa 2: Encontre o ID do tema do novo tema que você deseja testar

    Precisamos do ID do tema para informar à Shopify qual tema os participantes do teste devem ver. Aqui está um guia passo a passo sobre como encontrar o ID do tema no link de visualização:

    1. ir para: Canais de vendas > Loja on-line > Temas > Biblioteca de temas.

    2. Pesquise o tema que você deseja testar.

    3. Clique nos três pontos (Ações)

    4. Clique em "Preview" (Visualizar) e copie o link.

    Seu link de visualização terá a seguinte aparência: https://deinshop.myshopify.com/?preview_theme_id=1234567890

    O número no final do link (1234567890) é a ID do tema de que você precisa.

    Agora faça o mesmo com seu tema atual e copie o ID do tema aqui também.

    Etapa 3: Criar experimento

    Crie um novo experimento. Para fazer isso, basta inserir a página inicial de sua loja como URL do editor no painel do Varify. Em seguida, clique em "Add JS" e adicione o seguinte JavaScript ao experimento.

    💡Observação: Digite o ID do tema usado atualmente na linha 3 e o ID do tema a ser testado na linha 13.
    				
    					// Wait until the theme instance is present on the page…
    window.varify.helpers.waitFor(
      '[data-theme-instance-id="143807480072"]',
      (themeElement) => {
        // …then run your redirect logic.
        (function () {
          const url    = new URL(window.location.href);
          const params = url.searchParams;
          const shadow = document.querySelector('div#varify-shadow-root');
    
          // only redirect when the variation-param is missing AND the shadow-root isn't present
          if (!params.has('pb') && !shadow) {
            params.set('preview_theme_id', '178703466760');
            params.set('pb', '0');   // hide the preview bar
    
            // replace so you don’t add a new history entry
            window.location.replace(url.toString());
          } else {
            console.log('Redirect skipped:', {
              hasVarifyVariation: params.has('varify-variation-id'),
              varifyShadowRootExists: !!shadow
            });
          }
        })();
      }
    );
    
    				
    			

    Assim que o snippet de código tiver sido personalizado com os novos IDs de tema, você poderá clicar em "Finished" (Concluído) e dar um nome adequado ao experimento. Em seguida, abra "Page Targeting" no experimento e altere o "Match Type" (Tipo de correspondência) de "Simple Match" (Correspondência simples) para "Contains" (Contém). Em seguida, clique em "Save Page Targeting".

    Segmentação da página de teste do tema da Shopify

    Etapa 4: Direcionamento e garantia de qualidade

    Depois de implementar o JavaScript e o CSS e salvar o experimento, você poderá salvar o URL da sua loja na página de destino do experimento. Você também pode usar os links "Preview" para verificar se o redirecionamento funciona e se todas as configurações foram feitas corretamente.

    Etapa 5: iniciar o experimento

    Agora, inicie o experimento com "Start Experiment". De agora em diante, 50% de seus visitantes serão direcionados para o novo tema e 50% continuarão a ver o tema antigo. Os visitantes sempre permanecerão atribuídos à mesma variante durante o período do experimento. Isso significa que o tema que eles viram uma vez, eles verão novamente durante o experimento. Depois de algum tempo, você reconhecerá qual tema tem melhor desempenho.

  • Primeiros passos