商品情報にスキップ
1 1
公開日:2026.01.04

Shopifyのテーマ「Rise/Dawn」のコレクションページや特集セクションで商品ごとに指定した商品サムネイルを表示できるようにする設定例

Shopifyのテーマ「Rise/Dawn」のコレクションページや特集セクションで商品ごとに指定した商品サムネイルを表示できるようにする設定例

用途

  • コレクション情報管理・編集

実装方法

  • LIQUID
詳細を表示する

商品画面のトップ画像と、一覧画面で表示する画像を意図的に変えておきたいというリクエストをいただくことがあります。そこで、「コレクション」や「特集コレクション」などの商品一覧画面で、トップ画像以外に指定したサムネイル画像を商品ごとに表示する方法です。

◆実装のメリット
・一覧画面に表示する商品画像を個別に指定できるため、柔軟な商品訴求が可能です。
・商品メタフィールドを使って簡単に設定できるので、運用コストを低く抑えることができます。

◆具体的な手順
①表示するサムネイルを指定するための商品メタフィールドを作成
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加


テーマ「Rise/Dawn」のコレクションページや特集セクションで商品ごとに指定した商品サムネイルを表示できるようにする設定例


【設定方法①】表示するサムネイルを指定するための商品メタフィールドを作成


【(テーマRise/Dawnの場合)設定方法②】「snippets/card-product.liquid」のコードを編集


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「snippets/card-product.liquid」のコードを編集

関連ポスト

すべてのShopify TIPS