For this tutorial, we are using a theme that is not yet supported by the default or the template placement. We will be setting up the product page; the steps are the same for any location on your store.
​
​Step 1
​

Navigate to the “Advanced” tab. This section is used to configure the app for the non-supported themes. Here, you can modify the Dom Selectors to decide where the offer appears on your store.

Step 2

Head over to your site. Right-click anywhere on the page, and click the word “Inspect”. This will open the developer’s tool.
​
​

Step 3
​
Choose where on the page you would like the offer to appear (We want the offer to appear below the buttons). After doing so, you are going to inspect the element by clicking the Element select icon in the top left corner of the panel.
​

Step 4
​
Click the page element where the offer will be located either before or after (In this tutorial the elements are the buttons, because we want our offer to appear after the buttons. After clicking the element you’ll see the source code revealed in the inspect panel.

Step 5

Locate the element that is highlighted in the developer’s tool under the “Elements tab”. The element will have either a class name or an ID name. You can either copy the class name or the ID name to be used in the app as the Dom Selector. Please note that each element can have multiple class names, each separated by a space. You can copy the first class name to be used in cases like these. In this case, the element has a class name, so we will copy that class name to add to the app.

Step 6
​

Go back to In Cart Upsell.
​
​A class selector is a name preceded by a period (“.”) and an ID selector is a name preceded by a hash character (“#”).
​
We are using the class name as the selector, so we must add the period before the name. For example, “.product-form__item”.
​

After adding the period or the hash character if an ID name is being used, paste the name in the Advanced Tab in the section that you are doing the offer placement for. In this case, we are setting up the product page.

Scroll down to the Dom Action section, and click the dropdown arrow to open the options list. Selector “Before” if the offer widget should appear above the selected element, or “After” if the offer widget should appear below the selected element.

Step 6

Scroll all the way down on the page. If you want all your offers to appear in the same position on your store, click the option to make the settings default for every offer. On the other hand, if you want each of your offers to appear in a different position then you can leave this option unchecked. Save your offer as a draft or publish.
​