My theme has several product templates, will Frequently Bought Together be displayed on all of them?

The installation of Frequently Bought Together can be done with a single click and the process is well optimized and automated to make it a breeze for merchants.

But it brings its own limitations with it. One of the main limitations is themes with multiple product templates.

Our installation process will place the app either on the product.liquid or product-template.liquid file, depending on the theme. These files are common to most themes and the installation process tries to place the widget in the most relevant location to optimise conversion.

However, when a theme has been customised or there are several product templates, either created manually or by a third-party app, the recommendation widget may not display consistently on all templates. In these cases, the app will run a built-in placement algorithm that tries to add the widget to the product page dynamically using some heuristics.

Enabling the app consistently on all product templates can be done in 2 ways.

1) Adding a reference element to product page templates:

The app relies on the existing elements in the product templates as a reference for placing itself. While the installation process creates its own element either in the product.liquid or product-template.liquid file, other product templates will be ignored.

So adding the following snippet to the required position on product templates will enable the app.

<div id="cbb-frequently-bought-box"></div>

Once the snippet has been added to the product templates, we just have to add the reference to it in the app preferences page in case it wasn't configured automatically after installing the app. The selector corresponding to the previously added snippet is the following:

#cbb-frequently-bought-box

In the main dashboard in the Widget Location section, you will find the ' Custom location, with a selector' button with the field to enter the specific selector to make sure the app is properly displayed:

2) Choosing a Common element from all the templates:

Even though there are multiple product templates, if there is a common element with the same class or id in all of them then, it can be configured as a reference element, enabling the app on all the product templates.

In the following example, we detail how to choose a common element shared between multiple product templates:

If the element with class .product-single is available on all the elements and if you want to place the app next to it, then you can configure it in the Widget location selector which is in the Widget Location section by clicking the ' Custom location, with a selector' button:

The widget will be placed in different positions depending on the selected Element.

This will enable the app in all product templates.