{"product_id":"2026-04-09","title":"【Horizon】ページをブログのようにサムネイル付き一覧で表示する設定例","description":"\u003cp\u003eページをブログのようにサムネイル付きのグリッド一覧で表示する設定例です。テーマ本体のファイルを変更せず、カスタムLiquidブロックへのコード貼り付けだけで実装できます。表示順はコード先頭の設定変数で制御でき、指定したページを優先表示しつつ残りは名前順で並べることができます。\u003c\/p\u003e\n\u003cp\u003eページメタフィールドにサムネイル画像と除外フラグを定義しておくことで、各ページで個別に画像を設定したり一覧から非表示にしたりできます。\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003eページ一覧ページにサムネイル付きのカードグリッドが表示されます。Horizonテーマの \u003ccode\u003eresource-card\u003c\/code\u003e スタイルを活用しており、テーマのデザインと自然に馴染みます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"ページ一覧のサムネイル表示とShopify管理画面のページ一覧\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_1.png?v=1775730020\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法①】メタフィールド定義の追加\u003c\/h3\u003e\n\u003cp\u003eShopify管理画面の「設定 → カスタムデータ → ページ」から、以下の2つのメタフィールド定義を追加します。\u003c\/p\u003e\n\u003cp\u003e◆ サムネイル（\u003ccode\u003ecustom.thumb_nail\u003c\/code\u003e）\u003cbr\u003eタイプ: ファイル\u003c\/p\u003e\n\u003cp\u003e◆ 一覧から除外（\u003ccode\u003ecustom.excluded_from_list\u003c\/code\u003e）\u003cbr\u003eタイプ: 真または偽（ブーリアン）\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"ページのメタフィールド定義設定画面。thumb_nailはファイル型、excluded_from_listはブーリアン型\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_2.png?v=1775730023\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法②】各ページのメタフィールドを設定\u003c\/h3\u003e\n\u003cp\u003e各ページの編集画面からメタフィールドの内容を設定します。サムネイル画像をアップロードし、一覧に表示したくないページは「一覧から除外」を True にします。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"各ページのメタフィールド設定画面。サムネイル画像の設定と除外フラグの設定方法\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_3.png?v=1775730027\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定方法③】テンプレート作成＆カスタムLiquid設定\u003c\/h3\u003e\n\u003cp\u003eテーマエディタで新規ページテンプレートを作成し、「カスタムLiquid」ブロックを追加してコードを貼り付けます。\u003c\/p\u003e\n\u003cp\u003eコード先頭の \u003ccode\u003epriority_handles\u003c\/code\u003e に優先表示したいページのhandleをカンマ区切りで指定すると、そのページが先頭に並び、残りは名前順で続きます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"テーマエディタでカスタムLiquidブロックにコードを貼り付けた設定画面\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09_4.png?v=1775730033\" class=\"zoomable-image\" width=\"800\" height=\"540\" style=\"aspect-ratio: 1.48;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eDawn版はこちら: \u003ca href=\"\/products\/2023-04-04\"\u003eページをブログのようにサムネイル付き一覧で表示する設定例（Dawn）\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48671014289659,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-09.jpg?v=1775730059","url":"https:\/\/store-dojo.com\/products\/2026-04-09","provider":"STORE DOJO","version":"1.0","type":"link"}