Skip to main content

How to add custom CSS styles for the Countdown Timer?

Sushant Shekhar avatar
Written by Sushant Shekhar
Updated this week

Learn how to add your own custom CSS to the Countdown Timer.

✅ Step 1: Open the Hoppy Countdown Timer app.

1️⃣ Go to Shopify Admin → Apps → Hoppy Countdown Timer app.

2️⃣ Navigate to the Design tab and scroll down to locate the Custom CSS box.

✅ Step 2: To Create the Boilerplate (Base Structure)

3️⃣ Start by targeting the Shopify Countdown timer with the following selector:

.futureblink-countdown-timer { /* This is the main trust badge */ }

✅ Step 3: To Add Background Styling

4️⃣ Set a background color for the Countdown timer:

.futureblink-countdown-timer { background: Purple; }

  • You can replace Purple with any color based on user preferences.

✅ Step 4: To Customize Font, Size & Text Color

5️⃣ To ensure the text looks clean and readable, apply the following styles:

.futureblink-countdown-timer .title { color: white; font-size: 16px; font-family: 'Arial', sans-serif; font-weight: bold; text-align: center; }

  • Modify the color, font-size, and font-family values to match your brand.

  • For paragraph text inside the countdown timer:

    .futureblink-countdown-timer p { color: whitesmoke; }

  • For links inside the countdown timer:

    .futureblink-countdown-timer a { color: Yellow; text-decoration: none; }

✅ Step 5: To Style the Call-to-Action (CTA) Button

6️⃣ If the countdown timer includes a CTA button, style it properly:

.futureblink-countdown-timer .cta-button { background: green; color: yellow; font-size: 14px; font-weight: bold; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: inline-block; }

✅ Step 6: To Style the Close Button

7️⃣ If the countdown timer has a close button, apply the following style:

.futureblink-countdown-timer .close-btn { color: yellow; cursor: pointer; }

✅ Step 7: To Style Navigation Arrows

8️⃣ If the countdown timer has navigation arrows, use these styles:

.futureblink-countdown-timer .arrow { color: orange; } .futureblink-countdown-timer .button-prev { background: white; } .futureblink-countdown-timer .button-next { background: black; }

✅ Step 8: To Apply Complete Custom CSS

.futureblink-countdown-timer { background: linear-gradient(green,aqua); } .futureblink-countdown-timer .title { color: white; background: transparent; } .futureblink-countdown-timer .subheading{ color: white; background: transparent; } .futureblink-countdown-timer .cta-button{ background: black; color: white; } .futureblink-countdown-timer .close-btn{ color: black; } .futureblink-countdown-timer .arrow{ color: white; } .futureblink-countdown-timer .button-prev{ background: black; } .futureblink-countdown-timer .button-next{ background :black; }

✅ Step 9: Save & Publish

9️⃣ Click Apply and then Save to confirm your changes.

🔟 Refresh your store to check how it looks!

🎉 That’s it! Your Countdown Timer now has a custom style to match your brand! 🚀

Did this answer your question?