Using Mida's Split URL testing, you can put two or more Shopify themes (applied to your website) to compete against one another.
Now, let us go through the stepwise flow of setting up a Split URL experience to test one Shopify theme against another.
Select Shopify Themes
You can select two different Shopify themes. The main theme will be the one you are showing live to the Shopify store visitors, while the other that you want to test against will be in preview mode (not published).
Install Mida Tracking Script
You should follow the Shopify installation instructions and install Mida script in both Shopify themes that you want to Split Test.
Find Shopify Preview Theme ID
Go to customize the unpublished theme from within the Shopify admin.
Once the page have loaded, now you can find the theme ID in the page URL, just copy the number part of the URL and it should look something like:
https://admin.shopify.com/store/fake-store-url/themes/234567890/editor
You will need this ID so that you can append ?preview_theme_id=xxxxxxxx as a variation URL for the Split URL test (that we describe on the next section).
IMPORTANT
Don't delete the test theme when you end the experiment. Visitors who were in the variant stay on it until you move them back to your live theme, and deleting it while they are still on it can show them an error page. See After the test ends at the bottom of this article.
Create Split URL Test
In the "New URL Split Test Profile" section insert on the Base Variation URL field the following code:
yourshopifystore.com/*
Use the following as the Variation URL, where the preview_theme_id variable is what you discovered from the previous step (you should replace 234567890 with your own preview theme ID):
yourshopifystore.com/*?preview_theme_id=234567890
Your setup should look something like this:
Hide Shopify Preview Bar
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 your new Theme (unpublished). Just go to your theme.liquid page, add this code in the HEAD section (just like how you add Mida script):
<style>
iframe#preview-bar-iframe, #PBarNextFrameWrapper[popover="manual"] {
display: none !important;
}
</style>
After the test ends
Shopify remembers the preview theme in a cookie for a year, and renews it every time the visitor comes back. So visitors who were in the theme variant keep seeing the test theme after you end the experiment, even though Mida no longer redirects them.
To move them back to your live theme, add this code to theme.liquid in the test theme (the unpublished one), in the HEAD section right after {{ content_for_header }}:
<script>
(function () {
var t = window.Shopify && Shopify.theme;
if (!t || t.role === 'main' || Shopify.designMode || window.top !== window.self) return;
var u = new URL(location.href);
if (u.searchParams.has('preview_theme_id')) return;
u.searchParams.set('preview_theme_id', '');
location.replace(u.toString());
})();
</script>
The code only runs on an unpublished theme. It reloads the page once with an empty preview_theme_id, which tells Shopify to clear the preview and show your live theme from then on. Visitors on your live theme aren't affected, and you can still preview the test theme from your Shopify admin.
Keep the test theme unpublished with this code in it for a few weeks, so returning visitors pass through it once. When the old theme stops showing up in your analytics or session recordings, you can delete it.
If the test theme won and you publish it, you can skip this step. Your visitors are already on it, and the code does nothing on a published theme.