Skip to main content

How to add custom CSS styles for the Free Shipping Bar?

Learn how to add your own custom CSS to Free Shipping Bar.

Rashmi Verma avatar
Written by Rashmi Verma
Updated over a month ago

✅ Step 1: Open the Hoppy Free Shipping Bar.

1️⃣ Go to Shopify AdminAppsHoppy Free Shipping 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 Free Shipping Bar with the following selector:

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

✅ Step 3: To Add Background Styling

4️⃣ Set a background color for the Free Shipping Bar:

.futureblink-shipping-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-shipping-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 Free Shipping Bar.:

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

  • For links inside the Free Shipping Bar.:

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

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

6️⃣ If the Free Shipping Bar includes a CTA button, style it properly:

.futureblink-shipping-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 Free Shipping Bar has a close button, apply the following style:

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

✅ Step 7: To Style Navigation Arrows

8️⃣ If the Free Shipping Bar has navigation arrows, use these styles:

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

✅ Step 8: To Apply Complete Custom CSS

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


Did this answer your question?