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.

2) 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.

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 selector corresponding to the snipped previously added to the templates.:

3) 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 diferents positions referer to the selected Element.

This will eable the app in all product templates.