✅ Step 1: Open the Hoppy Free Shipping Bar.
1️⃣ Go to Shopify Admin → Apps → Hoppy 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! 🚀