[Shopify]Debutテーマで通貨セレクターをヘッダーに持っていく方法

November 5, 2020

We previously introduced an article about embedding a currency selector anywhere.

https://ec-penguin.com/blogs/shopify/making-currency-selector

In this article, we will delve a little deeper into that article and show you how to place a currency selector in the header of the Debut theme.

By default in Debut, the currency selector can only be placed in the footer, so you will need to edit the code. Please refer to the previous article I just linked to above for instructions on how to install the currency selector.

Code to paste and where to paste it

First, here is the code to paste from the theme editor

Code for Currency Selector

First, go to Debut's "header.liquid" file, and add the following line

< div class = "site-header__icons-wrapper" >

element, which should be around line 110 if you haven't customized the Debut theme too much. (Please be careful not to put the currency selector in the wrong place here, as it may break the rest of the design as well.)

Paste this code directly below it.

{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}

Now the currency selector appears in the header!

Shopify 通貨セレクター

However, changing the currency selector does not change the currency display at this point, so let's add some more code.

Processing code to change the currency selector

The code we have just added is only for the selection process, so we need the code to actually change the currency.

Let's add the following code to the bottom of the "theme.js" file of the Debut theme.

// currency selector
function currencySubmit(event) {
event.target.form.submit();
}

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

The currency is now automatically changed.

Debut Currency Selector Style Change

As mentioned in a previous article, the HTML structure of the currency selector looks like this.

Shopify 通貨セレクター　要素　検証

The form itself has a class name "shopify-currency-form", under which you can specify inputs, selects, and options.

Incidentally, I have written about this before.

{% form 'currency' %}
　{{ form | currency_selector }}
{% endform %}

<style>
#currency_form select{
　width: 150px;
　border: 1px solid gray;
　border-radius: 0;
　margin: 20px;
　background-color: lightyellow;
}
</style>

If you add the following style, the display will look like this.

Shopify スタイル変更　通貨セレクター Debut

How to bring the currency selector to the header in the Debut theme Summary

That's how to display the currency selector in the header of the Debut theme, a free Shopify theme!

By default, the Debut theme only allows the footer to display the currency selector, so you have to scroll all the way down. This is especially difficult to find on a Shopify site with long pages.

So, if you are using the Debut theme and your store supports foreign currencies, please take a look at adding the currency selector to the header using this method.

Thank you for reading to the end today. Have a great day!