close this to read article
While the idea behind using Shopify is to create a website and use their shopping cart solution to sell, ship, and manage your products, it often strikes us as to how one Shopify theme on your website would perform against the other, especially knowing that Shopify now offers a wide range of themes.
Using VWO’s Split Testing feature, you can put two or more Shopify themes (applied to your website) to compete against one another. With VWO’s Bayesian algorithms, you can analyze the visitor behavior on each of the themes applied to a Shopify website.
Now, let us go through the stepwise flow of setting up a Split URL campaign to test one Shopify theme against another.
Procedure
- Login to your VWO account.
- Go to Testing > Split URL > Create.
- In the Control field, enter the URL of the existing/original version/theme of your Shopify website (i.e., <Your_Shopify_Domain>*).
- In the Variation1 field, enter the URL of the new version/theme of your Shopify website. Usually, this is known as the preview theme URL and is of the format:
<Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX (where XXXXXXXXXXXX is the ID of your Shopify Preview theme) Now, append a dummy query parameter to this Preview Theme URL, i.e., <Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX&test=1.
NOTE: A dummy query parameter needs to be appended because Shopify's default behavior is that the theme is automatically redirected from <Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX to <Your_Shopify_Domain> and the Live Preview in VWO, in this case, would open on <Your_Shopify_Domain> itself. - When the user is redirected from <Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX to <Your_Shopify_Domain> in VWO’s Live Previews, the URL <Your_Shopify_Domain> matches the URL of the Control of the campaign that you are running in VWO. This will again result in the user being redirected to <Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX and back to <Your_Shopify_Domain>. As a result, the user is stuck in an infinite loop of redirection, and the site does not load in VWO. To resolve this, exclude the query parameter (in this case, test=1).
NOTE: By appending the dummy query parameter, the visitor will be redirected from <Your_Shopify_Domain>*?preview_theme_id=XXXXXXXXXXXX&test=1 to <Your_Shopify_Domain>/?test=1 and the theme will open up in the VWO’s Live Preview mode. - The URL <Your_Shopify_Domain>/?test=1 does not match the Variation URL in VWO. To solve this, you need to set up a custom URL on your preview theme, which will allow VWO to know that the URL is of the preview theme.
NOTE: Once you’re on Shopify’s preview URL, Shopify always displays a message at the bottom stating “You are in the preview mode” even though Shopify consumes the preview query parameter. If required, you can hide the preview mode bar by adding the below CSS to the top of the <head> tag: #preview-bar-iframe {display: none;}. - To set up a Custom URL on a preview theme, use the following VWO SmartCode:
To check if you have correctly installed the SmartCode on your webpage, enter the URL in the SmartCode Checker in the Settings > SmartCode section of your VWO Account. See SmartCode Checker in VWO to know what different results mean.