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

越境ECの場合、対応テーマやGeolocationアプリなどを利用することで、言語・通貨の選択ができるようになりますが、デフォルトではセレクターはフッターに表示されます。

そこで今回はヘッダーに通貨選択のプルダウンを追加する方法について、まとめてみました。

Shopifyの無料体験をはじめる

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

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で調整してください。