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. 🛍️