Want your Free Shipping Bar to match your store's branding perfectly? 🎨

While the Design tab includes extensive styling controls, Custom CSS provides additional flexibility for advanced visual customization.

Whether you're adjusting typography, refining spacing, adding animations, creating mobile-specific layouts, or resolving theme-specific styling conflicts, Custom CSS gives you greater control over how your Free Shipping Bar appears on the storefront.

⚠️ Before You Begin

Before using Custom CSS:

• Make sure you have already created a Free Shipping Upsell setup.
• Ensure you have access to the Design tab.
• Have a basic understanding of CSS or access to a developer.

⚠️ Important:

Custom CSS is available on all supported placement types except Checkout Page placements.

Supported placements include:

• Product Page
• Cart Page
• Cart Drawer
• Banner (Top and Bottom)

🛠️ Step 1 — Open the Design Tab

Open the Hoppy Free Shipping app and navigate to the Free Shipping Upsell setup you want to customize.

Then:

➡️ Click the Design tab.

Scroll down until you locate the Custom CSS section.

This section is typically found below the Typography, Progress Bar, Button, and Upsell configuration settings.

🎨 Step 2 — Open the Custom CSS Editor

Inside the Custom CSS section you'll find:

• A CSS editor
• A View Guide button
• An Apply button
• A starter CSS template

The template contains commonly used selectors that can be customized without needing to inspect storefront elements manually.

🎯 Step 3 — Understand the Available Selectors

The starter template includes several selectors that target different Free Shipping Bar elements.

Available Selectors

Mobile Selectors

For mobile-specific styling, use the .mobile variation.

💡 You only need to customize the selectors relevant to your design requirements.

✍️ Step 4 — Add Your Custom CSS

Enter your CSS rules inside the editor.

Example 1 — Customize the Progress Message

.futureblink-free-shipping .futureblink-message {

font-size: 18px;

color: #ff6600;

}

Example 2 — Customize the CTA Button

.futureblink-free-shipping .futureblink-cta-button {

background-color: #000000;

color: #ffffff;

border-radius: 20px;

}

Example 3 — Mobile-Specific Styling

.futureblink-free-shipping.mobile .futureblink-message {

font-size: 14px;

}

💡 Start with small styling changes first, then expand your CSS as needed.

✅ Step 5 — Apply Your CSS

After entering your CSS:

➡️ Click Apply.

The preview updates automatically so you can immediately review the styling changes.

If you want to remove your custom styling:

➡️ Click Reset.

This restores the default template and disables the Custom CSS.

👀 Step 6 — Review the Preview

After applying your CSS:

➡️ Review the preview inside the app.

Verify that:

• Text displays correctly.
• Buttons appear as expected.
• Icons remain aligned.
• Colors and spacing match your branding.

If adjustments are needed:

➡️ Update the CSS.

➡️ Click Apply again.

The preview refreshes automatically after each change.

💾 Step 7 — Save and Publish

Once you're satisfied with the design:

➡️ Click Save.

➡️ Click Publish.

⚠️ Saving alone does not update the storefront.

The Free Shipping Upsell setup must also be published before customers can see the changes.

⚠️ Important Notes

Automatic \!important Handling

When styles are rendered on the storefront, the app automatically adds !important priority to CSS declarations.

This helps ensure your custom styles take precedence over theme styling.

If Styles Are Not Appearing

In rare cases where theme styles remain dominant, you can manually add !important inside the editor.

Example:

.futureblink-free-shipping .futureblink-message {

font-size: 18px \!important;

color: \#ff6600 \!important;

}

Automatic Mobile Handling

Any selector using the .mobile variation is automatically wrapped inside a mobile media query when rendered on the storefront.

You do not need to manually create responsive breakpoints for these selectors.

Checkout Page Limitation

Custom CSS is not available for Checkout Page placements because Shopify restricts custom CSS injection within Checkout environments.

CSS Validation

The editor does not validate CSS syntax.

If a style is not applying correctly:

➡️ Verify selector names.

➡️ Check braces and semicolons.

➡️ Review the CSS for syntax errors.

❓ Troubleshooting

If your styles are not appearing correctly:

➡️ Confirm that Apply has been clicked.

➡️ Verify the setup has been Saved and Published.

➡️ Check that selector names exactly match the provided template.

➡️ Test in an Incognito or Private browser window.

➡️ Refresh the storefront to clear cached styles.

🎉 Final Result

✅ Your Free Shipping Bar can be customized beyond the standard Design settings.

✅ Desktop and mobile experiences can be styled independently.

✅ Custom typography, spacing, colors, and animations are fully supported.

✅ The Free Shipping Bar can be aligned more closely with your store's branding.

Custom CSS provides additional flexibility when the built-in design controls aren't enough, helping create a more polished and consistent storefront experience. ✨

Updated on: 11/06/2026