fbpx

Show Delivery Timer in a Top Bar

You are here:
Estimated reading time: 2 min

Want to Show Delivery Timer in a Top Bar? Here is how…

There are 3 fundamental parts to do this. The first is adding the simple snippet to your theme.liquid. The second is adding the CSS to your theme.scss.liquid. The 3rd is styling the widget so it works well with the top bar.

Step 1 – Add snippet to your theme.liquid

Under your Shopify Admin, navigate to Online Store > Themes > “Actions Edit Code

Next, you need to open your “theme.liquid” and insert the following code just above the body tag like pictured

<div id="delivery-topbar">
<div id="delivery_timer_wrapper"></div>
</div>

Step 2 – Add CSS

Next, you just need to add the below code to your “theme.scss.liquid” (Same as above but this lives under the “Assets” section). This will style the top bar we just created. We suggest scrolling all the way to the bottom and pasting it in there.

 #delivery-topbar{
      background: #458B00;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      color: #ffffff;
      display: inline-block;
      margin-bottom: 0;
      text-align: center;
    }
    #delivery-topbar p{
      padding: 5px 0;
      margin: 0;
    }
#delivery_timer_wrapper {
      text-transform: uppercase;
    }

Here is how that should look:

A couple of notes. If you look at the second line you pasted, you will see it says “background: #458B00”. The 458B00 is what is called a HEX code and this is a shade of green. If you want a different color bar, simply replace this code with the relevant HEX code. For example if we change it to “background: #000000”, the bar will be black. To find a HEX code for any color, use this tool.

 

Step 3 – Change Delivery Timer Styles

The default styling for Delivery Timer is for a white background and to be displayed on the product page. If you have implemented the above, the last part is simply to style the Timer so it will work well with top bar.

A screenshot below displays the optimal settings.

 

The font colour #ffffff is “white” meaning it will contract well against the background color we set in Step 2. The countdown font is #d1f7ff which is light blue/green, this again contrasts well but sets it apart from the rest of the white text. The Background colour needs to be empty here as we have declared it already in Step 2 above. We have 0 border with no colour and the text is aligned Center.

If all is well, it should look something like below:

Was this article helpful?
Dislike 0
Views: 77
Previous:
Next:
Fast-Track Your Shopify Store.Get our FREE Ignite Guide 🔥 on what you can do right now.

Get the #1 Upsell App which has generated over $100m 💰 in Upsells!   Get App 🚀