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. 🎨

Updated on: 14/07/2026