Customizing your timer design is really simple. Just customize your timer using the options on the left menu and you can see your timer design update live in the preview section.




Features available:

Timer Style: Choose between two fully-responsive timer designs. We're working on adding more designs too.


Colors: You can easily customize your font, progress bar and timer digit colors so the timer will perfectly match your store


Text: Choose a font from our large selection of Google Fonts.


Alignment: Choose the alignment for all elements of the timer to perfect the display of your timer in your store.


Compatibility: Timer plus is designed and tested with most of the popular Shopify templates. We have followed development best practices carefully to make it compatible with most of the designs and screen sizes. If you find any incompatibility with your template, contact us and we will sort it out as soon as possible.


How to customize your timer design

Step 1: Choose your timer style

            Clean Timer - A modern, minimalistic timer that will compliment nearly any theme.

            Flip Timer - Time-tested design used by tens of thousands of stores worldwide.

           

Step 2: Setup your timer options

            Select timer combination - Select a combination style for your timer design (Progress bar and timer, timer only, progress bar only)

            Text only message - Choose a pre-made message or customize your own.

            Quantity sold message - Customize this text for when you use the quantity sold message setting on a product timer. You will set up timers later.

            Inventory remaining message- Customize this text for when you use the inventory remaining message setting on a product timer. You will set up timers later.


Step 3: Customize your timer design

            Timer Message settings -  Edit Alignment, Format, Font size and Color.

            Timer Digit - Edit the timer digit's Font size, Color, and Alignment.

            Timer label - Edit the position, Format, Font Size and Color.


Step 4: Customize the countdown text. 

            Using this option, you can customize the timer text Days, Hours, Minutes, Seconds to meet your needs. This is helpful if you're shop is in a language other than English.


You can also add your own CSS to make nearly unlimited customizations to the display of the timer.



Step 5: After customizing your timer, you just need to activate the timers on your products from Product Setting page.



Click on the Product settings button in the top menu



Select one or more products to add a timer to



Edit the timer settings and click the 'Activate' button to add it to the product(s)


Add timer to products in bulk

Select all products or choose multiple products that you would like to add a timer to.

Once you select the products a drop-down will appear. Click on bulk actions >> Set Timer and you can edit and activate a timer on those products.


Custom timer location - The default display position is below the Add to Cart button on the product page. To display the timer in custom location, place the following code on your desired location of the template file which is usually located at Online store > Themes > Edit code > Sections > product-template.liquid.


NOTE: If you don't know how to do this, just email us at support@hektorcommerce.com and we'll do it for you.



<div id="booster-timer-display"></div>


Hope this article helps. If you have any further questions you can create a new support ticket any time.