Introduction
If you want to test out diverse design changes in Shopify, read the steps below. You can test new product page designs, and have it stick across all product pages for the duration of the test.
Select Shopify Themes
You can select two different Shopify themes or duplicate the existing theme, then make changes as needed in the duplicate theme. You should add the following CSS:
.shopify-preview-bar { display: none }
The line of code removes the preview text at the bottom insert by Shopify, so users in the variation do not see it.
Find Shopify Preview Theme ID
Preview the new theme from within the Shopify admin, then view the source code in the head to get the theme’s ID. In the below example, we see the ID is 65568381:
<script>
//<![CDATA[
var Shopify = Shopify || {};
Shopify.shop = "store.myshopify.com";
Shopify.theme = {"name":"[LIVE] My Goods","id":65568381,"theme_store_id":null,"role":"main"};
//]]>
</script>
Then, what we need to do is append ?preview_theme_id=65568381 as a variation for a URL test so that the new design loads for 50 per cent of people who visit the store.
Install Convert Tracking Code in both Themes
You should follow the instructions and install Convert tracking code in both Shopify themes that you want to Split Test.
Create Split URL test
Create a Split URL test. Make the control URL: http://www.store.com
Use the following as the Variation 1 URL, where the preview_theme_id variable is what you discovered from the source code. This code appends the preview_theme_id variable to load a new theme: http://www.store.com?preview_theme_id=65568381&.
Then enable “Support Regular Expressions”. Your test variations will look like:
Site Area
The last thing you need to do is include all pages in the test with the site area settings:
And exclude pages when the query string contains: preview_theme_id=65568381
Note: When the preview template is enabled there is a banner that appears specifying that is a preview template.
However, this can be removed with CSS added to the variation CSS. We have not documented that yet.
Comments