How to add custom CSS styles for announcement bars? | Hoppy Shopify Apps

✅ Step 1: Open the Hoppy Announcement App

1️⃣ Go to Shopify Admin → Apps → Hoppy Announcement Bar.

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 announcement bar with the following selector:

.futureblink-announcement-bar {
    /* This is the main announcement bar */
}

✅ Step 3: To Add Background Styling

4️⃣ Set a background color for the announcement bar:

.futureblink-announcement-bar {
    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-announcement-bar .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 announcement bar:

.futureblink-announcement-bar p {
    color: whitesmoke;
}

For links inside the announcement bar:

.futureblink-announcement-bar a {
    color: Yellow;
    text-decoration: none;
}

✅ Step 5: To Style the Call-to-Action (CTA) Button

6️⃣ If the announcement bar includes a CTA button, style it properly:

.futureblink-announcement-bar .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 announcement bar has a close button, apply the following style:

.futureblink-announcement-bar .close-btn {
    color: yellow;
    cursor: pointer;
}

✅ Step 7: To Style Navigation Arrows

8️⃣ If the announcement bar has navigation arrows, use these styles:

.futureblink-announcement-bar .arrow {
    color: orange;
}
.futureblink-announcement-bar .button-prev {
    background: white;
}
.futureblink-announcement-bar .button-next {
    background: black;
}

✅ Step 8: To Apply Complete Custom CSS

.futureblink-announcement-bar {
  background: linear-gradient(green,aqua);
}
.futureblink-announcement-bar .title {
  color: white;
  background: transparent;
}
.futureblink-announcement-bar .subheading{
  color: white;
  background: transparent;
}
.futureblink-announcement-bar .cta-button{
  background: black;
  color: white;
}
.futureblink-announcement-bar .close-btn{
  color: black;
}
.futureblink-announcement-bar .arrow{
  color: white;
}
.futureblink-announcement-bar .button-prev{
  background: black;
}
.futureblink-announcement-bar .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 announcement bar now has a custom style to match your brand! 🚀