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. Find Copy → Copy selector
7. Paste the result in the Custom Position input 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 you need complete control over placement, you can manually add the Currency Converter to your theme.

Open:

→ Advanced

Locate:

→ Currency Converter Box Placement

Then use:

<div class='futureblink-currency-box'></div>

Paste this snippet directly into your Shopify theme where you want the Currency Converter to appear.

⚠️ This method is intended for merchants comfortable editing theme code.

Always duplicate your theme before making code changes.

⚠️ Important Notes

Desktop and Mobile Are Independent

You can use different positions for:

• Desktop
• Mobile

This allows greater flexibility for responsive storefront layouts.

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 use manual placement for complete control

Using Custom Position helps create a more seamless and professional storefront experience while keeping the Currency Converter easily accessible to shoppers. 🎯

Updated on: 14/07/2026