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

トップページの商品とページ内容

トップページ(Frontpage)に登録された商品と固定ページを表示するテンプレート。商品は画像、タイトル、価格(セール時は定価と売価を併記)を一覧表示し、ページ内容をその下に出す。

用途
Shopify テーマのトップページ(index.liquid)として使用。フロントページコレクションの商品を紹介し、店舗情報やプロモーション文を表示したいとき。
設置場所
templates/index.liquid に配置する。Shopify 管理画面で「オンラインストア > ページ」から「frontpage」というハンドルを持つページを作成し、「products > frontpage」コレクションに商品を追加する。
注意点
比較価格(compare_at_price)が設定されていないと「Now:」価格のみ表示される。セール表示を活用するには管理画面で各バリアントの比較価格を入力しておく必要がある。frontpage ページが作成されていない場合、画面下部に設定ガイドが表示される。product_img_url: 'small' は古いフィルター形式なので、モダンテーマでは image_url フィルターへの置き換えを検討する。
タグ:frontpageproductcollectionpricepage-content

コード

33 行 / liquid
<div id="home-page">
  <h3 class="heading-shaded">Featured products...</h3>
  <div class="featured-prod-row clearfix">
    {% for product in collections.frontpage.products %}
      <div class="featured-prod-item">
          <p>
        <a href="{{product.url}}"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}"/></a>
        </p>
        <h4><a href="{{product.url}}">{{product.title}}</a></h4>
        {% if product.compare_at_price %}
          {% if product.price_min != product.compare_at_price %}
            <p class="prd-price">Was:<del>{{product.compare_at_price | money}}</del></p>
            <p class="prd-price"><ins>Now: {{product.price_min | money}}</ins></p>
          {% endif %}
        {% else %}
          <p class="prd-price"><ins>{{product.price_min | money}}</ins></p>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  <div id="articles">
    {% assign article = pages.frontpage %}
    {% if article.content != "" %}
      <h3>{{ article.title }}</h3>
      {{ 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>
</div>

出典・ライセンス

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