The Design & Styling section gives you complete control over the appearance of the Currency Converter on your storefront.

From flag styles and typography to colors, borders, and display preferences, these settings help you create a Currency Converter that feels like a natural part of your store while maintaining a smooth experience for international shoppers.

⚠️ Before You Begin

To access Design & Styling settings:

→ Open Hoppy Currency Converter

→ Complete the onboarding process

→ Open the Design tab

💡 All design changes become visible on the storefront after saving.

🏳️ Flag Customization

This section controls how flags appear throughout the Currency Converter.

Changes apply to both:

• The selected currency display
• The dropdown currency list

🎨 Flag Style

Controls the visual appearance of flags.

Traditional

Displays standard flag images without additional styling.

Best for: Minimal and professional storefronts where you want flags to blend naturally into the design.

Modern

Displays flags with:

• Rounded corners
• Soft shadows
• Subtle borders
• Enhanced visual treatment

Best for: Modern storefronts that want the Currency Converter to stand out as a premium design element.

💡 The selected style applies to every flag displayed by the Currency Converter.

🔘 Flag Theme

Controls the shape of the flags.

Round

Flags appear with softly rounded corners.

Circle

Flags appear inside a circular shape.

Flat

Flags appear with sharp corners and a traditional look.

The selected theme helps determine the overall visual personality of the widget.

🔘 Currency Selector Customization

These settings control the appearance of the main Currency Converter widget.

🎨 Theme

Controls the overall visual style of the Currency Converter container.

Default

A clean and simple appearance that blends naturally into most Shopify themes.

Modern Layer

Creates a layered visual effect behind the widget for additional depth and emphasis.

💡 The Modern Layer effect automatically uses your selected background color.

👀 Display Mode

Controls what information appears inside the Currency Converter.

Show Flag and Currency

Displays both the flag and currency information.

Show Flag Only

Displays only flags.

Show Currency Only

Displays only currency information.

This setting applies to both the selector and dropdown list.

🌓 Color Theme

Controls whether the Currency Converter uses a light or dark appearance.

Light

Uses a light background with darker text.

Dark

Uses a dark background with lighter text.

Automatic

Automatically matches the shopper's system preference.

💡 Automatic mode helps the Currency Converter adapt naturally across different devices and browsing environments.

🔤 Display Only Currency Codes

Controls how currency names appear.

Enabled

Displays short currency codes.

Examples:

• USD
• EUR
• GBP

Disabled

Displays full currency names and codes.

Examples:

• US Dollar (USD)
• Euro (EUR)
• British Pound (GBP)

This can help make the dropdown more compact when supporting many currencies.

🎨 Theme Customization

This section controls the core styling of the Currency Converter.

📦 Border Style

Controls how the widget border is displayed.

Box Shadow

Adds a subtle shadow around the Currency Converter.

Border Line

Adds a visible border around the widget.

No Border

Removes borders and shadows completely.

Each option creates a different visual emphasis depending on your storefront style.

🔤 Font Family

Controls the font used throughout the Currency Converter.

Use Theme Font

Matches your Shopify theme typography automatically.

Google Fonts

Choose from a variety of supported fonts.

Examples include:

• Roboto
• Open Sans
• Montserrat
• Poppins

💡 Using your theme font typically creates the most seamless storefront experience.

🎨 Background Color

Controls the background color of the Currency Converter.

You can:

• Use the color picker
• Enter a Hex color value

Choose a color that complements your storefront while remaining easy to identify.

🖊️ Text Color

Controls the color of text throughout the Currency Converter.

This includes:

• Selected currency
• Dropdown options
• Labels

For best readability, ensure sufficient contrast between the text and background colors.

🖱️ Mouseover Color

Controls the color shown when customers hover over currency options.

This helps customers clearly identify which option they are about to select.

A subtle contrast from the background color usually works best.

🔽 Dropdown Icon Color

Controls the color of the dropdown indicator icon.

Matching this color with your text color often creates the most consistent appearance.

⚠️ Important Notes

Dark Theme Overrides Some Colors

When using:

• Dark Theme
• Automatic Theme (while a shopper uses dark mode)

The Currency Converter may use optimized dark-mode colors instead of your selected background and text colors.

For advanced dark mode customization, use Custom CSS.

Layer Theme Uses Background Color

The Modern Layer theme automatically generates its layered effect using the selected background color.

Changing the background color also changes the layer appearance.

Display Mode Applies Everywhere

Display Mode settings affect:

• The selected currency display
• Dropdown currency options

Both locations always remain synchronized.

Font Changes Apply Globally

The selected font affects all Currency Converter text, including:

• Selected currency
• Dropdown options
• Search results (when applicable)

Need More Customization?

For advanced styling beyond the Design tab, use:

Advanced → Custom CSS

This allows developers to apply fully custom styles to the Currency Converter.

🚀 Final Result

Once configured successfully:

✅ The Currency Converter matches your storefront branding

✅ Flags display in your preferred style and shape

✅ Colors and typography feel consistent with your theme

✅ Currency selection remains clear and easy to use

✅ International shoppers enjoy a more polished experience

✅ The Currency Converter feels like a natural part of your storefront

A well-designed Currency Converter not only looks better—it also helps create a smoother and more trustworthy shopping experience for customers around the world. 🌍

Updated on: 14/07/2026