How to move the currency converter from footer to top navigation?

Shopify Discussion
,

Topic summary

A Shopify store owner wants to relocate their currency converter from the footer to the top navigation for better visibility on both desktop and mobile devices.

Proposed Solution:

The recommended approach involves editing the theme code:

  1. Locate the converter code in footer.liquid (typically {%- render 'currency-selector' -%} or similar)
  2. Copy and paste this code into header.liquid, positioning it within the navigation structure
  3. Remove the original code from the footer
  4. Add custom CSS to theme.css or base.css for proper alignment and responsive design
  5. Test on both desktop and mobile to ensure functionality and appearance

The solution includes sample CSS code for desktop alignment and mobile responsiveness adjustments. The discussion remains open, awaiting confirmation whether the implementation was successful or if additional assistance is needed.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

How to move the currency converter from footer to top navigation?

website: https://parallel51.co/

Seeking for a solution for desktop & mobile.

Thanks a lot

2

Hi @tiffanymwc

I totally get what you’re trying to do—you want to move the currency converter from the footer to the top navigation so it’s easier for customers to find and use. That makes perfect sense, especially for improving user experience and making sure visitors can switch currencies right away.

How to Move the Currency Converter from Footer to Top Navigation (Desktop & Mobile)

Shopify’s default setup often places the currency converter in the footer, especially if you’re using a theme that supports automatic currency conversion. To move it to the top navigation, you’ll need to tweak your theme’s code. Here’s how you can do it:

Step 1: Find Your Currency Converter Code1. Go to your Shopify Admin.

  1. Click Online Store > Themes.
  2. Find your current theme and click Actions > Edit Code.
  3. In the left panel, look for footer.liquid (this is where the currency converter is currently placed).
  4. Copy the currency converter code (it may look something like this, but it varies by theme):

{%- render ‘currency-selector’ -%}

or

{%- include ‘currency-selector’ -%}

Step 2: Add the Currency Converter to the Header

Now, let’s move it to the top navigation:

  1. In the theme editor, open header.liquid.
  2. Find a good spot to place the currency converter. Usually, inside the section, near the menu items, is a great place.
  3. Paste the currency converter code you copied earlier right before the closing tag or inside your navigation wrapper.

Example:

{%- render ‘currency-selector’ -%}

Step 3: Style It Properly for Desktop & Mobile

Since you’re moving it to a new location, the design may need some tweaks to look good. You can add custom CSS inside theme.css or base.css (depends on your theme):

.currency-selector {

display: flex;

align-items: center;

margin-left: 15px; /* Adjust as needed */

}

@media (max-width: 768px) {

.currency-selector {

margin-top: 10px;

text-align: center;

}

}

This will ensure that:

  • The currency converter aligns properly with your navigation on desktop.
  • It looks good on mobile by adjusting spacing.

Step 4: Save & Test1. Click Save in the theme editor.

  1. Visit your store’s homepage and check the navigation on both desktop and mobile to make sure everything looks good and functions correctly.

That’s it! Now your currency converter should appear in the top navigation instead of the footer. If it doesn’t show up or breaks the layout, double-check the placement in header.liquid and tweak the CSS accordingly.

If you need extra help, just let me know asap. Thanks
Daisy.