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

  1. Below the 'Add to cart' button
  2. Below the product description (taking the full width)
  3. Above the "Related" section
  4. Below the "Related" section
  5. At the bottom of the page.

First, we need to find the  Global options in 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 showed 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. Please check the selector for each option:

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

#AddToCart-product

If needed we can make some additional changes in the preferences page.

If you want you can change the title from lowercase to uppercase, in order to do that you can either type in additional styles

{"text-transform":"uppercase"} 

or just write it in capital letters. 

You can also type the exact title size, font type, change the colour etc...

When you change the position of the widget, if the width of the widget is changed, you will probably need to adjust the size of the product box, so the products fit nicer in the widget:

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

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

.product-single

If needed we can make some additional changes in the preferences page, in the Recommendation box options field, so that the widget matches the width of the other elements of the page. Sometimes we will need to change the Maximum Width in order to align the widget with other elements on the page. In this case, we can set 1120:

When you change the position of the widget, if the width of the widget is changed, you will probably need to adjust the size of the product box, so the products fit nicer in the widget:

In order to change the title size and style please follow the instructions in the previous step.

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

To place the widget above the "Related" section, we can use the following manual selector:

.product-page

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 of the other elements of the page and looks better. Please follow the instructions in the previous step changing the Maximum Width, Product box width and Image height.

In order to change the title from lowercase to uppercase you can either type in additional styles: 

{"text-transform":"uppercase"}

 or just write it in capital letters. 

You can also set the exact title size, font type, change the colour and every other style you want to match.

The widget above the "Related" section will look like this:

To place the widget below the "Related" section, we can use the following manual selector:

.product__related

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 of the other elements of the page and looks better. Please follow the instructions in the previous step changing the Maximum Width, Product box width and Image height and title size and style.

You can use the padding to control the empty space between the widget content and its border. 

Also, you can use the margin to control the space between the app widget and other HTML elements on a webpage:

In this case, we added the bottom margin to increase the space between Also Bought and Frequently Bought Together widgets.

For the bottom margin, you can add in the Recommendation box options additional styles

 {"margin-bottom": "60px"}

The widget below the "Related" section will look like this:

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

#shopify-section-product

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 of the other elements of the page and looks better. Please follow the instructions in the previous step changing the Maximum Width, Product box width and Image height and title size and style.

You can use the padding to control the empty space between the widget content and its border. 

Also, you can use the margin to control the space between the app widget and other HTML elements on a webpage:

In this case, we added the top margin to increase the space between Frequently Bought Together and Also Bought widgets.

For the top margin you can add in the Recommendation box options additional styles

{"margin-top": "60px"} 

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