How to place the app widget in a different location in Fashionopolism 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 Fashionopolism theme in your store:

  1. Below the 'Add to cart' button.
  2. Below the product description (in the right column).
  3. Below the "You also Viewed" section  
  4. 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 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, we can use the following manual selector:

#AddToCartForm

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

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 that the products fit better in the widget:

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 etc:

You can also add a border at the bottom of the widget:

For the bottom border you can type in the box additional styles: {"border-bottom": "1px solid #E5E5E5"}

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

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

#product-description
If needed we can make some additional changes in the preferences page.

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 better in the widget:

If you want 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. Also, you can also type the exact title size, font type etc:
You can also add a  border on the top of the widget:
For the  top border you can add in the box additional styles: {"border-top": "1px solid #E5E5E5"}

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

To place the widget below the "You also Viewed" section, we can use the following manual selector:

#recently-viewed-products

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

You can also type the exact title size, font type etc:

If you want, you can also add a top and bottom border, just type in the additional styles: {"border-top": "1px solid #E5E5E5", "border-bottom": "1px solid #E5E5E5"}:

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 delete the values and leave it empty for unlimited width:

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 that the products fit better in the widget:

The widget below the "You also Viewed" 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-template

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

You can change the size of the title, font type etc:

If you want, you can also add a top and bottom border, just type in the additional styles: {"border-top": "1px solid #E5E5E5", "border-bottom": "1px solid #E5E5E5"}:

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 delete the values and leave it empty for unlimited width:

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 that the products fit better in the widget:

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