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. Click the Legacy onsite editor button top open the onsite editor.

The Legacy onsite editor offers full support for Google Chrome. Support for any other browsers is limited. If the editor doesn't appear in another browser, we suggest trying 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

2. Enable price selector mode: Click the box labeled 2 in the image below

3. Tag price elements: Move your cursor to see the page elements highlighted. Click a price element to add it to the 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.

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

1. This label shows the category of selector, e.g. price, compare-at, etc. 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. Delete a query selector 5. Simplify a selector: use this function if the selector added was too specific 6. Add a selector manually 7. Auto-add all price selectors on your site using AI

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