[Shopify]通貨セレクターを好きな場所に追加する方法

October 23, 2020

If you also sell internationally on your Shopify store, you may have the opportunity to use the currency selector.

Shopify 通貨セレクター

However, this currency selector can only be displayed in the footer by default in some Shopify themes, or it can't be moved to the position you want.

For example, the Shopify Free Debut theme seems to be footer-only. However, if the page is long, it can be difficult to scroll all the way to the bottom, or worse, the currency selector may not even be noticed.

So this time, I will implement the currency selector from scratch and adjust it so that it can be embedded anywhere.

Required settings before implementing the currency selector

We will start by displaying the currency selector, as we do not think it is displayed by default when the Shopify store is still created.

What you need to do is

Set up multiple currencies in Shopify Payments
Activate currency selector

The following is an example. (This is not the main topic, see below for details)

https://help.shopify.com/ja/manual/payments/shopify-payments/multi-currency/setup

By the way, in the case of the Debut theme

Admin → Theme → Customize → Footer → Currency Selector

通貨セレクターの表示　Shopify

Basic Currency Selector Code

This is a basic implementation of a normal currency selector.

{% form 'currency' %}
{{ form | currency_selector }}
<button type="submit">update</button>
{% endform %}

With this code, the currency can be updated when the "Update" button is pressed.

Please note that the above code is quite important and may not work depending on the position.

By the way, it looks like this.

Shopify 通貨セレクター

Automatic currency change after selecting the currency selector

However, in this state, the currency cannot be updated unless the "Update" button is pressed. This is not very user-friendly.

Therefore, we will adjust the JS so that the currency can be changed automatically after the drop-down list is selected.

Insert the slightly modified code above where you want to insert the currency selector.

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

Then, add the following code to the bottom of the theme.js file.

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

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

Now when you select the dropdown in the Shopify currency selector, it will be converted to the selected currency. It looks like this.

Shopify currency selector

The "refresh" button is gone.

Designing the Currency Selector

Although the above currency selector may seem sufficient, we would like to create a currency selector that matches the design of the site if possible.

Using chrome's validation function, we see that

and it seemed to be able to apply the style using id="cyrrency_form".

If we add the style to the previous code, we get

{% 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>

The following changes can be made. This will display

The result will look something like the following

The impression has changed dramatically. (Use yellow background to make the change easier to see.)

Create a customizable currency selector

I just want more gory customization! If you are interested in this, please refer to the following code that we have pulled from the official Shopify website.

{% form 'currency' %}
<select name="currency"
> {% for currency in shop.enabled_currencies %}
{% if currency == cart.currency %}
<option selected="true">{{currency.iso_code}} {{currency.symbol}}</option>
{% endif %}
{% endfor %}
</select>
{% endform %}

In a nutshell, what we are doing is picking up the enabled currencies in the Shopify store in shop.enabled_currencies and outputting them in the option tag.

The currency.iso_code is used to retrieve the notation of JPY, GBP, USD, etc., and the currency.symbol is used to retrieve the currency unit, such as ³, £, $, etc.