Want your countdown timer or bar to match your store branding perfectly? 🎨

While the app includes extensive design controls, sometimes you need additional flexibility to customize specific styling details. The Custom CSS feature allows you to apply your own CSS rules to countdown timers and bars for advanced visual customization.

This guide walks through everything you need to know about adding and managing Custom CSS for countdown placements.

⚠️ Before You Begin

Before using Custom CSS:

• Make sure you have already created a countdown timer or countdown bar.
• Ensure you have access to the Design tab inside the countdown editor.
• Have a basic understanding of CSS or access to a developer who can assist.

⚠️ Important:

Custom CSS is not available for Checkout Page countdowns.

Because Shopify Checkout uses a secure UI Extension framework, external CSS injection is restricted by Shopify.

Custom CSS is fully supported on:

• Product Pages
• Landing Pages
• Top Bars
• Bottom Bars
• Cart Pages
• Cart Drawers
• Email Placements

🛠️ Step 1 — Open the Design Tab

Open the countdown timer or bar you would like to customize.

Then:

➡️ Click the Design tab.

Scroll down until you locate the Custom CSS section.

💡 Custom CSS works on top of your existing design settings, templates, colors, and typography selections.

🎨 Step 2 — Open the Custom CSS Section

Inside the Design tab:

➡️ Locate the Custom CSS card.

Within this section you'll find:

• A CSS editor
• A starter CSS template
• An Apply button

The starter template includes commonly used selectors, making it easier to begin customizing the countdown without needing to identify class names manually.

✍️ Step 3 — Add Your Custom CSS

The editor includes several ready-to-use selectors.

Available Selectors

Example CSS

To make the title bold and change its color:

.futureblink-countdown-timer .title {
font-weight: 700;
color: #ff6600;
}

💡 You can also add your own selectors, media queries, animations, and additional CSS rules as needed.

✅ Step 4 — Apply Your CSS

After entering your CSS:

➡️ Click Apply.

Once activated, the Apply button changes to Reset, indicating that your custom styles are active.

What Happens Automatically

The app automatically performs several actions behind the scenes:

• Injects your CSS into the storefront.
• Adds !important priority where necessary.
• Scopes styles to the current countdown configuration.
• Prevents styling conflicts with other countdowns.

This helps ensure your CSS works consistently across your storefront.

💾 Step 5 — Save and Publish

After applying your CSS:

➡️ Click Save.

➡️ Click Publish.

⚠️ Saving alone does not update the storefront.

The countdown must also be published before customers can see the changes.

👀 Step 6 — Verify the Changes

After publishing:

➡️ Open your storefront.

➡️ Navigate to the page where the countdown appears.

➡️ Refresh the page.

If the updated styles do not appear immediately, perform a hard refresh:

Windows

Ctrl + Shift + R

Mac

Cmd + Shift + R

If further adjustments are needed:

➡️ Return to the editor.

➡️ Update the CSS.

➡️ Click Apply, Save, and Publish again.

⚠️ Important Notes

Checkout Page Limitation

Custom CSS is unavailable on Checkout Page countdowns because Shopify's Checkout UI Extensions operate within a secure environment that restricts custom CSS injection.

Automatic !important Handling

The app automatically adds !important priority to CSS declarations when rendering styles on the storefront.

If !important is already present, the app avoids applying it twice.

Scoped Styling

Every countdown receives its own isolated styling scope.

This means:

✅ Different countdowns can have different designs.

✅ Styles remain isolated to the selected countdown.

✅ Other page elements remain unaffected.

Reset Option

Clicking Reset only removes Custom CSS.

It does not affect:

• Templates
• Colors
• Typography
• Design settings
• Countdown configuration

View Guide

The Custom CSS section also includes a View Guide link that provides additional CSS references when needed.

❓ Troubleshooting

If your styles are not appearing correctly:

➡️ Verify that Apply has been clicked.

➡️ Confirm the countdown has been Saved and Published.

➡️ Check that selectors exactly match the provided class names.

➡️ Test using an Incognito or Private browser window.

➡️ Perform a hard refresh to clear cached styles.

🎉 Final Result

✅ Your countdown timer or bar reflects your brand's styling requirements.

✅ Theme styling conflicts are minimized through automatic CSS priority handling.

✅ Individual countdowns can be styled independently.

✅ Custom styles remain isolated without affecting other storefront elements.

Custom CSS provides a flexible way to fine-tune countdown designs while keeping the rest of your setup simple and easy to manage. 🚀

Updated on: 14/07/2026