> ## 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). # 📍 How to Set a Custom Position for the Currency Converter The Custom Position feature allows you to place the Currency Converter exactly where you want it on your storefront. Instead of using the default floating or header positions, you can attach the Currency Converter to a specific element within your Shopify theme using a CSS selector. This gives you greater flexibility and helps the Currency Converter blend naturally into your store's design. 🎯 --- # **⚠️ Before You Begin** Before setting a custom position, make sure: * Hoppy Currency Converter is installed and configured * The App Embed is enabled * Onboarding has been completed * You know where you would like the Currency Converter to appear 💡 Common locations include navigation bars, headers, sidebars, utility menus, and custom storefront sections. --- # **✅ Step 1: Open Display Settings** Open the **Hoppy Currency Converter** app from your Shopify Admin. Then: → Go to **Settings** → Click **Display** Locate either: * Desktop Position * Mobile Position You can configure custom positioning separately for desktop and mobile devices. --- # **✅ Step 2: Select Custom Position** Under **Position Style**, you'll see the available placement options. ### **Available Position Styles** #### **Floating** Displays the Currency Converter as a floating widget on the storefront. --- #### **Header** Places the Currency Converter inside the store header. --- #### **Custom Position** Places the Currency Converter inside a specific element selected by you. Select: → **Custom Position** Once selected, additional settings become available automatically. --- # **✅ Step 3: Enter the Target Element** Inside the **Custom Element** field, enter the CSS selector of the element where the Currency Converter should appear. ### **Supported Selector Types** #### **Class Selector** Begins with a period (`.`) ### **Example** `.header-actions` --- #### **ID Selector** Begins with a hash (`#`) ### **Example** `#currency-wrapper` --- #### **Element Selector** Uses the HTML element name directly. ### **Example** `header` --- # **🔍 How to Find a Selector** If you're unsure which selector to use: 1. Open your storefront. 2. Right-click the area where you want the Currency Converter. 3. Click **Inspect**. 4. Locate the HTML element. 5. Right-click on the element. 6. Select **Copy → Copy selector**. 7. Paste the copied selector into the **Custom Element** field. ### **Example** `#block-template--166120#######__banner_bckcpm-video_CLEttT > div.media-with-text__content.rounded.text-custom > div > a` ⚠️ Avoid using temporary Shopify-generated IDs, as these may change after theme updates. Using stable class names is recommended whenever possible. --- # **✅ Step 4: Choose Position Placement** After entering the selector, choose how the Currency Converter should be inserted relative to that element. ### **Available Placement Options** --- ## **Before** Places the Currency Converter immediately before the selected element. ### **Example** If targeting a cart icon: → The Currency Converter appears to the left of the cart icon. --- ## **After** Places the Currency Converter immediately after the selected element. ### **Example** If targeting a logo: → The Currency Converter appears to the right of the logo. --- ## **Append** Places the Currency Converter inside the selected element, at the end. ### **Example** If targeting a navigation container: → The Currency Converter appears after all existing navigation items. 💡 This is often the best starting option for most themes. --- ## **Prepend** Places the Currency Converter inside the selected element, at the beginning. ### **Example** If targeting a navigation container: → The Currency Converter appears before all existing navigation items. --- # **✅ Step 5: Save Your Changes** Once the selector and placement option have been configured: → Click **Save** The Currency Converter will now attempt to render in the selected location. --- # **✅ Step 6: Verify the Placement** Visit your storefront and confirm that the Currency Converter appears in the desired location. If it does not appear: * Verify the selector is correct * Confirm the element exists on the page * Try a different placement option * Refresh the page 💡 A hard refresh is often helpful after making placement changes. --- # **🛠️ Alternative Method: Manual Placement** If using a CSS selector isn't suitable for your theme, you can manually place the Currency Converter using its code snippet. This method is useful when: * You want complete control over where the Currency Converter appears. * Your theme doesn't contain a suitable element to target with **Custom Position**. * You're comfortable making minor theme customizations. ### **Step 1: Copy the Currency Converter Code Snippet** Open the **Hoppy Currency Converter** app from your Shopify Admin. Then: → Go to **Advanced** Locate: → **Currency Converter Box Placement** Copy the provided code snippet from our app or below: `
` This is the snippet you'll place wherever you want the Currency Converter to appear. --- ### **Step 2: Add the Snippet to Your Theme** #### **Option A — Using a Custom Liquid Block** From the Shopify Theme Editor: → Navigate to the section where you'd like the Currency Converter to appear. → Click the **➕ Add Block** button. → Search for and add a **Custom Liquid** block. → Paste the Currency Converter Code Snippet into the Custom Liquid block. → Click **Save**. --- #### **Option B — Editing Theme Files** For advanced storefront customization, you can also add the same code snippet directly to your Shopify theme files. Go to: **Online Store → Themes** → Click the **⋯** menu beside **Edit Theme** → Select **Edit code** Locate the appropriate `.liquid` file for the section where you'd like the Currency Converter to appear, then paste the Currency Converter Code Snippet in the desired location. ⚠️ **Important:** This method is intended for merchants comfortable editing Shopify theme code. We recommend duplicating your theme before making changes, as incorrect modifications may affect your storefront layout or functionality. --- ### **Selector Must Exist on the Page** If the selected element only exists on certain pages, the Currency Converter will only appear on those pages. Using global header or navigation selectors usually provides the best results. --- ### **Hidden Elements Hide the Converter** If the selected element is hidden by the theme on certain devices, the Currency Converter will also be hidden. Always test both desktop and mobile layouts. --- ### **You Can Switch Back Anytime** If Custom Position is no longer needed: → Return to **Display Settings** → Change **Position Style** back to: * Floating * Header No additional configuration is required. --- # **🎉 Final Result** Once configured successfully: ✅ The Currency Converter appears exactly where you want it ✅ Desktop and mobile layouts can use different placements ✅ The widget blends naturally into your storefront design ✅ Placement can be adjusted without editing theme files ✅ Advanced merchants can manually place the converter using Custom Liquid or Theme files for complete control Using Custom Position helps create a more seamless and professional storefront experience while keeping the Currency Converter easily accessible to shoppers. 🎯