> For the complete documentation index, see [llms.txt](https://docs.intelligems.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intelligems.io/pricing-experiences/price-testing-integration-guides/integration-guide-using-shopify-functions/step-2-tag-product-prices.md).

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

{% hint style="warning" %}
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](https://docs.intelligems.io/getting-started/adding-intelligems-script-to-your-theme).
{% endhint %}

### Step 1: Accessing the Widget <a href="#accessing-the-widget" id="accessing-the-widget"></a>

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.

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fj14eFzHTZ5gOZRicDv0i%2Fscreenshot-1790191971366-1.jpg?alt=media&amp;token=78866b9b-8870-46aa-ab3f-f5afebb55c0d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

### Step 2: Adding Price Selectors <a href="#adding-price-selectors" id="adding-price-selectors"></a>

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:
   * <mark style="color:$success;">Green</mark> = product is in the test you are currently previewing
   * <mark style="color:blue;">Blue</mark> = 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](https://docs.intelligems.io/pricing-experiences/price-testing-integration-guides/troubleshooting/how-to-add-the-data-product-id-and-or-data-variant-id-attribute-to-an-element) 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

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2FBbpG2tmycyarr6FhJc0H%2Fscreenshot-1790191971364-0.jpg?alt=media&amp;token=d077c5b6-6b96-4e0a-a935-c5a53d9956a9" alt=""><figcaption></figcaption></figure>

<details>

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

* 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

</details>

<details>

<summary>Here are all of the different selector types:</summary>

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

</details>

<details>

<summary>A few tips &#x26; tricks:</summary>

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

</details>

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.

{% hint style="danger" %}
Note that you **should not tag prices in the cart or cart drawer.** Intelligems will update those amounts using Cart Transform Functions.
{% endhint %}

{% hint style="info" %}
Having issues? Checkout our troubleshooting guide [here](/pricing-experiences/price-testing-integration-guides/troubleshooting.md) or submit a ticket to our support team [here](https://portal.usepylon.com/intelligems/forms/price-test-integration-request)!
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.intelligems.io/pricing-experiences/price-testing-integration-guides/integration-guide-using-shopify-functions/step-2-tag-product-prices.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.