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

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

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

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
詳細を表示する

トップページなどで一定数の商品をリスト表示するために使用する特集コレクションセクションで、最初の商品画像ではなく、指定した番号の商品画像を表示させる方法です。
一定の順番ルールで商品カラーバリエーション画像などを登録しているストアで、特定のカラーに絞って表示させる際に使用したりすることができます。

◆実装のメリット
・同じ商品を扱いつつ、複数の特集コレクションごとに異なる画像を指定できるため、柔軟な商品訴求が可能です。
・テーマエディタから簡単に設定できるので、運用コストを低く抑えることができます。

◆具体的な手順
①sections/featured-collection.liquidにschemaを、ja.schema.jsonにラベル追加し、snippets/card-product.liquidを参照する際に表示番号用の引数を追加
②snippets/card-product.liquidに商品画像を指定されたものに切り替える処理を追加
③テーマエディタで特集コレクションセクションを追加し、表示させたいサムネイル番号を指定


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


【(テーマRise/Dawnの場合)設定方法①】「sections/featured-collection.liquid」にschemaを、「ja.schema.json」にラベルを追加し「sections/featured-collection.liquid」に引数を追加


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


【(テーマRise/Dawnの場合)設定方法③】テーマエディタで特集コレクションセクションを追加し、表示させたいサムネイル番号を指定


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

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

サンプルコード

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

「sections/featured-collection.liquid」にschemaを追加

「ja.schema.json」にラベルを追加

「sections/featured-collect...

関連ポスト

すべてのShopify TIPS