There are 2 widgets of Countdown Tools that appear below your Add-to-cart button by default. They are Timer countdown and Product countdown. In this article, you will be instructed how to detect an element on your product page and how to put the widgets below that element. 


Demo


There are two ways to change the widgets position: using auto-change option or handicraft.

Solution 1: Go to Boost Convert dashboard >> Timer Countdown  or Product Countdown tab >> Click Wanna place it in a custom position

Setting tabs


Choose widget position


Save Settings


Solution 2: Use the handicraft to create a custom widget position.


Step 1: Use browser inspector to find the ID or Class Name of an element 


The browser inspector is a browser feature that allows you to view specific snippets of a web page element’s HTML and CSS.  You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes as well as copy the code for customization.


On your product page: Right click >> Click Inspect >> You will see the Inspector Window of your Product page


Inspect Element


This is the Inspector Window: Click on the icon in the upper left corner to inspect an element of the page



For example: if you want to detect the Add to Cart button, just hover over it while opening the Inspector Window, the specific snippets of the Add To Cart button will be highlighted. Here you can find Add to Cart button's ID/Class as circled in red as below. Because we need the button's ID and class, here you should copy it to your clipboard for later use. 


Element ID and class


Step 2: Enter the Class/ID found in Step 1 to the box


NOTE:

  • Add "#" (hash) before the ID or "." (dot) before the class before entering it in the box. For example:
    .product-form-product-template

     or 

    #product-details


  • If the element has both ID and Class, please add #ID to the box
  • If the element has only ID or Class, please add #ID or .Class to the box

To open the customization pop-up, kindly go to your store dashboard >> click Wanna place it in a custom position >> then click "Please click here" button as below:



After adding the class/ID there, please hit Confirm button to complete the setting and refresh your product page to check the result.


In some cases, the instruction might not work due to the specialty of your theme, feel free to contact support@boostflow.com, we are happy to make the change for you.


Boostflow team.