ページテンプレート
44 件のスニペット・リファレンス
ページテンプレート
Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。
リダイレクト
ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。
トップページの基本テンプレート
Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。
固定ページのテンプレート
Shopify 管理画面で作成した固定ページ（利用規約、プライバシーポリシーなど）を表示するテンプレート。ページタイトルと本文コンテンツを描画する。
ページの基本テンプレート
固定ページ（About など）の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。
固定ページのテンプレート
固定ページ（ポリシー、会社概要、利用規約など）の基本レイアウト。ページタイトルと本文を中央揃えで表示する。
404ページ
ページが見つからない場合に表示する 404 エラーページ。タイトル、説明文、ホームへ戻るボタンを中央配置で表示する。
ブログページのテンプレート
ブログの全記事を時系列で一覧表示し、各記事の作成日時、タイトル、本文、コメント数を描画するテンプレート。コメント機能が有効な場合はコメントリンクも出力する。
404エラーページ
ページが見つからないときに表示する404エラーテンプレート。訪問者に対して「ファイルが見つかりません」というメッセージを中央配置で伝える。
検索結果ページの商品一覧
検索結果を24件ずつページネーションで表示し、各商品をサムネイル・タイトル付きで一覧化する。最も深いカテゴリ階層へのリンクを自動抽出して、カテゴリページ内の商品アンカーに遷移させる。
フロントページの記事と商品ギャラリー
ホームページにフロントページ記事を表示し、その下にフロントページコレクションの商品を3列のギャラリーとして並べる。記事がない場合は作成を促すメッセージを出す。
コレクションページのレイアウト
コレクション内の商品をグリッド状に一覧表示するテンプレート。商品画像、タイトル、説明文、価格を表示し、20件ごとのページネーション機能を備える。
ブログ記事一覧ページ
ブログの全記事を一覧表示し、記事ごとにタイトル・作成日・著者・本文を出力するテンプレート。コメント機能が有効な場合はコメント数も表示し、ページネーション対応。
トップページの商品とページ内容
トップページ（Frontpage）に登録された商品と固定ページを表示するテンプレート。商品は画像、タイトル、価格（セール時は定価と売価を併記）を一覧表示し、ページ内容をその下に出す。
ブログ一覧ページ
ブログの記事一覧を20件ずつ分割表示するテンプレート。各記事のタイトル、投稿日、著者、本文抜粋、コメント数を表示する。
コレクションページの商品一覧表示
コレクション内の商品を表形式で一覧表示するテンプレート。商品画像、ブランド名、タイトル、価格、説明文を20件ごとにページネーションで表示する。
ブログ記事一覧ページ
ブログの全記事を時系列で一覧表示し、20件ごとにページネーションする。各記事には公開日と本文が表示される。
ブログ記事カード
ブログ一覧ページで使う記事カード。記事の画像、タイトル、タグ、作成日時、抜粋を表示し、セクション設定で各要素の表示・非表示を制御できる。
商品一覧ページのテンプレート
複数の商品リストを統合して、タイトル・説明・商品数・個別商品情報を HTML で出力するページテンプレート。配列の連結、条件分岐、ループ処理を含む基本的な Liquid の使用例。
検索結果ページ
検索フォームで入力されたキーワードに基づき、マッチした商品やページを一覧表示するテンプレート。検索が実行されていない場合は非表示、結果がない場合はメッセージを表示し、存在する場合はリスト形式で 10 件ずつペジネーション付きで出す。
カートページの商品一覧と数量更新
ショッピングカート内の商品を一覧表示し、数量入力欄と削除ボタンで直接管理するカートページテンプレート。小計とチェックアウトボタンも含む。
固定ページと売れ筋商品の表示
Shopify の固定ページ（about、contact 等）のテンプレート。ページのタイトルと本文を表示した後、frontpage コレクションの商品を商品カード形式でグリッド表示し、各カードから直接カートに追加できる構成。
404ページ（おすすめ商品表示付き）
ページが見つからない場合の 404 エラーページ。メッセージと共に、フロントページコレクションから商品一覧を表示し、ユーザーをサイト内の別ページへ導く。
カートページの商品一覧・チェックアウト
ショッピングカートが空のときはフロントページの商品を表示し、アイテムがあるときはカート内容を表形式で表示するカートページテンプレート。数量変更・削除・チェックアウトボタンを備える。
商品詳細ページ（レガシー実装）
商品画像のギャラリー、説明文、バリアント選択ドロップダウン、在庫状態に応じた購入ボタン制御を備えた商品詳細ページのテンプレート。MooTools ライブラリを使った JavaScript で動的なバリアント切替に対応している。
ブログ記事とコメント欄の表示
ブログ記事の本文と作成日、著者を表示し、ブログがコメント機能を有効にしている場合は既存コメント一覧とコメント送信フォームをまとめて描画するテンプレート。コメント送信後の成功メッセージやバリデーションエラー表示に対応。
商品詳細ページの基本レイアウト
商品画像ギャラリー、タイトル、ベンダー・タイプ情報、バリアント選択ドロップダウン、説明文を含む商品詳細ページの基本構成。バリアント選択時に価格と在庫状態をリアルタイム更新する。
コレクションページの商品一覧と pagination
コレクション内の商品をグリッド表示し、各商品カードに画像・説明・価格・カートボタンを配置するテンプレート。8件ごとにページネーション分割される。
ブログ記事ページのテンプレート
ブログ記事の本文、投稿日時、著者情報を表示し、コメント機能を備えたブログ記事ページのテンプレート。コメント投稿フォームのバリデーションと投稿完了メッセージに対応する。
ブログ記事の表示とコメント機能
ブログ記事のタイトル、本文、作成者、投稿日時を表示し、コメント機能を備えたテンプレート。ブログのコメント有効化設定に応じて、既存コメント一覧とコメント投稿フォームを条件付きで出す。
商品詳細ページのレイアウト
商品の画像、情報、バリアント選択、カート追加機能を一つのページに配置する従来型テンプレート。バリアント選択時に在庫状態と価格をリアルタイム更新する。
ブログ記事ページのテンプレート
ブログ記事の本文、メタ情報（投稿日）、コメント一覧、コメント投稿フォームを表示するテンプレート。ブログのコメント機能が有効な場合のみコメント欄をレンダリングする。
商品詳細ページテンプレート
商品のタイトル、説明、画像、バリアントセレクタ、カート追加ボタンを表示する商品詳細ページのテンプレート。バリアント選択時に在庫状態と価格を動的に更新する機能を持つ。
ホームページのカテゴリグリッド
メタオブジェクトで管理されたカテゴリ階層をホームページに表示するセクション。カテゴリ名の区切り文字（>）以降の部分を抽出し、サムネイル付きグリッドレイアウトで描画する。
ギフトカード購入後の表示ページ
ギフトカード購入後にメールで送られるページテンプレート。カード額面、コード、QR コード、Apple Wallet 登録ボタン、印刷機能をまとめて表示する。
パスワード保護ページ
Shopify のパスワード保護機能に対応した専用ページセクション。ロゴ、パスワード入力フォーム、ソーシャルアイコンを表示し、背景色と不透明度をカスタマイズできる。
ブログ記事の詳細表示
ブログ記事のタイトル、本文、作成者、タグを表示するセクション。記事画像の表示有無、アスペクト比、枠線スタイルを管理画面で調整できる。
カートページテンプレート
カートの商品一覧を表示し、数量変更・商品削除・チェックアウトに対応するカートページ。商品画像、バリアント情報、金額をカード形式で表示し、レスポンシブ対応で PC とモバイルの両環境で動作する。
ページコンテンツの背景・テキスト・間隔カスタマイズ
固定ページ（About、Contact など）のタイトルと本文を、背景色・テキスト色・ボーダー・余白をカスタマイザーから自由に調整できるセクション。ページごとに異なるスタイルを反映させられる。
ギフトカード受け取りページ
ギフトカード受け取り時の専用ページテンプレート。カード額面、残高、QR コード、カードコードをコピー可能な形式で表示し、ギフトカード購入者が受け取ったカード情報を確認・管理できる。
ブログページのヘッダー
ブログページの上部に表示するヘッダーセクション。背景画像とオーバーレイ、ブログタイトル、説明文を配置し、色・間隔・ボーダーをテーマカスタマイザーで調整できる。
お問い合わせフォーム
背景色・境界線などのスタイル調整に対応したお問い合わせフォームセクション。名前、メール、電話、メッセージの4項目を備え、ログイン顧客の情報を自動入力する。
ブログ記事一覧ページ
ブログの記事をグリッド状に一覧表示し、タグフィルタリングと記事数カウント機能を備えたセクション。Bootstrap の Offcanvas を使ったタグ検索パネルを実装している。
メディアとテキストの並列レイアウト
動画または画像とテキストを左右に並べるセクション。YouTube・Vimeo・アップロード動画、または画像を選択でき、背景色・枠線・ボタンを自由にカスタマイズできる。