• Test Shopify themes with Varify.io

    Table of contents

    In short

    Use the "Shopify Theme Preview" function to easily A/B test a new Shopify theme with Varify.io. Create a new experiment and use the JavaScript code provided. Customize it with your new theme ID and test the new theme before converting your store.

    Why test Shopify themes

    A new Shopify theme should be A/B tested before switching to ensure that it does not degrade store performance. Changes in design can affect customer behavior and KPIs such as conversion rate. A/B testing enables a data-supported check as to whether the new theme delivers better or worse results.

    Step 1: Insert Varify.io snippet into the theme.liquid file

    💡Note: We recommend integrating the Varify snippet via the themes.liquid file for testing themes. Step 1 only needs to be carried out if the Varify snippet is not yet installed on your site.

    Copy the Varify.io snippet from the dashboard and paste it as high up as possible in the theme.liquid file of your store. To do this, go to "Online Store"-> "Themes" in the Shopify backend and click on "edit code"

    Shopify Themes
    You can then insert the Varify.io snippet as in the following example. Please do not change anything in the snippet, even if Shopify makes suggestions for changes - changes can lead to flicker effects or the A/B test no longer working.

    Test whether the implementation was successful. Create a new experiment on a product page of your store via the Varify.io dashboard as a test. If the editor opens, the implementation was successful.

    Step 2: Find the theme ID of the new theme you want to test

    We need the theme ID to tell Shopify which theme the test participants should see. Here is a step-by-step guide on how to find the theme ID from the preview link:

    1. go to: Sales Channels > Online Store > Themes > Theme Library.

    2. search for the theme you want to test.

    3. click on the three dots (Actions)

    4. click on "Preview" and copy the link.

    Your preview link will look something like this: https://deinshop.myshopify.com/?preview_theme_id=1234567890

    The number at the end of the link (1234567890) is the theme ID you need.

    Now do the same for your current theme and copy the theme ID here too.

    Step 3: Create experiment

    Create a new experiment. Simply enter the homepage of your store as the editor URL in the Varify dashboard. Then click on "Add JS" and add the following JavaScript to the experiment.

    💡Note: Enter the theme ID of your currently used theme in line 3 and the theme ID to be tested in line 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
            });
          }
        })();
      }
    );
    
    				
    			

    As soon as the code snippet has been customized with the new theme IDs, you can click on "Finished" and give the experiment a suitable name. Then open "Page Targeting" in the experiment and change the "Match Type" from "Simple Match" to "Contains". Then click on "Save Page Targeting".

    Shopify Theme Test Page Targeting

    Step 4: Targeting and quality assurance

    After you have implemented the JavaScript and CSS and saved the experiment, you can save your store URL in the page targeting of the experiment. You can also use the "Preview" links to check whether the redirect works and whether all settings have been made correctly.

    Step 5: Start the experiment

    Now start the experiment with "Start Experiment". From now on, 50% of your visitors will be directed to the new theme and 50% will continue to see the old theme. The visitors always remain assigned to the same variant for the duration of the experiment. This means that the theme they have seen once, they will see again during the experiment. After some time, you will recognize which theme performs better.

  • First steps