📄 ページテンプレート中級
固定ページと売れ筋商品の表示
Shopify の固定ページ(about、contact 等)のテンプレート。ページのタイトルと本文を表示した後、frontpage コレクションの商品を商品カード形式でグリッド表示し、各カードから直接カートに追加できる構成。
用途
About ページや規約ページなど固定コンテンツの下部に、売れ筋商品や関連商品をリスト表示させたいとき。商品カード内のフォームで「カートに追加」ボタンを置く。
設置場所
templates/page.liquid に配置する。frontpage コレクションのハンドルと、カート追加先の URL(/cart/add)がテーマ設定と一致していることを確認してから適用する。
注意点
frontpage コレクションが Shopify 管理画面で作成・公開されていることが前提。バリアント表示部分が `display: none` で隠れているため、デフォルトではラジオボタンが見えず、最初のバリアント(forloop.first)が自動選択される。スタイルを修正してからバリアント選択を実装する必要がある。product.featured_image がない商品ではエラーになるため、画像チェック(`if product.featured_image`)を加えて空画像は代替画像に切り替える。
コード
57 行 / liquid <div id="page" class="innerpage clearfix">
<div id="text-page">
<div class="entry">
<h1>{{page.title}}</h1>
<div class="entry-post">
{{page.content}}
</div>
</div>
</div>
<h1>Featured Products</h1>
<ul class="item-list clearfix">
{% for product in collections.frontpage.products %}
<li>
<form action="/cart/add" method="post">
<div class="item-list-item">
<div class="ili-top clearfix">
<div class="ili-top-content">
<h2><a href="{{product.url}}">{{product.title}}</a></h2>
<p>{{ product.description | truncatewords: 15 }}</p>
</div>
<a href="{{product.url}}" class="ili-top-image"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}"/></a>
</div>
<div class="ili-bottom clearfix">
<p class="hiddenvariants" style="display: none">{% for variant in product.variants %}<span><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} /><label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label></span>{% endfor %}</p>
<input type="submit" class="" value="Add to Basket" />
<p>
<a href="{{product.url}}">View Details</a>
<span>
{% if product.compare_at_price %}
{% if product.price_min != product.compare_at_price %}
{{product.compare_at_price | money}} -
{% endif %}
{% endif %}
<strong>
{{product.price_min | money}}
</strong>
</span>
</p>
</div>
</div>
</form>
</li>
{% endfor %}
</ul>
</div>
<!-- end page -->
出典・ライセンス
- Repository:
- https://github.com/Shopify/liquid
- 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 行