If you need to test out a lot of changes at once with a Shopify store, split testing themes is the likely easiest way to go about it. Modifying code manually through the editing tools built into your testing tools can be very difficult or altogether impossible.
But, that isn’t to say that running two Shopify themes at once doesn’t come without its fair share of challenges. Due to the way that Shopify handles live and preview themes, a number of different things need to be put in place to allow for a good experience. Let’s break down the steps for testing two themes in VWO (Visual Website Optimizer) by Wingify.
Hide Preview Bar
Assuming you already have two (or more) themes you’re ready to test, the first things you’re going to want to do is hide the Shopify preview bar by adding a bit of CSS to theme’s CSS file or as near to the top of the <head> as possible.
.shopify-preview-bar { display: none }This will prevent the bar at the bottom of the page from displaying, certainly something you don’t want your test participants to see.
You’ll also want to ensure that the pesky preview bar doesn’t show in the checkout, which requires an extra bit of code to be inserted into the Shopify Admin, under “Online Store > Preferences” in the Google Analytics – Additional Google Analytics JavaScript input box. If you already have code here, just add this to the end exactly as you see below.
(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);Now, save it and head back to your preview theme, start a checkout and confirm the preview bar is no longer there.
Modify VWO Code
The standard VWO code works great, but it has a tough time dealing with the redirects that happen when previewing themes in Shopify. If you’ve ever noticed, when previewing a theme, the URL will change after the preview is triggered.
For example, https://www.example.com/?fts=0&preview_theme_id=40229273666 becomes https://www.example.com/?fts=0 when the page is fully loaded, and the new theme is visible.
Due to the way VWO evaluates test URLs, we need to make a few changes. The code below can be used to replace the currently implemented VWO code, just update the [XXXXXXXXXXXX] with your preview theme ID and VWO account ID to make it your own.
<!-- Start VWO Asynchronous Code -->
<script type='text/javascript'>
_vis_opt_url = document.location.protocol + '//' + document.location.hostname + document.location.pathname + "?preview_theme_id=[XXXXXXXXXXXX]&" + document.location.search.substring(1,) + document.location.hash
var _vwo_code=(function(){
var account_id=[XXXXXXXXXXXX],
_vis_opt_url = window._vis_opt_url || document.URL,
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document;return{use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b='body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(_vis_opt_url)+'&r='+Math.random());return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
</script>
<!-- End VWO Asynchronous Code --> Save these changes in both your current theme and your test theme in Shopify. You’ll also need to update this code in your conversion tracking scripts as well so that conversions continue to flow through correctly.
Add it to your “Additional Scripts” section in your checkout settings in Shopify along with the conversion tracking code below.
{% if first_time_accessed %}
<script type="text/javascript">
window.VWO = window.VWO || [];
window.VWO.push(['track.revenueConversion',"{{ total_price | money_without_currency }}"]);
</script>
{% endif %}Setup The VWO Test
The next step you’ll need to complete is the setup of the VWO test.
There are a lot of settings we’re not going to cover here, such as traffic splits, integrations, or goal setup, but for this test to work, it is important to make sure the test is set up as a split URL and not a normal A/B test.
When setting up your split test you’ll want to make sure you use “URL matches pattern” for your selection for both control and variation URLs. This will ensure that your test runs for all pages, not just a single page.
The control URL will be easy, just use your regular URL – minus the trailing forward-slash ( / ) and add the wildcard character ( * ) at the end.
https://www.example.com*Your variant URL will depend on your specific preview theme URL, but will look similar to the above with the ID added to the end and an extra parameter, like “test=1”.
https://www.example.com*?preview_theme_id=40229273666&test=1The “test=1” will be used in the last setup step, to exclude some URLs from the campaign, which will prevent an endless redirect loop from happening.
Make sure to check the box below “More Options” to “exclude some URLs” containing the “test=1”.
This screenshot shows the setup in the current VWO interface.
Preview Your Tests
Save your changes, then preview your control and variant using the live preview functionality built into VWO.
You’ll want to copy/paste the links into a new, incognito browser session to make sure you remove any cached variables or active previews from Shopify or VWO.
If you have any questions, feel free to comment below