Liquid Snippets by ALSEL
📄 ページテンプレート初級

フロントページの記事と商品ギャラリー

ホームページにフロントページ記事を表示し、その下にフロントページコレクションの商品を3列のギャラリーとして並べる。記事がない場合は作成を促すメッセージを出す。

用途
Shopify のデフォルトホームページテンプレートとして、紹介文と商品サムネイルを1ページで見せたいとき。
設置場所
templates/index.liquid に配置。Shopify 管理画面で「ページ」メニューからハンドル `frontpage` のページを作成し、「コレクション」メニューからハンドル `frontpage` のコレクションに商品を追加すると自動的に反映される。
注意点
pages.frontpage と collections.frontpage という2つのハンドルが前提になるため、管理画面で両方を明示的に作成して正しいハンドル名を付けることが必須。tablerow タグで3列表示しているが、狭いスクリーン幅では商品カードが重なるため、CSS で cols 値をメディアクエリで切り替えるとよい。商品説明の truncate: 50 は文字数制限であり、日本語では1文字が半角2文字分に相当するため、必要に応じて 25 程度に調整する。
タグ:homefrontpageproduct-gallerycollectionpage

コード

23 行 / liquid
  <div id="about-excerpt">
    {% assign article = pages.frontpage %}
    {% if article.content != "" %}
      <h2>{{ article.title }}</h2>
      {{ article.content }}
    {% else %}
      In <em>Admin &gt; Blogs &amp; Pages</em>, create a page with the handle <strong><code>frontpage</code></strong> and it will show up here.<br />
      {{ "Learn more about handles" | link_to: "http://wiki.shopify.com/Handle" }}
    {% endif %}
  </div>

  <table id="gallery">
  {% tablerow product in collections.frontpage.products cols: 3 limit: 12 %}
    <div class="gallery-image">
      <a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title | escape }} &mdash; {{ product.description | strip_html | truncate: 50 | escape }}"><img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a>
    </div>
    <div class="gallery-info">
      <a href="{{ product.url | within: collections.frontpage }}">{{ product.title | truncate: 30 }}</a><br />
      <small>{{ product.price | money }}{% if product.compare_at_price_max > product.price %} <del>{{ product.compare_at_price_max | money }}</del>{% endif %}</small>
    </div>
  {% endtablerow %}
  </table>

出典・ライセンス

License:
MIT

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

関連項目

📄 ページテンプレート初級

ページテンプレート

Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。

📁 liquid·MIT·5
📄 ページテンプレート初級

リダイレクト

ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。

📁 shopify-headless-theme·MIT·7
📄 ページテンプレート初級

トップページの基本テンプレート

Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。

📁 liquid·MIT·7
📄 ページテンプレート初級

固定ページのテンプレート

Shopify 管理画面で作成した固定ページ(利用規約、プライバシーポリシーなど)を表示するテンプレート。ページタイトルと本文コンテンツを描画する。

📁 mcliquid-theme·MIT·8
📄 ページテンプレート初級

ページの基本テンプレート

固定ページ(About など)の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。

📁 liquid·MIT·9
📄 ページテンプレート初級

固定ページのテンプレート

固定ページ(ポリシー、会社概要、利用規約など)の基本レイアウト。ページタイトルと本文を中央揃えで表示する。

📁 ks-bootshop·MIT·10