How do you set up a currency converter in the Currency Converter app?
Learn to add and display currency options for visitors.
✅ Step 1: Open the Hoppy Currency Converter app
1️⃣ From your Shopify admin, open the Hoppy Currency Converter.
2️⃣ Then, in the Application State:
🔹 Enable the app status by clicking on 'Turn On '. It will show Active.
🔹 Click on 'Enable on Theme Editor' to activate the Currency Converter app
3️⃣ Locate 'Hoppy Currency Converter' in the left-side panel, and click on 'Settings'.
✅ Step 2: Configure General Settings
4️⃣ Under the General tab-
- Select Currencies🌐: Use the search dropdown to choose the currencies you want to offer on your site.
- Auto Currency Switch🔄: Toggle this on to automatically display prices in the visitor's local currency based on their
location.
- Restrict Auto Currency Switch🚫: Enable this if you want to limit automatic switching to specific regions.
- Show Currency Code💲: Choose whether to display the currency code alongside prices (e.g., USD 9.99) or not (e.g.,
$9.99).
✅ Step 3: Customize Design for Currency Converter
5️⃣ Navigate to the Design tab.
- Under Flag Customization🏳️ :
- Theme🎭: Select the flag style—Round, Circle, or Flat.
- Under Select Customization🧩 :
- Choose🖌️ between the Default or Modern Layer designs.
- Under Display Modes🖼️ :
- Show Flag🏳️ and Currency💱: Display both the flag and currency code.
- Show Flag Only🏳️: Display only the flag.
- Show Currency Only💱: Display only the currency code.
- Additional Options🌙 :
- Dark Mode🌑: Toggle dark mode for the converter.
- Display Only Currency Codes🔢: Choose to display only currency codes without symbols.
6️⃣ For Styling of the Currency converter - Customize border style, background color, text color, and mouseover color to
match your store's theme.
✅ Step 4: Set Display Preferences
7️⃣ Navigate to the Display tab.
- Under Desktop Position🖥️ :
- Position Style📍: Choose from Floating, Header, or Custom Position.
- Display Position📌 : Select the position on the screen—Top Right, Top Left, Bottom Right, or Bottom Left.
- Under Mobile Position📱 :
- Position Style📍: Choose from Floating, Header, or Custom Position.
- Display Position📌: Select the position on the screen—Top Right, Top Left, Bottom Right, or Bottom Left.
- Additional Display Options🧩 :
- Show Original Price on Mouse Over🖱️: Enable this to display the original price when hovering over the converted
price.
- Custom Dropdown Currency List Placement🔽 : Toggle this to customize the placement of the currency dropdown list.
- Currency Selector Box🧰 : Choose to show the currency selector on desktop and/or mobile devices.
✅ Step 5: Save and Apply Changes
8️⃣ After configuring all settings, click Save to apply the changes.
9️⃣ Visit your storefront to ensure the currency converter appears and functions as intended.
✅ Step 6: Additional Settings In Currency Converter
🔟 In the left side panel, you'll find additional options under the 'Hoppy ACurrency Converter' heading: 'Advanced'.
🔹 The 'Advanced' settings in the Hoppy Currency Converter app give you more control over how the currency converter
behaves, looks, and integrates with your Shopify store.
🔹 To convert the currency properly , custom selectors need to be added in the advanced page
🔹 To find the custom price selectors from the theme, Right-click on the price storefront site and click on Inspect
🔹 Find the price and copy the class that has the price. For example, in this screenshot, the price has the class name of
“price-item”
🔹 Paste it in the custom price selectors in the advanced page, starting with a dot (.) because it is a class name
🎉 All set! Your Hoppy Currency Converter is live and ready to enhance your customers' shopping experience. 🛍️
