🏗️ テーマ基盤中級

テーマレイアウト（HTML基盤）

Shopify ストアの全ページの HTML 基盤となるレイアウトファイル。言語設定、メタタグ、favicon、CSS/JS バンドルの読み込みをまとめ、ヘッダー・メインコンテンツ・フッターのセクションを統合する。

用途

すべてのテーマに必須の共通 HTML フレーム。ストア全体のメタ情報、アセット読み込み、ページ構造を一元管理するときに使う。

設置場所

shopify/layout/theme.liquid として配置する。Shopify テーマエディターにより自動的に読み込まれ、すべてのページテンプレートがこのレイアウト内でレンダリングされる。

注意点

favicon は設定パネルで画像をアップロードしておかないと表示されないため、Settings JSON の favicon キーを確認する。`request.page_type == 'captcha'` の条件は reCAPTCHA ページでアプリコンテナ (`id='app'`) が干渉しないようにするもので、削除するとプラグイン互換性が低下することがある。preload タグはリソース読み込みを最適化するが、ブラウザキャッシュ挙動によって効果が変わるため、サイト速度計測ツール（Lighthouse など）で実測検証する。

タグ:layouthtmlmeta-tagsasset-loadingsection

コード

42 行 / liquid

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    <link rel="preload" href="{{ 'bundle.css' | asset_url }}" as="style">
    <link rel="preload" href="{{ 'bundle.js' | asset_url }}" as="script">

    {% if settings.favicon %}
      <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
    {% endif %}

    <title>{{ page_title | escape }}</title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {{ 'bundle.css' | asset_url | stylesheet_tag }}

    <!-- header hook for Shopify plugins -->
    {{ content_for_header }}
  </head>

  <body>
    <div {% unless request.page_type == 'captcha' %}id="app"{% endunless %}>
      {% section 'header' %}

      <main id="main" role="main">
        {{ content_for_layout }}
      </main>

      {% section 'footer' %}
    </div>

    <!-- webpack bundle -->
    <script src="{{ 'bundle.js' | asset_url }}" defer="defer"></script>
  </body>
</html>

出典・ライセンス

Source:: uicrooks/shopify-theme-lab/shopify/layout/theme.liquid
Repository:: https://github.com/uicrooks/shopify-theme-lab
License:: MIT

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

テーマレイアウト（HTML基盤）

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット