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

[tiffanymwc]

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

[DaisyVo]

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 Code

1. Go to your Shopify Admin.
2. Click Online Store > Themes.
3. Find your current theme and click Actions > Edit Code.
4. In the left panel, look for footer.liquid (this is where the currency converter is currently placed).
5. 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 <nav> section, near the menu items, is a great place.
3. Paste the currency converter code you copied earlier right before the closing </nav> tag or inside your navigation wrapper.

Example:

<div class="currency-selector">

    {%- render 'currency-selector' -%}

</div>

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 & Test

1. Click Save in the theme editor.
2. 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.