Manually changing the widget position

In this guide we'll take a look at how to change the position of the widget by adding the widget's div ( <div class="ba-freq-wrapper"></div>) into your theme's product template liquid file. Using this method, where the div is placed will determine the position of the widget on your product page. Here we'll use the free Shopify Debut theme as an example, with all settings on default.

In this article:

Note: This method is theme-dependent and may not work on certain themes. If you encounter trouble using this method, please reach out at support@boosterapps.com and we will be happy to assist if we are able to do so.

Manual adjustment with Debut

1
From your Shopify Admin, go to Online Store > Themes > Edit Code
2
Under Sections find product-template.liquid
3
Copy & paste <div class="ba-freq-wrapper"></div> in the section of the file where you would like the widget to appear

Placing the widget below the Product description

To add the widget below the product description using Debut:

  • In your product-template.liquid file, find the product description output (search for product.description to find it quickly. It is usually around lines 270-280): 

     <div class="product-single__description rte">
          {{ product.description }}
        </div>
  • Add this div <div class="ba-freq-wrapper"></div> just after the code for the product description:

    • Above the ATC buttons

    To add the widget above the Add to Cart buttons using Debut:

  • In your product-template.liquid file, find the product form code (search for capture "form_classes" to find it quickly. It is usually around lines 155-160), which by default begins with this code:

    • {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
  • Add this div <div class="ba-freq-wrapper"></div>  above the capture tag
    {% capture "form_classes" -%}