# How to Add the data-product-id and/or data-variant-id Attribute to an Element

### Background

If a price included in your test is not updating in preview mode, or is highlighted in blue when it should be highlighted in green, use this guide to add a data attribute to help our plugin recognize the price.

### **Step 1: Inspect the price that is not working**

On the price that is not updating, right click and select 'Inspect' from the menu. This will open up the developer tools in the same window.

### **Step 2: Find a unique combination of classes, IDs, and/or attributes**

In the developer tools, the element you are inspecting should be highlighted. In one of the **parent** elements for the price that is not updating, find a unique combination of classes, IDs, and/or attributes. In the screenshot below, `intelli-price intelli-span_USD_37.04` would be a good place to start. However, you're not looking for this `intelli-price` class; you're looking for the `price-container__price` class in this case.

<figure><img src="/files/sRukG7AaQb1WPzXWs68C" alt=""><figcaption></figcaption></figure>

### **Step 3: Open the code editor in Shopify**

In another window, got to your Shopify admin account and select 'Sales Channels' > 'Online Store' > the three dots next to the theme you are integrating with > ' Edit code'.

<figure><img src="/files/Ha2xUSi63oMFLoJRWuQF" alt=""><figcaption></figcaption></figure>

### **Step 4: Search the files**

Using the search in the left nav menu, or by using **⇧ ⌘ F**, enter the unique combination of classes, IDs, and/or attributes that you found while inspecting your price in step 2. (It was `price-container__price` in the example above; yours will vary.) This will search all of your files, and any files that contains a match will be highlighted in blue.

<figure><img src="/files/TC2Z0SgRvfdIj71auMwm" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
If no matches are found, search for a smaller portion of the text.
{% endhint %}

### **Step 5: Search each .liquid file to find the text**

For each highlighted file with a .liquid extension, open the file and use keys Cmd + F to search the file for the text.

### **Step 6: Find the closest HTML open tag to the text.**

An opening tag begins a section of page content. To find the closest one to the text,

1\. Start from the highlighted text that you searched for.

2\. Keep moving left until you see an open tag.

3\. If there is no open tag directly to the left of the text, move one line up and start from the right end.

### **Step 7: Insert a data-product-id and/or data-variant-id snippet.**

Once you have found the closest HTML open tag, making sure there are spaces before and after, insert a data-product-id or data-variant-id snippet after the open tag using the below guidelines. Replace `product` with `variant` where necessary. With proper space, it should look similar to this:

```html
<span data-product-id="{{ product.id }}" class="{{ … }}"
```

1. If there's code nearby where 'product' is being used (e.g. `{{ product.title }}`), insert `data-product-id="{{ product.id }}"`. If you don't see anything about 'product', go to number two.<br>
2. If you see a value that is being used like `product` but is named something else, replace `product.id` with `<whatever custom name>.title` in the data-product-id snippet. If you don't see any usage of 'product' or something similar in the file, go to number three.<br>
3. Try adding `data-product-id="{{ product.id }}"`. Save the file and go back to the window with your site open. Refresh and see if the price is now working. If not, please [reach out to Intelligems support](https://portal.usepylon.com/intelligems/forms/intelligems-support-request) for help.


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.intelligems.io/price-testing/price-testing-integration-guides/troubleshooting/how-to-add-the-data-product-id-and-or-data-variant-id-attribute-to-an-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.