Shopify

Integrating Shopify with VWO allows you to create and run VWO tests on your Shopify store. The end-to-end process of integrating Shopify with VWO involves the following steps:

• Adding VWO SmartCode to your website pages
• Implementing Revenue Tracking

Things to Consider While Adding VWO SmartCode to Shopify Website

• When you add the VWO SmartCode to your Shopify Website, it is added to all the pages of your website except for "Check Out" and "Thank you" pages, however, if you are on Shopify PLUS and wish to enable the tracking on the "Check Out" page, perform this, and for "Thank you" page, perform this.
  
  
• If you wish to track subscription-based revenue collected in Shopify, refer to Tracking Subscription-based Revenue.

Adding VWO SmartCode to Your Website Pages

To add VWO SmartCode to your website, perform this:

Procedure

1. Sign in to your Shopify web store as an administrator.
2. From the navigation bar, go to Sales channels > Online Store.
3. Select the Themes tab, and from the Actions dropdown, select Edit Code.
4. Go to the theme.liquid file on the customization panel and then add the VWO SmartCode. VWO SmartCode will be added to all the pages (site-wide) in the selected theme. If your checkout process is on Shopify's domain, make sure to enable multiple domain tracking in VWO. To learn about running a test across multiple domains, refer to How to Enable Tests to Run Across Multiple Domains in VWO?
   

   NOTE: 
   
   1. If you are on Shopify Plus and wish to track the changes on the 
   checkout pages then you must add your VWO SmartCode in the 
   checkout.liquid file.
   
   2. If you are trying to set up the ITP resolution implementation, 
   you must add the configuration code snippet for ITP before the VWO 
   SmartCode. To learn about different code snippets, refer to 
   Resolving ITP Issues.

5. Click Save.

Implementing Revenue Tracking

To implement the revenue tracking, perform this: 

Procedure

1. Sign in to your Shopify web store as an administrator.
2. From the navigation bar, click Settings.
3. On the Settings page, click Checkout.
4. Place the VWO SmartCode in the Additional Scripts field.
   
5. Once you have added the VWO SmartCode, add the following JS code snippet right after the VWO SmartCode in the same field (Additional Scripts).

   <script type="text/javascript"> 
   window.VWO = window.VWO || []; 
   {% assign _vis_opt_revenue = total_price | money_without_currency %} 
   window._vis_opt_queue = window._vis_opt_queue || []; 
   window._vis_opt_queue.push(function() {_vis_opt_revenue_conversion('{{ _vis_opt_revenue }}'.replace(',', ''));}); 
   window.VWO.push(['track.revenueConversion','{{ _vis_opt_revenue }}'.replace(',', '')]); 
   </script>

6. To implement the changes, click Save.

NOTE: If the revenue value is added as a comma-separated value 
without decimals, VWO by default replaces the comma (,) with a 
decimal. For example, if you enter the value as 1,500, the comma 
is replaced with decimal as 1.5. Please make sure to add the revenue
value without the comma (,) such as 1500 or 1500.0.

Create a Standalone Revenue Tracking Goal

To create a standalone revenue tracking goal in VWO, perform this:

Procedure

1. Log in to your VWO dashboard, and go to INSIGHTS > Goal.
2. Click Create on the top right side of the dashboard.
3. Select Track Revenue as the goal type to track.
4. Enter the URL of the page where your successful transactions are recorded. Typically, the revenue value is available on the 'thank­you' page, where successful transaction data is collected.
5. To track revenue on multiple pages, click the Advanced option to include and exclude pages, define URL pattern, and regex.
6. Select the segmentation option if you want to track revenue collection from specific visitor groups. To learn about segmentation, refer to Targeting Variations to Visitor Segments in VWO.
7. Click Next to define the page audience. All unique visitors landing on this page are your goal audiences. Using the Advanced option, you can define advanced pattern-matching options to include either a broad URL with wildcard entries or a specific URL.

Add Revenue Goal To a Specific Test

To add revenue goal to a specific test, perform this:

Procedure

1. Create an A/B, Personalization, Multivariate, or Split test using VWO.
2. On the Goals page, select Track Revenue on, as the conversion goal type, and enter the Shopify conversion page (thank you page) as the goal URL. For example, *checkout.shopify.com*XXXXXX*, where XXXXXX is the number of your store.

NOTE: If the thank you page is on Shopify’s domain, you will need to 
enable the campaign to work across multiple domains. To know how to 
enable this, refer to How to Enable Tests to Run Across Multiple Domains
in VWO?.

Tracking Subscription-based Revenue

To track subscription-based revenue collected in Shopify using the recharge app's plugin, perform this:

Procedure

1. In the Shopify panel, open the recharge app.
2. To open the menu, click on the wrench icon present on the top right corner of the page.
3. From the menu, select the Checkout option.
4. Add VWO SmartCode and revenue snippet in the 'thank you' page.
   

   NOTE: You can find the VWO Smartcode here.

   ATTENTION: Use the following revenue code snippet
   
   <script type="text/javascript">
   window.VWO = window.VWO || [];
   window.VWO.push(['track.revenueConversion',window.cart_json.total_price]);
   window._vis_opt_queue = window._vis_opt_queue || [];
   window._vis_opt_queue.push(function() {_vis_opt_revenue_conversion(window.cart_json.total_price);});
   </script>