How to Add a Currency Converter on Shopify Debut Theme Header

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.

Edit The Header.liquid

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 jotting.com --->
</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 jotting.com --->
</li>

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

Add Code in Theme.js

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);
});

Add Code in Theme.css

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!