How to place the app widget in a different location using Narrative theme

You can easily change the position of the Also Bought widget in the product pages.

In this article, we will explain the procedure to place the widget in the 3 most common locations if you are using the Narrative theme in your store

  1. Below the 'Add to cart' button and product description.
  2. At the bottom of the page (before the additional product pictures).
  3. At the bottom of the page (after the additional product pictures).

First, we need to locate Global options in the app preferences page. Once there, please click on Advanced options and then on Select the recommendation box location.

In the next page, you will find the option to Use a CSS selector, as shown below:

What we need to do here is to copy and paste the correct manual selector according to where we want the widget to be located. Please check below the selector for each option:

To place the widget below the 'Add to cart' button and product descriptionwe can use the following manual selector:

.product__content-main

To place the widget at the bottom of the page (before the additional product pictures), we can use the following manual selector:

.product__content

To place the widget  at the bottom of the page (after the additional product pictures), we can use the following manual selector:

.product__subimage-list

Lastly, don't forget to click on Save and now you are all set. 

The widget below the 'Add to cart' button and product description will look like this:

 The widget at the bottom of the page (before the additional product pictures), will look like this:

The widget at the bottom of the page (after the additional product pictures), will look like this: