How to add custom CSS styles for the Countdown Timer?

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! 🚀