> ## 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 Hoppy Currency Converter

The Custom CSS feature allows you to further customize the appearance of the Currency Converter beyond the standard Design settings.

Whether you want to adjust colors, spacing, borders, shadows, or match the widget to a heavily customized storefront, Custom CSS gives you additional styling flexibility without editing your Shopify theme files.

This guide walks through how to safely add and manage custom CSS for the Currency Converter.

---

# **⚠️ Before You Begin**

Before using Custom CSS, make sure:

* Hoppy Currency Converter is installed and active  
* The App Embed is enabled  
* The onboarding process has been completed  
* You have a clear idea of the styling changes you'd like to make

⚠️ Incorrect CSS may affect the appearance of the widget. Always test changes carefully before leaving them live on your storefront.

---

# **✅ Step 1: Open the Custom CSS Settings**

Open the **Hoppy Currency Converter** app from your Shopify Admin.

Then:

→ Click **Advanced**

→ Scroll to the **Expert Settings** section

→ Locate the **Custom CSS** field

This is where all custom styling rules should be added.

---

# **✅ Step 2: Understand the Available CSS Classes**

To customize the Currency Converter, you'll need to target the appropriate CSS classes.

These classes identify different parts of the widget and allow you to style them individually.

---

## **🖥️ Desktop Currency Converter**

.futureblink\_currency\_desktop

### **Use For**

* Background colors  
* Borders  
* Shadows  
* Padding  
* Margins

This class targets the Currency Converter displayed on desktop devices.

---

## **📱 Mobile Currency Converter**

.futureblink\_currency\_mobile

### **Use For**

* Mobile-specific spacing  
* Mobile-specific styling  
* Mobile layout adjustments

This class targets the Currency Converter displayed on mobile devices.

---

## **📋 Currency Dropdown**

.futureblink-currency-dropdown

### **Use For**

* Dropdown styling  
* Borders  
* Border radius  
* Shadows  
* Background colors

This class controls the list of available currencies displayed after clicking the converter.

---

## **🔘 Currency Switcher**

.currency-switcher

### **Use For**

* Button styling  
* Selected currency appearance  
* Borders  
* Spacing

This class controls the visible currency selector customers interact with.

---

## **📄 Dropdown Options**

.option

### **Use For**

* Individual currency rows  
* Font sizing  
* Padding  
* Hover effects

This class targets each currency option inside the dropdown.

---

# **✅ Step 3: Create Your CSS Rules**

CSS uses a simple structure:

selector {  
  property: value;  
}

### **Example Structure**

* Selector → What you want to style  
* Property → What you want to change  
* Value → The new appearance

---

# **🎨 Example: Change Background Color**

.futureblink\_currency\_desktop {  
  background-color: \#f8f9fa;  
}

This changes the desktop Currency Converter background color.

---

# **🔲 Example: Add Borders & Shadows**

.futureblink\_currency\_desktop {  
  border: 1px solid \#ddd;  
  border-radius: 8px;  
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  
}

This creates a cleaner card-style appearance.

---

# **📋 Example: Style the Currency Dropdown**

.futureblink-currency-dropdown {  
  border-radius: 6px;  
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);  
}

This adds rounded corners and a stronger dropdown shadow.

---

# **📱 Example: Adjust Mobile Spacing**

.futureblink\_currency\_mobile {  
  padding: 12px 16px;  
  margin-top: 8px;  
}

This increases spacing around the mobile widget.

---

# **⚠️ If Styles Are Not Applying**

Sometimes the default widget styling may override your custom CSS.

If that happens, add:

\!important

to the CSS declaration.

### **Example**

.futureblink\_currency\_desktop {  
  background-color: white \!important;  
  border-radius: 10px \!important;  
}

💡 Using `!important` is recommended whenever a custom style is not being applied successfully.

---

# **✅ Step 4: Save Your Changes**

After adding your CSS:

→ Click **Save**

The styling changes are applied immediately to the Currency Converter widget.

---

# **✅ Step 5: Test the Widget**

Visit your storefront and verify the changes.

Make sure to test:

* Desktop devices  
* Mobile devices  
* Currency dropdown behavior  
* Different storefront pages

This helps ensure the styling works consistently across your store.

---

# **🔍 Need More CSS Classes?**

If you'd like to customize additional parts of the Currency Converter:

1. Open your storefront  
2. Right-click the Currency Converter  
3. Click **Inspect**  
4. Review the HTML structure  
5. Locate additional class names

These classes can then be used inside the Custom CSS field.

---

# **⚠️ Important Notes**

### **Changes Go Live Immediately**

There is no draft mode for Custom CSS.

Any changes become visible on the storefront as soon as you save them.

---

### **Custom CSS Overrides Design Settings**

If a styling rule exists in both:

* Design Settings  
* Custom CSS

The Custom CSS version will take priority.

---

### **Desktop & Mobile May Require Separate Styling**

Changes made to desktop classes do not automatically affect mobile classes.

For the best results, review both versions separately.

---

### **Theme Updates May Affect Custom CSS**

Major Shopify theme updates may change the storefront structure.

If that happens, some CSS rules may need to be adjusted.

---

# **🎉 Final Result**

Once configured successfully:

✅ The Currency Converter matches your storefront branding

✅ Colors, spacing, and borders can be customized

✅ Desktop and mobile layouts can be styled independently

✅ Advanced visual customizations become possible

✅ Styling can be adjusted without editing Shopify theme files

Using Custom CSS gives you additional control over the appearance of the Currency Converter and helps create a more seamless storefront experience. 🎨

---