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:

1. 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.

2. 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:

1. Enable selector mode - you can do this by clicking the box associated with 2 in the image below.

2. 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!

3. 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!

4. 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.

A few places to keep in mind as you tag all of the prices elements in your store include:

• Homepage

• Collection Pages

• Product Detail Pages (PDPs) - make sure you don't miss tagging any related or recommended products listed on your PDPs!

• Search Results Page or Bar, depending on where results show price

• Product Quiz

• Upsells in the cart or at checkout

Here are all of the different selector types:

Price: Use this section to select product prices on your store's site.

Compare At Price: Use this section to select compare prices on your store's site.

Installment: Use this section to select installments on your store's site. The default number of payments is 4. To change the payment amount, add the below to the element containing your installment in your theme.

data-payment-count="{{payment_amount}}" 

The Installment selector is compatible with installments that are:

1. Directly in your liquid

2. Not in the liquid, but is wrapped in its own <span>

This selector is not compatible with installments that are:

1. Wrapped in a Shadow DOM

2. Not wrapped in its own span

Savings (Price): Use this option to select the dollar savings amount. This is normally located on your product pages.

Savings (Percentage): Use this option to select the percentage savings amount. This is normally located on your product pages.

Cart Discount Message: Use this option to hide a discount message (i.e. DISCOUNT or INTELLIGEMS) in your cart.

A few tips & tricks:

Per Unit Prices. If you have per unit prices listed for a product, you can follow these steps to update those prices accordingly during a price test:

1. Tag the per unit prices with a normal Price selector.

2. In your theme code, add data-price-multiplier=".X" to the per unit element, where X is what you want to multiple the price by. For example, if you wanted to show the per unit price when there are three units included, you would add data-price-multiplier=".33" to the element.

Discounted Prices. Many brands use the compare price field in Shopify to show a perceived discount - these are easy to tag using our various selector types. However, some brands will use a different method to show discounted prices by manipulating the frontend prices & using something like a Checkout Script to achieve a perceived discount. If this is the case for your store, follow these steps to accurately tag those prices:

1. Tag the per unit prices with a normal Price selector.

2. In your theme code, add data-price-multiplier=".X" to the discounted price element, where X is the inverse of the discount you are applying. For example, if you were running a 20% discount, you would add data-price-multiplier=".8" to the element.

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.

Having issues? Checkout our troubleshooting guide here or submit a ticket to our support team here!