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

The installation of Also Bought 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 optimize conversion.

However, when a theme has been customized 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-also-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-also-bought-box	

In the side panel preferences, select the Location section:

Then select Product page location:

There you will find the 'Custom location, with a selector' section with the Widget location selector field to enter the selector corresponding to the snippet previously added to your templates:

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 Element selector field which we used in the previous case, this will enable the app in all product templates:

Note: In the above example, the widget will be placed after the element which is selected the Element selector.