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 テーマ開発に携わっている方々の参考にしていただければと思います。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームが前に進むためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。