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 Position section of the app menu, you will find the “Custom position, with a selector” option. There, you can enter, in a field, a specific CSS selector to ensure the widget is correctly displayed in your store:

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 the ".product-single" class is present across your product pages and you want to place the widget near it, you can do so by going to the Position section in the app menu. Select the “Custom position, with a selector” option and enter .product-single as the widget selector:

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

This will enable the app in all product templates.