Step 2: Tag product prices
Introduction
To enable Intelligems to dynamically modify price elements for each test group during testing, it's essential to tag their locations on your website. This entails adding the query selector for price elements into the Intelligems configuration so the Intelligems plugin knows where those prices live. This guide will walk you through the process to do so.
Before you can use the Intelligems Widget, please confirm that you've added Intelligems JavaScript as a source into your theme.liquid file! See more on how to add our JavaScript to your site here.
Tagging your prices requires a Price Test to be set up in the Intelligems app! If you have not already done so, check out our guide on setting up a new Pricing Test here. Don't worry โ it won't change anything on your site until you hit start & you can always make edits to your test before launching it!
Step 1: Accessing the Widget
To get started, you will need to create a price test in the Intelligems app, and open the Intelligems preview widget for that test. There are two ways to access the Intelligems Preview Widget:
Navigate to the "A/B Tests: tab in the Intelligems app. Click on the eyeball icon to the right of the test you have created. This will open a new browser window up with your website with the widget enabled.
You can also enter this mode by adding /?ig-preview=true to the end of your website's URL (e.g. https://mystore.com/?ig-preview=true). This will open a modal where you can choose which experiment you would like to see in the onsite widget. In order to tag prices, be sure to select a price test from this dropdown.
Once you are in Preview mode, select the "Edit" button followed by the dollar sign. The video below will walk you through this process:
The Intelligems Widget offers full support for Google Chrome. Support for any other browsers is limited. If you are having an issue with the Widget in another browser, we suggest trying to run it in Google Chrome. For more support, please open a ticket with our support team here!
Step 2: Adding Price Selectors
Now that you are in Price Selector mode, it is time to tag price elements everywhere on your site. Follow the steps below:
Enable selector mode - you can do this by clicking the box associated with 2 in the image below.
Now that that is enabled, you will notice that elements on the page will be wrapped in a blue dotted line as you move your cursor around the page. Find a price element and click. You'll now notice the query selector has been added to the list in the integration widget, and if you hit save at the bottom of the widget, the element will be highlighted in green or blue. If the price is highlighted in green, then it is in the test you are currently previewing. If it is highlighted in blue, then it is not in the test you are currently previewing.
If there is a price for a product that is in the test you are currently previewing that is highlighted in blue, this most likely means that Intelligems cannot tell what product or variant ID is connected with that price element in order to update it correctly. Check out this guide for more information on the theme change that must be made to resolve this!
Continue this process until all price elements on your site have been tagged, ensuring that the tags for each element are added to the correct section - for example, compare price (otherwise known as strikethrough prices) query selectors should be included in the Compare At Price section, while price query selectors should be included in the Price Section. Note that you should not tag the prices in your cart drawer, cart page or at checkout!
Be sure to hit save at the bottom of the integration widget periodically and when you are done to ensure you do not lose any of your work!
1. The type of selector - see more below for what each type is for. 2. Enable selector mode - clicking this button will allow you click on your prices on your site and automatically add a new selector. 3. Query selectors that have been added. 4. Add a query selector manually. 5. Delete a query selector.
You'll know you're done when all price, compare at price, installment and savings elements are highlighted in blue or green on all pages in your store!
Note that you should not tag prices in the cart or cart drawer as we will manage updating those either through checkout scripts or duplicate products, depending on your version of Shopify.
Last updated