🏗️ テーマ基盤初級

テーマ全体のレイアウト構造

Shopify ストアの HTML 基盤となるマスターレイアウト。ヘッダー、ナビゲーション、フッター、ショッピングカート表示を含む共通構造を定義する。ページテンプレートはこのレイアウト内に content_for_layout で埋め込まれる。

用途

すべてのページ（商品、コレクション、トップ、固定ページなど）に共通するサイト構造を一元管理したいとき。ヘッダーのストア名、グローバルナビ、フッターの連絡先情報をここに定義する。

設置場所

theme.liquid として theme/ 直下に配置する。Shopify は自動的にこのファイルをマスターレイアウトとして認識し、すべてのページテンプレートがこの構造内で描画される。

注意点

このコードは Shopify Liquid の初期リファレンス実装であり、prototype.js や scriptaculous.js といった 2000年代の古いライブラリを使用している。現代のテーマ構築では jQuery や Vanilla JavaScript に置き換え、CSS フレームワーク（Bootstrap、Tailwind など）を導入することを推奨する。カート表示や商品オプション選択機能（option_selection.js）をカスタマイズする場合、cart オブジェクトのプロパティ（item_count、total_price）が最新の Liquid API と互換性があるか Shopify 公式ドキュメントで確認する。

タグ:layoutheaderfooternavigationcart-displayhtml-structure

コード

91 行 / liquid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{shop.name}} - {{page_title}}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  {{ 'reset.css'     | asset_url | stylesheet_tag }}
  {{ 'style.css'     | asset_url | stylesheet_tag }}

  {{ 'lightbox.css'                         | asset_url | stylesheet_tag }}
  {{ 'prototype/1.6/prototype.js'           | global_asset_url  | script_tag }}
  {{ 'scriptaculous/1.8.2/scriptaculous.js' | global_asset_url  | script_tag }}
  {{ 'lightbox.js'                          | asset_url | script_tag }}
  {{ 'option_selection.js'                  | shopify_asset_url | script_tag }}

  {{ content_for_header }}
</head>
<body id="page-{{template}}">

<div id="wrap">

  <div id="top">
    <div id="cart">
      <h3>Shopping Cart</h3>
      <p class="cart-count">
        {% if cart.item_count == 0 %}
          Your cart is currently empty
        {% else %}
          {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} <span>-</span> Total: {{cart.total_price | money_with_currency }} <span>-</span> <a href="/cart">View Cart</a>
        {% endif %}
      </p>
    </div>

    <div id="site-title">
      <h3><a href="/">{{shop.name}}</a></h3>
      <h4><span>Tribble: A Shopify Theme</span></h4>

    </div>
  </div>

  <ul id="nav">
    {% for link in linklists.main-menu.links %}
     <li>{{ link.title | link_to: link.url }}</li>
    {% endfor %}
  </ul>

  {{ content_for_layout }}

  <div id="foot" class="clearfix">
    <div class="quick-links">
      <h4>Quick Navigation</h4>
      <ul class="clearfix">
        <li><a href="/">Home</a></li>
        <li><a href="#top">Back to top</a></li>
        {% for link in linklists.main-menu.links %}
         <li>{{ link.title | link_to: link.url }}</li>
        {% endfor %}
      </ul>
    </div>

    <div class="quick-contact">
      <h4>Quick Contact</h4>
      <div class="vcard">

          <div class="org fn">
             <div class="organization-name">Really Great Widget Co.</div>
          </div>
        <div class="adr">
            <span class="street-address">2531 Barrington Court</span>
            <span class="locality">Hayward</span>,
          <abbr title="California" class="region">CA</abbr>
            <span class="postal-code">94545</span>
         </div>
        <a class="email" href="mailto:email@myshopifysite.com">
          email@myshopifysite.com
        </a>
        <div class="tel">
          <span class="type">Support:</span> <span class="value">800-555-9954</span>
        </div>
      </div>

    </div>

    <p><a href="http://shopify.com" class="we-made">Powered by Shopify</a> &copy; Copyright {{ "now" | date: "%Y" }} {{ shop.name }}, All Rights Reserved.  <a href="/blogs/news.xml" id="foot-rss">RSS Feed</a></p>
  </div>

</div>

</body>
</html>

出典・ライセンス

Source:: Shopify/liquid/performance/tests/tribble/theme.liquid
Repository:: https://github.com/Shopify/liquid
License:: MIT

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

テーマ全体のレイアウト構造

コード

出典・ライセンス

関連項目

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

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

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

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

基本的なHTMLレイアウト

layout タグのフォーマット