There are 2 widgets of Countdown Cart app placed below your Add-to-cart button by default. They are Countdown Timer and Stock Countdown widget. Please follow my instruction below to customize the positions of these widgets.
In this article, I will instruct you how to detect an element on your product page and how to put the widgets below a specific element,
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 and copy the code for customization.
- On your product page, click the right button >> Click Inspect >> You will see the Inspector Window of your Product page
- Click on the icon circled red below in the Inspector Window to inspect an element, in this example, let's detect the Add to Cart button
- Hover to Add to Cart button, its specific snippets will be highlighted. Here you can find Add to Cart button's ID/Class as circled red below. Remember to copy it.
Step 2: Go to Countdown Cart backend >> Access Countdown Timer or Stock Countdown tab >> Click Wanna place it in a custom position
Step 3: Enter the Class/ID found in Step 1 then hit Save and it's done
Install Countdown Cart now to raise the urgency, make customers buy faster and lift up your sales.