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!

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 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 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!

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've 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.

Bluish has rebranded to Jotting :) X