Our Element Selector bundle injection feature is an easy-to-use dynamic way to place your offer anywhere on the product page. You can inject your bundle relative to any HTML element on the page by simply clicking it.
Using default Placement Options
By default, we offer the above or below positioning relative to the add-to-cart button which can be done by selecting one of the two options.
Using the Custom Element Selector
The Custom Element Selector allows you to position your offers above or below the ID or Class of the HTML element of your choice on any page on your website. To use this option choose the position (above or below) and click the Open Dynamic Selector to select your placement.
This will open a new tab in which the product page becomes interactive and as you hover over the page you can select with your mouse any HTML element and position the bundle relative to it.
Depending on the specific pages you selected to display your bundle on in the first stage of bundle creation, you may see multiple pages for which you need to set up the injection. To better illustrate this example, we’ve selected both a collection and products to display a bundle offer, as shown in the screenshot below:
Based on the above selection, once we reach the "Bundle Display Position" section of our bundle creation, we'll have two injection pages to set up, as shown below:
We must choose the position for each line (either Insert Below or Insert Above) and click the green button to open the Dynamic Selector in a new tab. An example page will open, where we can hover and select any HTML element relative to which we want to position our bundle Offer.
The ID or Class is then automatically extracted and appears at the top. When we are satisfied with our selection, we click Confirm Selection inside the green banner at the top of the page. If you want to select, for example, the top section with the product pictures and product description, we recommend you use one of the selectable elements and use the Select Parent Element button to move up to the container with both columns.
Once you click Confirm Selection, you will automatically be redirected back to the bundle creation section of the app. The ID of the HTML element you chose will be automatically introduced in the section “Custom Element Selector” as shown below:
The only thing left to do is click Save&Launch to activate your bundle offer. You’ll also be able to check the live bundle on the pages selected and confirm if it’s working as expected and if it looks as it did in the preview. This is a simple verification, and if you encounter any problems please don’t hesitate to contact support to assist you with the bundle injection and creation process.
Was this article helpful? If you didn’t find what you are looking or need any extra help setting up, for please don’t hesitate to contact our support team.