How to place the app widget in a different location in Jumpstart 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 are using the Jumpstart 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 locate the Global options on the app preferences page. Once there, 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 copy and paste the correct manual selector according to where we want the widget to be located. Please check the selector for each option:

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

.shopify-product-form

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

.product-description

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

#ProductSection-product-template .product

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

#ProductSection-product-template

When you change the position of the widget, if the width of the widget is changed, you will probably need to adjust the product box width in order for the products to fit better in the widget:

Lastly, don't forget to click on Save and now you are 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: