Liquid Snippets by ALSEL
🧭 ヘッダー/フッター/ナビゲーション初級

ストアヘッダー

ロゴ、グローバルナビゲーション、顧客アカウントメニュー、カートへのリンクを含むストア共通ヘッダーセクション。顧客ログイン状態を判定し、ログイン前後で表示内容を出し分ける。

用途
すべてのストアページの最上部に配置するヘッダー領域。ブランドロゴ、メインメニュー、ユーザーアクション(ログイン・アカウント・カート)を一元管理する。
設置場所
shopify/sections/header.liquid に配置し、theme.liquid の <body> 直下で `{% section 'header' %}` を呼び出す。ロゴ画像パス、メニューハンドル('layout-menu')、CSS クラス('container' など)を自テーマに合わせて調整する。
注意点
顧客ログイン機能を使う場合は Shopify 管理画面の「設定 > ストア設定 > 顧客アカウント」で「顧客アカウントの有効化」がオンになっていることが前提。`'action.log_in'` `'action.account'` などの翻訳キーは Shopify の theme/locales/{言語}.json で定義されるため、キーが存在しない場合はカスタムキーに置き換えるか、theme/locales/ に追加する。ロゴは固定テキスト("Logo")なので、実装時は `<img>` タグに変更し、theme settings で画像を選択できるようにするとよい。
タグ:headernavigationcustomer-accountcartsection

コード

37 行 / liquid
<div class="container">
  <a href="{{ routes.root_url }}">
    Logo
  </a>

  {% render 'layout-menu' %}

  <div>
    {% if shop.customer_accounts_enabled %}
      {% if customer %}
        <a href="{{ routes.account_url }}">
          {{ 'action.account' | t }}
        </a>
        {{ 'action.log_out' | t | customer_logout_link }}
      {% else %}
        {{ 'action.log_in' | t | customer_login_link }}
        {{ 'action.register' | t | customer_register_link }}
      {% endif %}
    {% endif %}

    <a href="{{ routes.cart_url }}">
      {{ 'action.cart' | t }}
    </a>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.header.name",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.header.settings.paragraph"
    }
  ]
}
{% endschema %}

出典・ライセンス

License:
MIT

このコードは uicrooks 著作の MIT ライセンスソースです。 原本の著作権は uicrooks が保有します。日本語訳は ALSEL によるものです。

関連項目

🧭 ヘッダー/フッター/ナビゲーション中級

Alpine.js統合のメニュー開閉

Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。

📁 theme-tools·MIT·5
🧭 ヘッダー/フッター/ナビゲーション初級

ヘッダーのレイアウト構造

Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。

📁 theme-tools·MIT·14
🧭 ヘッダー/フッター/ナビゲーション初級

ナビゲーションバーのロゴ

ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。

📁 ks-bootshop·MIT·18
🧭 ヘッダー/フッター/ナビゲーション初級

決済方法アイコン

ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。

📁 ks-bootshop·MIT·18
🧭 ヘッダー/フッター/ナビゲーション初級

グローバルナビゲーションメニュー

Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。

📁 shopify-theme-lab·MIT·19
🧭 ヘッダー/フッター/ナビゲーション初級

フッター

ストア共通のフッターセクション。管理画面で設定したフッターメニュー(リンクリスト)をループ表示し、著作権表記を出す。

📁 shopify-theme-lab·MIT·25