> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎨 How to Set Custom CSS for Free Shipping Upsell Bars

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**

| Selector | Description |
| ----- | ----- |
| `.futureblink-free-shipping` | Entire Free Shipping Bar container |
| `.futureblink-message` | Progress message text |
| `.futureblink-icon` | Icon displayed with the message |
| `.futureblink-cta-button` | Call-to-action button |
| `.futureblink-price-text` | Highlighted price or progress value |

---

### **Mobile Selectors**

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

| Selector | Description |
| ----- | ----- |
| `.futureblink-free-shipping.mobile .futureblink-message` | Mobile progress message |
| `.futureblink-free-shipping.mobile .futureblink-icon` | Mobile icon |
| `.futureblink-free-shipping.mobile .futureblink-cta-button` | Mobile CTA button |
| `.futureblink-free-shipping.mobile .futureblink-price-text` | Mobile price/progress text |

💡 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. ✨