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

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

 

以前、通貨セレクターを任意の場所に埋め込むという記事を紹介しました。

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

今回はその記事をもう少し掘り下げて、Debutテーマのヘッダーに通貨セレクターを設置する方法を紹介していきます。

Debutのデフォルトだとフッターにしか通貨セレクターが設置できないので、コード編集をする必要があります。通貨セレクターを設置する方法は先ほど上にリンクを貼った過去記事で書いてありますので、そちらもご参照ください。

 

貼り付けるコードと貼り付け先

まずテーマ編集から貼り付けるコードはこちらです。

通貨セレクターのコード

まずDebutの"header.liquid"ファイルに移動し、

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

の要素を見つけましょう。Debutテーマをあまりカスタマイズしていなければ、110行目付近にあるはずです。(ここで違う場所に通貨セレクターを入れてしまうと、他デザインも崩れてしまう場合があるので、お気をつけくださいませ。)

 その真下に、こちらのコードを貼り付けます。

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

すると通貨セレクターがヘッダーに表示されました!

Shopify 通貨セレクター

ただこの現状通貨セレクターを変更しても通貨表示は変更されないので、もう少しコードを追加していきましょう。

 

通貨セレクターを変更する処理コード

先ほど追加したコードはあくまでも選択部分の処理なので、実際に通貨変更する処理コードが必要になってきます。

Debutテーマの"theme.js"ファイルの一番下に下記コードを追加して見ましょう。

// 通貨セレクター
function currencySubmit(event) {
 event.target.form.submit();
}

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

これで自動的に通貨変更されるようになりました。

 

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

 以前の記事でも紹介しましたが、通貨セレクターのHTML構成はこのようになっております。

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

form自体は"shopify-currency-form"というクラス名を持っており、その下はinputやselect, optionで指定できるかと思います。

ちなみに、こちらも以前書きましたが

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

というスタイルを追加してあげると、このような表示になるかと思います。

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

 

Debutテーマで通貨セレクターをヘッダーに持っていく方法 まとめ

以上、Shopify無料テーマ「Debut」テーマのヘッダーに通貨セレクターを表示させる方法でした!

Debutテーマのデフォルトだと通貨セレクターを表示できるのがフッターだけなので、わざわざ下までスクロールしなければなりません。特にページが長いShopifyサイトだと、見つけるのも一苦労です。

なので、Debutテーマを使用していて、海外通貨にも対応しているストアはぜひ今回の方法で通貨セレクターをヘッダーに追加して見てください。

本日も最後までお読みいただきありがとうございました。本日も良い1日を!

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら