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

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

Updated on: 14/07/2026