Shopify Debut テーマのヘッダーにログインアイコンを表示させる

こんにちは、 Gaji-Labo 横田です。Eコマース用のプラットフォームである Shopify によるサイト構築で、Shopify の Debut テーマに ログインページへのアイコンをヘッダーに表示させる小ネタを紹介します。

Shopify 関連記事はこちらの記事にまとまっておりますので、あわせてお読みください。

ヘッダーにログインアイコンを表示させたい

Debut テーマでは、ログインページへのリンクは section/header.liquid 内で定義されており、デフォルトの状態では表示されていません。

{% if shop.customer_accounts_enabled %}
  {% if customer %}
    <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
      {% include 'icon-login' %}
      <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
      </a>
  {% else %}
    <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
      {% include 'icon-login' %}
      <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
      </a>
  {% endif %}
{% endif %} 

コード上では {% if shop.customer_accounts_enabled %} で顧客アカウントの有効化有無によるアイコンの表示を条件分岐しています。

その顧客アカウントを有効化するには、管理画面から設定保存が必要です。

管理画面 > 設定 > チェックアウト > 顧客アカウント で、「アカウントを任意にする」または「アカウント作成を必須にする」を選択することで、条件分岐の値に true が返り、ログインページへのアイコンを表示することができます。

また {% if customer %} ではログイン済みか未ログインかの条件分岐によって、ログイン先のURLやフォールバックのテキスト表示が変わります。プロジェクトによっては、ログイン有無によってアイコン表示など細かく出し分けをしたいこともあるので、覚えておきたいですね。

まとめ

今回は Debut テーマのヘッダーにログインページへのアイコンを表示させる方法を紹介しました。こういった小さな知見でもひとつずつ蓄積していくことで、初めてShopify テーマ開発に携わっている方々の参考にしていただければと思います。