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

Shopifyのテーマ「Rise/Dawn」のコレクションページに在庫数(バリアントがある商品はその合計在庫数)を表示する設定例

Shopifyのテーマ「Rise/Dawn」のコレクションページに在庫数(バリアントがある商品はその合計在庫数)を表示する設定例

用途

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

実装方法

  • LIQUID
詳細を表示する

Rise/Dawnテーマのコレクションページに商品の総在庫数を表示します。(バリアントがある商品は合計在庫数を表示)
Liquidコードの編集を行い、コレクションテンプレートの設定項目でON/OFFできます。

--------

◆実装のメリット
・在庫状況の可視化による購買意欲促進
・コレクション単位での表示/非表示切り替え

◆具体的な実装手順
①商品グリッドセクションの設定追加
・schema設定に在庫表示用のチェックボックスを追加
・バリアント在庫の合計計算ロジックを実装
・表示用のHTML/Liquid追加

②コレクションテンプレートの作成
・既存テンプレートを複製
・在庫表示設定をONに変更
・対象コレクションに新テンプレートを適用


Shopifyのテーマ「Rise/Dawn」のコレクションページに在庫数(バリアントがある商品はその合計在庫数)を表示する設定例


【(テーマRise/Dawnの場合)設定方法①】コレクションテンプレートの商品のグリッドセクション「sections/main-collection-product-grid.liquid」にschemaを「ja.schema.json」にラベルを追加


【(テーマRise/Dawnの場合)設定方法②】「sections/main-collection-product-grid.liquid」「snippets/card-product.liquid」にコードを追加


【(テーマRise/Dawnの場合)設定方法③】コレクションテンプレートを複製して在庫表示をONにし、在庫を表示したいコレクションに設定


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

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

サンプルコード

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

「sections/main-collection-product-grid.liquid」にschemaを追加

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

「sections/main-collection-product-grid.liquid」にコードを追加

すべてのShopify TIPS