Using the Intelligems Widget to Integrate

Learn how to use the Intelligems Widget to finish your integration.

---

In this article:

• Prerequisites: Add Intelligems JavaScript and set up your test.

• Step 1: Enable integration mode.

• Step 2: Add price selectors.

• Step 3: Add compare at price selectors.

• Step 4: Tag price elements everywhere in your store.

• Step 5: Save your changes.

• Step 6: Troubleshooting, if applicable.

  • Resolving overlapping selectors.

  • Tagging elements that cannot be selected with the widget.
  • Adding the data-product-id attribute to an element.

Prerequisites: Add Intelligems JavaScript and set up your test.

Before you can use the Intelligems Widget, please confirm that you have added Intelligems JavaScript as a source into your theme.liquid file and created (but not started) a test in the Intelligems app. If you have not done these items, please refer to our integration guides for the type of test you are looking to run and Shopify plan you are on.

Step 1: Enable integration mode. 

Go to your store's homepage, and add ?ig-preview=true&ig-integration=true to the end of the URL. You should now see the Intelligems Widget floating in the top left part of the page, as seen below.

Step 2: Add price selectors.

Go to the 'Selectors' tab in the widget and click the price select icon to enter selection mode:

While in selection mode, you'll notice elements of the page highlighted in light red as you move your cursor around the page. Find a price element and click. You'll now notice the element is highlighted in blue or orange, and the query selector has been added to the list in the widget. If the price is highlighted in orange, then it is in the test you are currently previewing. If it is highlighted in blue, then it is not in the test you are currently previewing.

Step 3: Add compare at price selectors.

Now do the same for compare at price elements by clicking the compare at selector icon, then clicking on compare at price elements on the page.

During your test, compare at elements that you specify here will be replaced with the test compare at price if one is specified in the test design in the app. If no compare at price is specified for a test group, the compare at element will be hidden.

Step 4: Tag price elements everywhere in your store.

Continue this process, tagging price and compare at price elements everywhere in your store, including but not limited to:

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

You'll know you're done when all price and compare at price elements are highlighted in blue or orange on all pages in your store. 

Step 5: Save your changes.

Once you've tagged all price elements in your store, you can save your changes by clicking the 'Save' button, seen below.

This saves the query selectors you've chosen for your Intelligems configuration. Note that you will not notice any effects on your live site until you start a test - see more here for starting a price test and here for a shipping test.

---

Step 6: Troubleshooting, if applicable.

Resolving overlapping selectors.

While choosing selectors as described above, you may notice a warning that looks like the below: This warning means that you have chosen selectors that resolve to the same element in the price and compare at price sections. This can be a problem, because Intelligems will not know which price should be shown in that element: the item's price or the item's compare at price. To avoid this issue, you should remove the overlapping selector from one of the two sections.

Tagging elements that cannot be selected with the widget.

If there are price elements you're unable to tag using query selectors with the widget, you can also add the .igPrice or .igComparePrice class to the element in your theme. 

Adding the data-product-id attribute to an element.

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. For example:

data-product-id="{{product.id}}": Use this tag if the price is not correctly being picked up.

data-variant-id="{{variant.id}}": Use this tag to set the variant id directly onto an element.

data-price-offset="<insert-number-here>": Use this tag to add/subtract from the price inside the html element.

data-price-multiplier="<insert-number-here>": Use this tag to multiply the price inside the html element. Useful for doing per unit prices.