> ## 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 Announcement Bar

Want complete control over how your announcement bar looks? 🎨

While the built-in design settings cover most customization needs, the **Custom CSS** feature allows you to fine-tune styling beyond the standard options.

This is useful for merchants who want to match their brand guidelines precisely, adjust spacing, customize typography, or resolve theme-specific styling conflicts.

---

# **⚠️ Before You Begin**

Before using Custom CSS:

* Make sure your announcement bar has already been created.  
* Have a basic understanding of CSS or access to a developer.  
* Understand that Custom CSS can override standard design settings.

ℹ️ Most merchants never need Custom CSS. Use it only when the built-in design options cannot achieve the desired appearance.

---

# **🛠️ Step 1 — Open the Design Tab**

Open the **Hoppy Announcement Bar** app and navigate to the announcement bar you want to customize.

Then:

➡️ Click the **Design** tab.

Scroll down until you locate the **Custom CSS** section.

---

# **🎨 Step 2 — Enable Custom CSS**

Inside the **Custom CSS** section:

➡️ Click **Apply**.

Once enabled, a CSS editor will appear containing a pre-configured CSS skeleton.

This skeleton includes all supported selectors, making it easier to target different announcement bar elements without needing to identify the class names manually.

---

# **✍️ Step 3 — Add Your Custom CSS**

The editor provides ready-made selectors for the main announcement bar elements.

### **Available Selectors**

| Selector | Description |
| ----- | ----- |
| `.futureblink-announcement-bar` | Entire announcement bar container |
| `.futureblink-announcement-bar .title` | Main title text |
| `.futureblink-announcement-bar .subheading` | Subheading text |
| `.futureblink-announcement-bar .cta-button` | Call-to-action button |
| `.futureblink-announcement-bar .close-btn` | Close icon |
| `.futureblink-announcement-bar .arrow` | Navigation arrows |
| `.futureblink-announcement-bar .button-prev` | Previous slide button |
| `.futureblink-announcement-bar .button-next` | Next slide button |

### **Mobile-Specific Selectors**

To target mobile devices specifically, use the `.mobile` variation.

Examples:

* `.futureblink-announcement-bar.mobile .title`  
* `.futureblink-announcement-bar.mobile .cta-button`  
* `.futureblink-announcement-bar.mobile .close-btn`

---

### **Example CSS**

To make the title uppercase with additional spacing:

`.futureblink-announcement-bar .title {`  
  `text-transform: uppercase;`  
  `letter-spacing: 2px;`  
`}`

To make the CTA button full width on mobile:

`.futureblink-announcement-bar.mobile .cta-button {`  
  `width: 100%;`  
`}`

💡 You can use any valid CSS properties within the provided selectors.

---

# **👀 Step 4 — Preview Your Changes**

After entering your CSS:

➡️ Click **Apply**.

The live preview updates automatically so you can immediately review your changes.

If adjustments are needed:

➡️ Edit the CSS directly inside the editor.

➡️ Review the updated preview.

---

# **⚙️ How Custom CSS Works**

The app automatically applies additional processing to help ensure your styling works correctly.

### **Automatic \!important Injection**

All CSS declarations automatically receive `!important` priority on the storefront to help prevent theme styles from overriding your changes.

### **Automatic Mobile Handling**

Selectors using the `.mobile` variation are automatically wrapped inside mobile media queries when rendered on your storefront.

### **Design Override Priority**

Custom CSS generally takes precedence over standard design settings configured elsewhere in the app.

---

# **💾 Step 5 — Save and Publish**

Once you're satisfied with the styling:

➡️ Click **Save**.

➡️ Click **Publish**.

⚠️ Saving alone does not update your storefront.

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

---

# **🔄 Reset Custom CSS**

If you'd like to return to the default design settings:

➡️ Open the **Custom CSS** section.

➡️ Click **Reset**.

This removes your custom CSS and restores control back to the standard design settings.

---

# **💡 Helpful Tips**

### **Start Small**

Make one change at a time so it's easier to identify what each CSS rule affects.

### **Use the Live Preview**

Always review changes in the preview before publishing.

### **Test Mobile Layouts**

Even if your CSS looks correct on desktop, verify the appearance on mobile devices as well.

### **Keep a Backup**

For larger CSS customizations, consider keeping a copy of your code outside the app.

---

# **❓ Troubleshooting**

If your CSS isn't applying as expected:

➡️ Verify that **Apply** has been enabled.

➡️ Confirm the announcement bar has been **Saved** and **Published**.

➡️ Double-check that selector names match the provided class names exactly.

➡️ Test in an Incognito window to eliminate browser caching issues.

For advanced styling requirements, consider working with a Shopify developer or your theme support team.

---

# **🎉 Final Result**

✅ Your announcement bar uses fully customized styling.

✅ Theme conflicts are minimized through automatic CSS priority handling.

✅ Mobile and desktop layouts can be styled independently.

✅ The announcement bar can be tailored to match your brand's visual identity more precisely.

Custom CSS provides maximum flexibility when the standard design settings aren't enough, helping create a more polished and consistent storefront experience. 🚀