Intelligems Docs
  • Welcome to Intelligems
  • Getting Started
    • Getting Started
    • Adding Intelligems Script to your Theme
    • Updating the Intelligems Script
    • Common Use Cases
      • Price Test Common Use Cases
        • The Straddle
        • The Double Down
        • The Strikethrough
        • The Great Discount Debate
        • Savings Showdown: Volume Discount vs. Price Discount
      • Shipping Test Common Use Cases
        • The Flat Fee Face Off
        • The Threshold Trials
      • Content Test Common Use Cases
        • Landing Page Testing
        • Testing a Brand New Theme
        • Testing Different Imagery
        • Testing Cart Elements
        • Testing Announcement Bar Text
        • Navigation Menu
        • Testing Checkout Blocks
      • Offer Test Common Use Cases
        • The Volume Discount Duel
        • Gifting Games
    • Best Practices
      • 🧪Test Design Best Practices
      • ✅Best Practices During a Test
    • General FAQs
  • Price Testing
    • Price Testing - Getting Started
    • Price Testing Integration Guides
      • Integration Guide using Shopify Functions
        • Step 1: Add Intelligems JavaScript
        • Step 2: Tag product prices
        • Step 3: Update your cart
        • Step 4: QA your integration, and publish your changes
      • Integration Guide using Checkout Scripts
        • Step 1: Add Intelligems JavaScript
        • Step 2: Tag product prices
        • Step 3: Add the Checkout Script
        • Step 4: Update your cart
        • Step 5: QA your integration, and publish your changes
      • Integration Guide using Duplicate Products
        • Step 1: Add Intelligems JavaScript
        • Step 2: Tag product prices
        • Step 3: Hide duplicate products from collections pages
        • Step 4: Configure duplicate products
        • Step 5: QA your integration, and publish your changes
      • Troubleshooting
        • How to Add the data-product-id and/or data-variant-id Attribute to an Element
      • Replo Page Builder
    • How to Set Up a Price Test
    • Price Test QA Checklist
    • Starting a Price Test
    • Ending a Price Test
    • Testing Prices with Subscriptions
      • Testing Prices with Recharge 2.0 or Stay.Ai
      • How to Set Up a Price Test using Duplicate Products and Recharge Subscriptions
      • How to Set Up a Price Test using Duplicate Products and Skio Subscriptions
      • Managing Duplicate Products when Redirecting to Duplicate PDPs
    • Multi-Currency Testing
    • Price Testing FAQs
  • Shipping Testing
    • Shipping Testing - Getting Started
    • How to Set Up a Shipping Test
    • Shipping Test QA Checklist
    • Starting a Shipping Test
    • Ending a Shipping Test
    • Shipping Progress Bar Integration
    • Shipping Testing FAQs
  • Content Testing
    • Content Testing - Getting Started
      • How to Set Up a Split URL Test
      • How to Set Up an Onsite Edits Test
      • How to Set Up a Template Test
      • How to Set Up a Theme Test
      • How to Set Up a Test using our JavaScript API
    • Content Test QA Checklist
    • Ending a Theme Test
    • Content Testing FAQs
  • Personalizations
    • Personalizations - Getting Started
    • Personalization Modifications
      • Offer Modifications
      • Progress Bars
      • Offers: Integrating Widgets
      • Offers: Running a Large Number of Offer Personalizations with Shopify Functions
      • Theme Personalization Precautions
    • Targeting Personalizations
    • Targeting Modes for Personalizations
    • Previewing Personalizations
    • Testing Offer Personalizations
    • Offers Limits
    • Offer Combinations
    • Scheduling Personalizations
    • Rolling Out Tests
    • Personalizations FAQs
  • General Features
    • Targeting
      • Audience Targeting
      • Currency Targeting
      • Page Targeting
      • Mutually Exclusive Experiments
      • Targeting FAQs
    • Onsite Editor
    • Image Onsite Editor
    • CSS and JavaScript Injection
  • Analytics
    • Overview
      • How orders and sessions are attributed to experiments
      • Order and revenue accounting
      • How experiment targeting affects analytics
    • Analytics FAQs
    • Metric Definitions
      • Revenue
      • Conversion Funnel
      • Profit
      • Subscriptions
    • Filters
    • Statistical Significance
    • Timeseries
    • Custom Events
      • Overview
      • CSS Selectors
      • Scoping to specific pages
      • Custom Javascript Events
      • Testing Custom Events
      • Using custom events in experiment analytics
    • How to Add Profit to Intelligems Analytics
    • How to Add Product Groups to Intelligems Analytics
    • Tagging Orders by Test Group in Shopify
    • Exporting Data
    • Data Sharing
  • Performance Optimization
    • Site Performance
    • Optimizing Your Price-Test Integration
    • Anti-Flicker Modes
    • Edgemesh
  • Integrations
    • Google Analytics 4 Integration
    • Amplitude Integration
    • Heap Integration
    • Segment Integration
    • Heatmap Integrations
      • Integrating with Microsoft Clarity
      • Integrating with Heatmap.com
      • Integrating with HotJar
    • Navidium Testing
  • Developer Resources
    • Javascript API
      • User Object
      • Price Object
      • Campaigns Object
        • campaigns.getAll()
        • campaigns.getGWP(options)
        • campaigns.setHistoryStatus(params)
    • Intelligems Theme Snippets
    • Advanced Settings
    • Cart Permalinks
    • Targeting By Customer Parameters
    • Custom Add to Cart and Order Completed Events
Powered by GitBook
On this page
  • Background
  • Step 1: Inspect the price that is not working
  • 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 4: Open the code editor in Shopify
  • Step 5: Search the files
  • Step 6: Search each .liquid file to find the text
  • Step 7: Find the closest HTML open tag to the text.
  • Step 8: Insert a data-product-id and/or data-variant-id snippet.

Was this helpful?

  1. Price Testing
  2. Price Testing Integration Guides
  3. Troubleshooting

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

If a price on your website that is included in your test is not updating in preview mode, or is highlighted in blue, use this guide to resolve it.

PreviousTroubleshootingNextReplo Page Builder

Last updated 1 year ago

Was this helpful?

Background

One of the most common issues we see when completing the Intelligems Price Testing integration is that a price on your website that is included in your test is not updating in preview mode, or is highlighted in blue when it should be highlighted in green. This help guide will walk you through what theme change needs to be made in order to resolve this issue.

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.04would be a good spot to start. However, you're not looking for this intelli-price class; you're looking for the price-container__price class in this case.

Step 3: Download the 'Shopify Theme File Search by EZFY' Chrome extension

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

Once in the theme file of your choice navigate to the edit code option of the themes dropdown.

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 code editor and come back by repeating the step above.

In that search box, 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.

If no matches are found, search for a smaller portion of the text.

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.

If you don't already have it, this Chrome extension will be extremely helpful! You can download it .

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 for help.

here
reach out to Intelligems support