> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎨 How to Set Custom CSS for Countdown Timers & Bars

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**

| Selector | Description |
| ----- | ----- |
| `.futureblink-countdown-timer` | Entire countdown container |
| `.futureblink-countdown-timer .title` | Main title text |
| `.futureblink-countdown-timer .subheading` | Subheading text |
| `.futureblink-countdown-timer .cta-button` | Call-to-action button |
| `.futureblink-countdown-timer .close-btn` | Close icon |

---

### **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. 🚀