How to place the app widget in a different location in Debut 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 4 most common locations if you’re using the  Debut theme in your store:

  1. Below the 'Add to cart' button.
  2. Below the product description (in the right column).
  3. Below the product description (taking the full width).
  4. At the bottom of the page.

First, we need to find the Global options on the app preferences page. Once there, please tap 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 proper manual selector according to where we want the widget to be located. Next, you will find the target selectors for all the configurations mentioned at the beginning of this article:

To place the widget below the 'Add to cart' button, we can use the following manual selector:

.product-form-product-template

To place the widget below the product description (on the right column), we can use the following manual selector:

.product-single__description

To place the widget below the product description (taking the full width), we can use the following manual selector:

.product-single

To place the widget at the bottom of the page, we can use the following manual selector:

.product-template__container

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

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

The widget below the product description (on the right column) will look like this:

The widget below the product description (taking the full width) will look like this:

The widget at the bottom of the page will look like this:

NOTE: For locations 1 and 2, we might need to edit the Maximum width of the recommendation box as well as the one for the product box, so that the app can fit properly. To do so, let's find the following settings in the preferences page:

  1. In the Recommendation box options, we will need to edit the Maximum width, you can play with the values to find the one you consider better for your store, however we recommend you put as value 530.

  2. In the  Product box options, we will need to edit the Product box width, you can play with the values to find the one you consider better for your store, for this example, we use the value 200.