If a price on your website that is included in your test is not updating in preview mode, or is highlighted in blue in integration mode, use this guide to resolve it.
In this article:
- Background Knowledge
- Step 2: Find a unique combination of classes, IDs, and/or attributes.
-
Step 3: Download the 'Shopify Theme File Search by EZFY' Chrome extension.
- Step 6: Search each .liquid file to find the text.
- Step 7: Find the closest HTML open tag.
- Step 8: Insert a data-product-id snippet.
Background Knowledge
In addition to knowing which elements in your store are prices, Intelligems also needs to know which product each price is for. Typically, Intelligems is able to figure this out automatically, but in some circumstances you may need to set it explicitly on a price element. If a price on your website that is included in your test is not updating in preview mode, or is highlighted in blue in integration mode, that is a good sign that you need to follow these steps to fix it.
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 below example, price price--sale is a good starting point.
Step 3: Download the 'Shopify Theme File Search by EZFY' Chrome extension.
If you don't already have it, this Chrome extension will be extremely helpful! You can download it here.
Step 4: 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'.
Step 5: Search the files.
The Chrome extension you just downloaded should render a search box at the top of your screen like the one in the screenshot below once you are in the code editor. If you don't see it, you may need to refresh, or exit the editor and come back.
In that search box, enter the unique combination of classes, IDs, and/or attributes that you found while inspecting your price in step 2. This will search all of your files, and any files that contains a match will be highlighted in blue like the screenshot below.
❗If no matches are found, search for a smaller portion of the text. In our example above (.price price--sale), if there were no results, we would want to try price--sale next.
Step 6: 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 7: 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 8: 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:
<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.
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.
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 support@intelligems.io for help.