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 them stick across all product pages for the duration of the test.
Important Changes to Shopify Checkouts
At some point in the last year (2019 - 2020), Shopify implemented changes to their platform that prevents third-party scripts from running on checkout pages on non-Shopify Plus stores.
By "checkout pages" we are referring to the pages after the cart page and before the thank you/confirmation page.
This may, for now, only affect new implementations, where previous implementations may still work.
What this means is that you would not be able to hide the Preview Banner on those pages for the alternate theme. It may also affect you if you are tracking goals or anything else that requires the Convert script to be running. For revenue goals specifically, you can use the Webhook method.
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 percent 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. You can also install the Convert tracking code on checkout pages to be able to track revenue by GA, or our manual revenue tracking code or via webhooks.
Create Split URL test
Create a Split URL test.
Insert on the Original URL Field the following code:
^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
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:
$1$3$5?preview_theme_id=38987563079&$7
The resulting URL will be something like this http://www.store.com?preview_theme_id=65568381&.
Then enable “Support Regular Expressions” and "Transfer Original URL variables to the variation URL". Your test variations will look like this (except the theme ID will be different):
Site Area
Make sure that the Site Area includes all the pages in your website:
Could be something like this:
And exclude pages when the query string contains: preview_theme_id=65568381. This is very important, so when you activate the experiment, it does not cause a loop. If you see a loop, you will know what you missed.
Hide Shopify Preview Bar
Important
When the preview theme template is enabled there is a banner that appears specifying that it is a preview template.
However, this can be removed with CSS added to Shopify. In the section Online Store / Preferences / Google Analytics, add the following code:
(function() {
var css_override = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(css_override);
})();
var css = 'iframe#preview-bar-iframe { display: none !important; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
Note that on slow network connections, the preview banner may still show for a split-second, but in most cases does not.
Comments