Template Testing

What Are Template Tests?

Template Tests all you you compare the performance of different Shopify page templates without touching your live theme. They’re ideal for testing different variations of page with specific templates for example, product pages or collection pages.

Template Tests work by leveraging Shopify’s built-in alternate template system and routing visitors to a different template based on your test settings. This allows you to test entirely different designs safely and with full control.

Due to the rerouting nature, we recommend we recommend to check whether the expience can be built using Visually's native features before jumping to a template test.

This method enables you to test different designs without disrupting your live theme, making it a flexible and powerful tool for optimization.

How DO i set up a template test?

You can build a template test using a JavaScript snippet that redirects users to a different template version of a page.

1. Create a new experience
2. Click 'Global Javascript'
3. Insert the code below replacing "default-product' with the template name you want to test. Any template that you have created in the Shopify Theme Editor or though Shopify can be used with the code block:
   

   const TEMPLATE_NAME = `default-product`;
   
   loomi_api
   
     .when(() => document.documentElement)
   
     .then((elem) => {
   
       const currentUrl = new URL(window.location.href);
   
       if (!currentUrl.searchParams.has("view")) {
   
         elem.style.opacity = `0`;
   
         const newUrl = new URL(location.href);
   
         newUrl.searchParams.append("view", TEMPLATE_NAME);
   
         loomi_api.redirectTest(_USE_CASE_CTX, newUrl.href, 0, true, `none`);
   
         elem.style.opacity = `1`;
   
       }
   
   });

4. Add targeting rules using the audience, pages, devices and trigger fields. There is no need to re-assign the template through Shopify product pages.
   
   
5. Preview and QA: Use the preview feature to ensure that both templates display as expected. We recommend to preview mobile experiences on a mobile device.
6. Publish: Begin the test by splitting traffic between the control (default template) and the variation. Users are automatically directed to one of the two templates during their visit.
7. Monitor Results: Analyse and review key performance metrics shown on the reports page for the experience to help you compare how each template performs. If one template is outperforming, you can keep testing for further optimization or make it the default for your store.