🏗️ テーマ基盤初級

テーマの基本レイアウト

Shopify ストアの全ページ共通レイアウトを定義する theme.liquid。ヘッダー、ミニカート、メインコンテンツ、サイドナビゲーション、フッターの基本構造を組み立てる。

用途

ストア全体で共通のナビゲーション、カート表示、ページレイアウトが必要なとき。すべてのテンプレートページ（商品、コレクション、トップなど）がこのレイアウト内にネストされる。

設置場所

layout/theme.liquid に配置する。このファイルは Shopify テーマの基本骨組みとなり、{{ content_for_layout }} の位置に各ページテンプレートの内容が自動挿入される。

注意点

このコードは古い Shopify テーマ形式（Prototype.js や Scriptaculous など非推奨ライブラリを使用）であり、現在の Online Store 2.0 テーマには対応していない。ミニカート表示は JavaScript の tooltip()、superSwitch() 関数に依存しており、これらが別途定義されていることが必須。asset_url、global_asset_url フィルターは CDN キャッシュを利用するため、CSS・JS の更新反映に遅延が生じる可能性がある。モダンなストア構築には Shopify の最新テーマテンプレートを参考にしたほうがよい。

タグ:layoutthemeheaderfooternavigationcart

コード

106 行 / liquid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>{{shop.name}} - {{page_title}}</title>

  {{ 'textile.css'  | global_asset_url | stylesheet_tag }}
  {{ 'lightbox/v204/lightbox.css' | global_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/v204/lightbox.js'  | global_asset_url  | script_tag }}
  {{ 'option_selection.js'        | shopify_asset_url | script_tag }}

  {{ 'layout.css'   | asset_url | stylesheet_tag }}
  {{ 'shop.js'      | asset_url | script_tag }}

  {{ content_for_header }}
</head>

<body id="page-{{template}}">

  <p class="hide"><a href="#rightsiders">Skip to navigation.</a></p>
    <!-- mini cart -->
        {% if cart.item_count > 0 %}
      <div id="minicart" style="display:none;"><div id="minicart-inner">
      <div id="minicart-items">
      <h2>There {{ cart.item_count | pluralize: 'is', 'are' }} {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in <a href="/cart" title="View your cart">your cart</a>!</h2><h4 style="font-size: 16px; margin: 0 0 10px 0; padding: 0;">Your subtotal is {{ cart.total_price | money }}.</h4>
        {% for item in cart.items %}
        <div class="thumb">
          <div class="prodimage"><a href="{{item.product.url}}" onMouseover="tooltip('{{ item.quantity }} x {{ item.title }} ({{ item.variant.title }})', 200)"; onMouseout="hidetooltip()"><img src="{{ item.product.featured_image | product_img_url: 'thumb' }}" /></a></div>
        </div>
        {% endfor %}
        </div>
       <br style="clear:both;" />
      </div></div>
        {% endif %}

  <div id="container">
    <div id="header">
      <!-- Begin Header -->
        <h1 id="logo"><a href="/" title="Go Home">{{shop.name}}</a></h1>
      <div id="cartlinks">
        {% if cart.item_count > 0 %}
          <h2 id="cartcount"><a href="/cart" onMouseover="tooltip('There {{ cart.item_count | pluralize: 'is', 'are' }} {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} in your cart!', 200)"; onMouseout="hidetooltip()">{{ cart.item_count }} {{ cart.item_count | pluralize: 'thing', 'things' }}!</a></h2>
      <a href="/cart" id="minicartswitch" onclick="superSwitch(this, 'minicart', 'Close Mini Cart'); return false;" id="cartswitch">View Mini Cart ({{ cart.total_price | money }})</a>
        {% endif %}
      </div>
      <!-- End Header -->

    </div>
  <hr />
<div id="main">

    <div id="content">
    <div id="innercontent">
      {{ content_for_layout }}
      </div>
    </div>

  <hr />
    <div id="rightsiders">

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

        {% if tags %}
        <ul class="rightlinks">
          {% for tag in collection.tags %}
            <li><span class="add-link">{{ '+' | link_to_add_tag: tag }}</span>{{ tag | highlight_active_tag | link_to_tag: tag }}</li>
          {% endfor %}
        </ul>
        {% endif %}

      <ul class="rightlinks">
        {% for link in linklists.footer.links %}
           <li>{{ link.title | link_to: link.url }}</li>
        {% endfor %}
      </ul>

    </div>

  <hr /><br style="clear:both;" />

    <div id="footer">
      <div class="footerinner">
      All prices are in {{ shop.currency }}.
      Powered by <a href="http://www.shopify.com" title="Shopify, Hosted E-Commerce">Shopify</a>.
    </div>
    </div>

  </div>
</div>

<div id="tooltip"></div>
<img id="pointer" src="{{ 'arrow2.gif' | asset_url }}" />

</body>
</html>

出典・ライセンス

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

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

テーマの基本レイアウト

コード

出典・ライセンス

関連項目

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

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

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

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

基本的なHTMLレイアウト

layout タグのフォーマット