Typewriter dollar sign
Shopify

How to Add a Currency Converter on Shopify Debut Theme Header

Looking to add a currency converter to your debut theme header? Look no further and follow this guide!

Click here to view our example store

While the Debut theme on the Shopify theme store is excellent for starter entrepreneurs who want to get into the Shopify game. There are limitations of functionality within the theme which can cause UX issues to your customers.

Having a currency converter within the header will allow your customers to easily change the currency of the store without having to use any apps that may slow down your store. The currency converter will link to the available currencies you accept on your Shopify store.

Lets get down to business, the guide will go through both the desktop header and the mobile drop down navigation, this will ensure the currency converter will show for both types of customers, whether on their mobile or their desktop.


Go to the Shopify theme edit code. Head over to the Section folder and click Header.liquid.

Scroll down to line 114. Right before the button, add the below code

<span class="desktop-currency">
    {% form 'currency' %}
    {{ form | currency_selector }}
    {% endform %}
<!---Coded by bluish.io --->
</span>

Scroll down to line 222, 233, and 244. Right after {% endfor %}, add the below code.

<li class="mobile-nav__item mobile-currency">
    {% form 'currency' %}
    {{ form | currency_selector }}
    {% endform %}
<!---Coded by bluish.io --->
</li>

You will now have 3 new additions, for each layer of the mobile navigation.

Add a currency converter to Shopify

That’s the HTML code completed. Now go to the Assets folder and click theme.js scroll down to the very bottom and add the below code.

function currencyFormSubmit(event) {
    event.target.form.submit();
}

document.querySelectorAll('.shopify-currency-form select').forEach(function() {
    this.addEventListener('change', currencyFormSubmit);
});

That’s the Javascript completed, now for the last step. Within the same Asset Folder, click theme.css. Scroll down to the very bottom and add the below code.

.desktop-currency #currency_form select {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    margin: 3px 5px 0 0;
    background: transparent;
}

.desktop-currency #currency_form select option {
    font-weight: 400;
}

@media only screen and (max-width: 749px) {
    .desktop-currency #currency_form select {
        display: none;
    }
    .mobile-currency #currency_form {
        padding: 10px 0;
        text-align: center;
    }
}

Congrats! You now have a working currency converter in your store’s header and mobile navigation!

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *