Countdown Timer Announcement bar like Bleame

Countdown Timer Announcement bar like Bleame

robertbarta
Explorer
67 0 15

Hello, I am currently using the Shrine Pro Shopify Theme and was hoping to add a countdown timer bar similar to Bleame's, The theme does not contain one though, so I bought one from the section store, but it's not quite what I am looking for. Can anyone help me with this?

 

For reference, here is Bleame's website: 

https://bleame.com/products/crystal-hair-eraser

 

and here is mine:

https://evagleam.com/

 

timer bar.png

Replies 2 (2)

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to change it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
  #countdown-banner-sections--17182604984475__countdown_bar_YfWenn-wrapper{
        background: linear-gradient(45deg, #3D348B, #3D348B, #9E388B, #DF4F79, #DF4F79) !important;
  }
  .countdown-timer-sections--17182604984475__countdown_bar_YfWenn-timer_KhkBQp{
    align-items: center !important;
  }
 .time-block{
background: white !important;
    color: black !important;
    border-radius: 2px !important;
    
    padding: 5px 8px !important;
    margin: 5px !important;
  }
.time-block__num{
    font-size: 14px !important;
 }
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

robertbarta
Explorer
67 0 15

It's getting pretty close! The gradient isn't displaying, and the dots between the hours/minutes/seconds seem to be slightly off-center. Also, can you hide the days (so it's just hours/minutes/seconds like Bleame's)? Also, here is the color codes for the gradient I am hoping for #5785C8 #B3D9FCEvaGleam · Customize Copy of Don't Edit · Shopify - Google Chrome 6_25_2024 10_32_43 AM.png