How to place the app widget in a different location in Testament 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  Testament 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 correct 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:
#AddToCartForm

Most of the time, when we select this location, we will need to make the product boxes smaller so that the widget can look better on the page. 

To do so, let's go to the preferences page and in the  Product box options field, please edit the Product box width and Image height to the following values or the ones you consider appropriate: 

We may also need to adjust the  Product name minimum height in the Product name and description options so that the "add to cart" buttons can look aligned, you can test with some values until you find the one that works better for you:

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

To place the widget below the product description  (in the right column), we can use the following manual selector:
#product-description
We may need to make the product boxes smaller so that the widget can look better on the page. To do so, please follow the steps previously mentioned, as if placing the app below the add to cart button. 
The widget below the product description  (in the right column), will look like this:

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

We will need to make some additional changes in the preferences page in the  Recommendation box options field so that the widget can match the width of the other elements of the page and to configure the border to match it with the one of the product description. To do so, please enter the following CSS styles in the Additional Styles box as shown below:

{"width":"auto", "margin-top":"40px","margin-left":"1%","margin-right":"1%","border":"7px double #f0f0f0","padding-left":"30px","padding-right":"30px"}

We also need to leave the Maximum width without any value:

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

To place the widget at the bottom of the page, we can use the following manual selector:
#shopify-section-product-template

We may also need to make some additional changes in the preferences page in the  Recommendation box options field so that the widget can match the width and style of the other elements of the page. Please follow the instructions in the previous step changing the Maximum Width and additional styles.

Don't forget to click on  Save and now you're all set. 

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