Step 2: Tag product prices

Introduction

To enable Intelligems to dynamically modify price elements for each test group during testing, it is essential to "tag" those elements everywhere they appear on your site. This entails adding the querySelector for all price elements 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.

Step 1: Accessing the Widget

Create a price test in the Intelligems app, open the Modifications tab, choose the products you want to test, and enter their prices in the table.

Then open the QA & Preview tab, choose the theme you want to tag from the Theme dropdown, and click Open preview. Your store opens in a new tab with the Intelligems widget in the top-left corner. Click Edit in the widget to switch it into Edit mode.

If the preview tab doesn't open, check that your browser isn't blocking pop-ups and that the Intelligems script is installed on the theme you picked. The widget has full support in Google Chrome. If it doesn't appear in another browser, try Chrome.

Step 2: Adding Price Selectors

Now that you are in Edit mode, it is time to tag price elements everywhere on your site. Follow the steps below:

1. Enable price tagging mode: Click the $ icon in the widget. The Edit Price Query Selectors panel opens, with a section for each selector type.

2. Enable price selector mode: Click the selector icon on the right of the section you're tagging (Price, Compare At Price, and so on).

3. Tag price elements: Move your cursor to see the page elements highlighted. Click a price element to add it to that section's selector list. Click Save to highlight the element:

   • Green = product is in the test you are currently previewing

   • Blue = product is not in the test you are currently previewing

   • If the price for a product in your test is highlighted in blue, Intelligems can't identify the product or variant ID. See this guide for the required theme change.

4. Tag all prices: Add query selectors to the correct section (Compare At Price for strikethrough prices, Price for actual prices, etc.) for all price elements on your site. Each section also has an Auto add button that looks for that section's price elements for you. Check what it adds before you save.

5. Save your work: Click Save periodically to avoid losing progress

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.

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-at price field in Shopify to show a perceived discount. These are easy to tag using our various selector types. However, some stores 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, 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. Intelligems will update those amounts using Cart Transform Functions.

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