> ## 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). # 🎨 Currency Converter – Design & Styling 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. 🌍 ---