Start Free trial

Articles in this section

See more →

Set Up Theme Testing in the Wingify Shopify App

Prasitha Thomas
  • Updated
Share:
close this to read article

This article covers the following:

Overview

Shopify is an e-commerce platform that enables individuals and businesses to create and manage online stores. Shopify store owners often look for ways to improve user experience, boost conversions, and stay competitive. One way to improve user experience is to experiment with new themes. Here’s where the Wingify Shopify App comes into play. It creates a seamless connection between Wingify and Shopify and automatically deploys Wingify's SmartCode across your online store's web pages and new themes. One way to improve user experience is to experiment with new themes. The Wingify Shopify App simplifies this process by creating a seamless connection between Wingify and Shopify and automatically deploying the Wingify SmartCode across your online store and new themes.

Test Themes with the Wingify Shopify App

Let’s take a real-life use case for a better understanding: A luxury ornament brand using Shopify observes a decline in the overall engagement and conversion rate. The website owner hypothesizes that changing the overall theme with a new UI and color schemes will enhance conversions.

Here’s where the Wingify Shopify App enables the website owner to conduct a Split URL Test The Wingify Shopify App enables the website owner to run a Split URL Test to determine whether the new theme works better. The website owner needs to enable theme testing and Wingify automatically embeds its SmartCode in the theme under test.

The website owner can then set up a Split URL Test to compare the performance metrics of the new theme against the current one. This approach to experimentation offers the following benefits:

  • Eliminates the need to embed the SmartCode explicitly on the new themes, saving time and effort.
  • Ensures consistent data collection across new theme variations.
  • Helps store owners test and optimize new themes seamlessly using Wingify's Split URL testing feature.

Enable Theme Testing on the Wingify Shopify App

Install the Wingify Shopify App and follow these steps to enable theme testing:

  1. Log in to your Shopify account.
  2. From your Shopify admin view, navigate to Online Store > Themes.

  3. Find the theme you want to test from the Theme library and click Customize. 

    customize theme.png

    The system auto-generates a preview URL for the selected theme. It contains the theme ID you will need while setting up the split URL test in Wingify.

    Shopify theme ID.png

  4. From the top left, navigate to App embeds.
  5. Turn on the VWO (Wingify) SmartCode toggle. This activates the Wingify integration with your Shopify website.

Note: If you have installed multiple apps, you can search for the Wingify Shopify App directly in the search bar. This helps you access the Wingify SmartCode toggle faster.

 

app embeds in Shopify.png
  1. Open the toggle dropdown and enter your Wingify Account ID. You can find it near the top right corner of your Wingify dashboard after you log in.
  2. To enable theme testing in Wingify, turn on the Enable Theme Testing toggle.
  3. Click Save.

Note: After you enable theme testing, Wingify automatically embeds its SmartCode into the selected theme, allowing you to run Split URL Test from the Wingify dashboard. The Theme Testing feature applies only to themes in draft or unpublished state.

Set Up a Split URL Test for Theme Testing in Wingify

A split URL test lets you compare the performance of the theme variations hosted on each URL. After enabling Theme Testing in Shopify, you must set up a Split URL Test in your Wingify account to test whether the new theme performs well.

To configure a Split URL test for your new theme:

  1. Log in to your Wingify account.
  2. Go to Web Experimentation. From the Create button dropdown, select Split URL.
  3. In Configuration > Variations & Traffic, select the URL matches pattern option and enter the URL of your current Shopify theme as follows: Your_Shopify_Domain* The asterisk mark (*) lets you execute your campaign on multiple URLs. For example, you can use the pattern http://www.example.com* to run the campaign on the entire website. Similarly, you can use the pattern http://www.example.com/products* to run the campaign on your website's product pages.
  4. In the Variation 1 field, select the URL matches pattern and enter the URL of your Shopify store with the theme ID of your new Shopify theme in the following format: Your_Shopify_Domain*?preview_theme_id=XXXXXXXXXXXX You can find the theme ID after clicking Customize on the theme you want to test in the Theme Library. For more details, refer to step 3 of Enable Theme Testing on Wingify Shopify App.
  5. Append a dummy query parameter (test=1) after the theme ID to the variation URL in the following format: Your_Shopify_Domain*?preview_theme_id=XXXXXXXXXXXX*&test=1*
  6. Select the Exclude some URLs from the campaign checkbox, select URL contains, enter the query parameter (test =1) from the previous step, and click Save Now.

Attention: Steps 5 and 6 above are required to be done to avoid the situation of an infinite loop for the visitors assigned to Variation 1. Here's why:

  • A split test starts, and a visitor is assigned to Variation 1. The visitor is redirected from the existing theme (Control) to the new theme (Variation 1).
  • Shopify automatically removes query parameters, such as 'preview_theme_id', from URLs when matching the currently loaded URL with the designated control URL within campaign settings. This removal makes the Variation URL identical to the Control URL, leading to an unintended redirection of the visitor back to the control URL. This creates an endless loop where users bounce between Control and Variation 1.
  • Adding test=1 to the variation URL and excluding it from the control URL pattern prevents the infinite loop by keeping it distinct from the Control, ensuring the test runs smoothly.
  1. Click Next, set the Traffic split for your Control (existing theme) and Variation (new theme), and click Save Now.
  2. Click Next and define the metrics you want to track to compare the performance between the two themes.
  3. Segment your audience if you wish to target the audience based on specific criteria.
  4. Before starting the test, use Review > Live Preview to preview both the Control and Variant 1 URLs. This ensures that both the existing and new themes render correctly and allows you to validate the overall campaign.
  5. As a final step, click the Start test button to run the test.

Based on the Split URL Test results, you can determine which theme works best for your website and make data-driven decisions.

Verify the Split URL Test Setup

After setting up your Split URL test in Wingify, follow these steps to ensure everything is working correctly:

1. Conduct Live Previews

To quickly validate your split test, use the Live Preview feature. Navigate to the Review tab and select Live Preview. In the Preview URL field, enter the Control URL (existing theme), then choose the desired variant (new theme) that you want to QA from the Variation dropdown. Finally, click Preview in a new tab to see the redirection in action.

This step helps ensure the end user is redirected to the new theme as expected.

Attention: During the live preview of the Variation URL (the new theme), if you try to preview the Control variant (the existing theme), the browser does not redirect to the control preview as Wingify does not append the theme ID of the existing theme. To resolve this, select the Control variant from the debugger at the bottom right, and in the address bar, manually append the ?preview_theme_id=XXXXXXXXXXX to the Control URL. The same condition applies to the heatmaps preview of the Control variant.

Note: Due to Shopify's caching issues, changes in themes may not display correctly when using Wingify Live Preview to preview new Shopify themes

2. Check URL Redirection

Open the Control URL (existing theme) in your browser. Ensure it redirects to the Variation URL when you are assigned to the variation.

3. Check Campaign Status

Once the campaign is verified via the Review feature, proceed with setting the campaign live. Navigate to Web Experimentation and ensure the campaign is Active and receiving traffic.

4. Track User Behavior & Conversions

Monitor analytics in Wingify to confirm that user interactions, conversions, and other metrics are being recorded correctly.

Best Practices

To ensure accurate results and a smooth theme testing experience, follow these best practices when configuring your Split URL test:

  • Always double-check the URLs of the Control (original theme) and Variation (new theme).
  • Ensure the variation URL includes the "test=1" parameter to avoid redirection loops.
  • Let the test collect enough data before making a decision. Ending the test too soon can lead to inaccurate or misleading results.

Need more help?

For more information or further assistance, contact Wingify Support.

Was this article helpful?

Return to top

Related articles