Styling Delivery Timer

You are here:
Estimated reading time: 1 min

Style Settings

Styling Delivery Timer is simple. Use the following section to pick colours, font size, spacing, alignment and simple positions:

The position element depicts where the Delivery Timer will be displayed. There are a handful of default locations which are compatible with most Shopify themes. If you find it isn’t outputting exactly where you want it to, you can get more control by inserting the script manually. To do this, you need to be comftoable with editing your theme’s code. Information on how to do this can be found here.

Margin top and bottom provide spacing either side of the timer.

The bottom search box allows for you to select a collection where delivery timer will not be shown. This is great if you have custom products that take longer to ship for example. To do this, simply create a collection in your Shopify store that contains the products you don’t want the timer to show on then come back and select that collection.


Styling the Message

As well as styling the output of the message using the above settings, you can also style the message itself.

Below, we have wrapped the message using bold html tags. <b>…</b>

Delivery Timer supports basic HTML styling tags. If you are hand with CSS, you can also get further control over the message styling.

Delivery Timer also supports emojis! Simply paste an emoji in. We recommend grabbing the emojis from emojipedia.

Was this article helpful?
Dislike 0
Previous: Hide Delivery Timer on certain products
Next: Show Delivery Timer somewhere else on the product page