Shopify Onborading

Section 1: Introduction to Visiopt Integration with Shopify

1.1 - Overview of Visiopt

 

Visiopt is a cutting-edge optimization and testing platform designed to enhance the performance of your Shopify store through advanced multivariate testing and comprehensive analytics. By integrating Visiopt with Shopify, you can conduct sophisticated experiments on your store's layout, design, and functionality to determine what drives the best results. This integration allows you to make data-driven decisions that improve customer engagement, increase conversion rates, and ultimately boost your revenue. In addition, with Visiopt campaigns, you can see exactly what’s working and what’s not , right down to the ad level, so you can optimize for maximum profitability and cut out wasted ad spend. Even better, we send these accurate tracking results back to the ad network pixels, which improves targeting, lowers costs, and boosts overall campaign performance. Its very quick and easy to set up. Do this only once and you are ready to roll with any new campaigns or tests you need to run.

 

1.2 - Importance of Visiopt for Shopify

 

Integrating Visiopt with your Shopify store provides several critical benefits:

 

Enhanced Testing Capabilities:

Move beyond traditional A/B testing with Visiopt's advanced multivariate testing, enabling you to test multiple variables simultaneously.

Data-Driven Insights:

Gain deeper insights into customer behavior and preferences, allowing you to tailor your store to meet their needs more effectively.

Improved Conversion Rates:

By optimizing your store based on test results, you can significantly increase your conversion rates and sales.

Automated Optimization:

Visiopt automates the process of identifying the best-performing variations, saving you time and effort.

Seamless Integration:

Visiopt's integration with Shopify is designed to be straightforward and user-friendly, ensuring that you can start optimizing your store quickly.

 

1.3 - Prerequisites and Preparations

Shopify Account:

• Login: Log in to your dashboard.
• Admin Access: Verify that you have admin access to your Shopify store to install apps and customize themes.
• 3rd Party Apps: If you are using 3rd party apps like Thiio, Pagefly, Shogun or others be advised that your setup will be a bit different. This will be covered in this document.

 

By ensuring you have these prerequisites in place, you will be well-prepared to integrate Visiopt with your Shopify store and start optimizing your online business for better performance and higher conversions.

 

Section 2: Setting Up Visiopt Tracking

2.1 - Set your domain as Shopify in Visiopt

In Visiopt, go to the Settings page > My Domains

If adding a new domain, then click the "Add a new domain" button.

If editing an existing domain, click on the edit icon of the desired domain.

 

Mark the domain as Shopify, then click Next:

2.2 - Setting Up the Visiopt Shopify App

 

Visiopt created a Shopify app, to make it easy to add and track Shopify pages in Visiopt.

 

In the next step, click Connect Shopify Store:

You will be redirected to the Shopify page. If not already logged in, log in using your Shopify credentials.

Then select the Shopify Store you want to connect:

Once the proper store is selected, install Visiopt app by clicking on Install button:

Once the app is installed, app dashboard will appear, click on Open Theme Editor:

Enable "Visiopt Integration" Theme Extension:

And Save the Changes:

Once done, you're ready to set up your funnel and add your Shopify pages.

 

Just add the pages you want, and that is it; no further actions are required. Visiopt will inject the Universal Smart Script via the Shopify app to the pages added to the funnel.

2.3 - Adding your pages to Visiopt

 

Before you can start tracking with Visiopt, it's essential to identify the pages you want to include in your funnel. Visiopt can track and test all Shopify pages, including:

 

• Product Pages: Individual product listings.
• Collection Pages: Groups of related products.
• Thank you / Confirmation page
• Custom Pages: Any other pages you want to track, such as landing pages or blog posts.

 

Step 1: Go to the Funnels page in Visiopt

• Click on the "Create New Funnel" button.

  

• Enter the name of your funnel > Hit Create Funnel.
  

 

Step 3: Adding Pages to the Funnel

 

• Click on the "Add Page" button within the funnel setup.
  

• Enter the URL of the Shopify page you wish to add.. Make sure the URL is accurate to avoid tracking issues.

  
  

• For dynamic pages such as the Thank you / Order Confirmation page you may have to place an order and grab the complete URL.
• Enter one URL at a time and click the “Add The page Button”

 

Step 4: NOTE: because you created a Visiopt app in your Shopify store in the previous steps, there will be NO need to add VisiSmart scripts directly  to your pages.

 

The tracking script will be injected automatically into every Shopify page you add to Visiopt.

 

If you want to add multiple product pages at once, you can do that by uploading a CSV file. You can download our sample file to see the correct format by clicking on the "Sample File" link. Once you updated the CSV file upload it:

 

2.4. - Adding VisiSmart Code to Shopify Thank You / Confirmation Pages

 

The confirmation / thank you page is the only exception, you will still have to add manually the VisiSmart script.

 

When you add your confirmation page, a pop up will appear with the VisiSmart script, you will see a switch titled  "This is my Shopify confirmation page":

 

Turn the switch ON, and then hit the "Copy VisiSmart Code for Shopify" button, to copy the slightly modified VisiSmart script:

 

Head back to your Shopify Admin: Now, go to your Shopify Admin page.

 

Step 1: Access Settings: In the Shopify Admin panel, click on the 'Settings' link in the bottom left.

 

Step 2: On the left-hand side, click on the Customer Events option:

 

Step 3: On the right-hand side, click on the button that says Add Custom Pixel:

 

Step 4: Enter an event name and hit Add Pixel:

Step 5: Paste the VisiSmart code copied earlier, and hit Connect:

2.54. - Adding non Shopify pages to your Shopify funnel

 

There might be cases when you want to add a page to your Shopify that was not built or hosted by Shopify, which means Visiopt can't inject the Universal Smart code into those pages.

 

To reveal the Universal Smarty code, turn on the switch where it says "Select Yes if this page is not built or hosted on Shopify":

The Universal Smarty code will be revealed, hit the Copy button, and paste the code before the closing </head> tag of your page:

 

 

Section 3: Setting Up Shopify Webhook

3.1 - Creating Your Webhook In Visiopt

 

To set up a webhook you must first have a test or campaign set up.

 

• Step 1: Set up your Webhook on the Settings page > Payment Processing and Carts > Shopify.
  
  
   
• Step 2: Enter a name for your Webhook > Select funnel to apply the webhook to > Hit Save & generate Webhook URL
  
  
   
• Step 3: Additionaly, you can mark the webhook as subscription by clicking on the Show as a subscription checkbox > Select the desired Recurring duration
  
   
• Step 4: To see the webhook stats in your test, on the test result page choose the webhooks option > Then select your webhook from the dropdown
  
  
   
• Step 5: To see the webhook stats in your campaign, in step 3 of the campaign setup, set Webhook as the goal type > Then select your webhook from the dropdown
  
  
• Step 4: Copy the webhook URL.
  

3.2 - Add Your Webhook To Shopify:

• Step 1: Log in top Shopify, and click on the settings link in the bottom of the left sidebar
  
  
   
• Step 2: Click on "Notifications"
  
  
   
• Step 3: Click on the "Create webhook" button
  
  
   
• Step 4: As Event, select the "Order Payment""Order Payment". Then paste in the URL copied from Visiopt, and hit "Save"
  

Section 4: Verifying the Integration

4.1 - Place A Test order

• Note: You must have an active test or campaign.
• Check Visiopt to ensure everything is recorded properly.

 

Section 5: - Troubleshooting Common Issues

5.1 - Troubleshooting

 

1. Pixel Not Tracking

 

• Verify all scripts are placed properly in Shopify.
• Pay close attention to the script ID’s to make sure you did not accidentally paste the wrong script.
• Remember each script is unique so every page will have its own unique script.
• Visit the pages in question. Right click and check source code. Search for Visiopt. Make sure the code is actually on the page and it is the c code.

 

2. Webhook Issues:

 

• Ensure the webhook is set up correctly and the URL is accurate.
• Be sure to give it time to update. Shopify can take between 10 to 30 minutes to send Visiopt the webhook.

 

Section 6: 3rd Party Apps

 

Some users use 3rd party page builders and checkout pages to connect with Visiopt.

Each Page Builder App is built differently and requires a slightly different set up.

Adding code to these builders is actually easier than to Shopify.

Please refer to the help documents here for additional assistance.

 

Shopify Course

 

If you don’t see the app you use, don’t worry, we are here to help.