【Shopify TIPS】
10分程度の修正で、ヘッダーアカウントアイコンにログイン後ユーザー名を表示可能

◆今回のカスタマイズのポイント
WEGOさんのストアのようにShopifyのテーマ「Dawn/Rise」で、ヘッダーのアカウントアイコンの横に、ログイン後ユーザー名を表示させたい場合の設定例です。

◆具体的な実装手順
①まずはファイルの場所を確認
・sections/header.liquid
・sections/header-drawer.liquid

②コードを追加
・「http://customer.name」を使用すると、日本語名は姓名が逆転してしまうため「customer.last_name」「customer.first_name」に分解して記述
・ヘッダーでアカウント名が改行されないようにスタイリングを追加

◆実装のメリット
・ログイン状態が即座に判別可能
・ユーザーの帰属意識向上

◆よくあるつまずきポイント
・デスクトップとモバイルで掲載箇所が異なるので、それぞれに実装すること

◆実装後の動作確認すべきポイント
□ PC表示での見た目
□ スマホでの表示確認
□ ログイン/ログアウト切り替え
□ 長いユーザー名での表示崩れ

--------------

ここまでお読みいただき、ありがとうございます。

ECサイト構築やShopifyカスタマイズについて、定期的に情報発信しています。
セミナーではプロジェクトマネジメントや納品物としてのドキュメント作成方法など、より本格的な構築ノウハウなどを提供しています。