[Shopify] ヘッダーに通貨選択を表示する方法

越境ECの場合、対応テーマやGeolocationアプリなどを利用することで、言語・通貨の選択ができるようになりますが、デフォルトではセレクターはフッターに表示されます。 そこで今回はヘッダーに通貨選択のプルダウンを追加する方法について、まとめてみました。

Shopifyの無料体験をはじめる

Shopifyのヘッダーに通貨選択を表示する手順

こちらの公式ドキュメントが参考になります。 Theme tags

ヘッダーにコードを追加する

まず、sectionフォルダのheader.liquid ファイルに、上記のドキュメントにあるコードを追加します。

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

これだけでも表示されますが、多少カスタマイズします。

通貨を選択したら自動で切り替える

先ほどのコードは、通貨を選択後にSubmitボタンを押す必要があります。 選択時に自動で切り替えたいのと、ヘッダーの要素の数も減らしたいため、selectタグに以下を追記し、Submitボタンのbuttonタグは削除します。

onchange="submit(this.form)"

それ以外に以下を追記しています。

• 言語が2つ以上ある場合にのみ表示する
• 商品の価格が表示される特定のテンプレートのみ表示する

テンプレートの指定が不要な場合は削除してください。 上記のように変更したものが以下です。

<!-- currency selector -->
{% if template == 'index' or template == 'collection' or template == 'product' or template == 'cart' %}
  {% if shop.enabled_currencies.size > 1 %}
  {% form 'currency' %}
    <select name="currency" onchange="submit(this.form)">
      {% for currency in shop.enabled_currencies %}
        {% if currency == cart.currency %}
          <option selected="true">{{currency.iso_code}}</option>
        {% else %}
          <option>{{currency.iso_code}}</option>
        {% endif %}
      {% endfor %}
    </select>
  {% endform %}
{% endif %}
{% endif %}
<!-- end currency selector -->

これでヘッダーに通貨選択が表示されました。 ※見た目はCSSで調整してください。 モバイルでも表示されますが、Debutテーマの場合、ロゴ・検索・アカウント・カートボタンと多くの要素があるため、ロゴが小さくなってしまいます。 その場合はボタンの数を絞ってハンバーガーメニュー内に移動するなどしてください。 以上です！

Shopifyの無料体験をはじめる