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

Shopifyのテーマ「Dawn」の特集コレクションセクション&コレクションテンプレートでモバイルでの列数を3列表示対応にする方法

Shopifyのテーマ「Dawn」の特集コレクションセクション&コレクションテンプレートでモバイルでの列数を3列表示対応にする方法

用途

  • コレクション編集

実装方法

  • LIQUID
詳細を表示する

Shopifyのテーマ「Dawn」でモバイル画面の表示列数は標準で1列か2列のどちらかを選択できますが、少し手を加えて3列表示も可能にする方法です。


テーマ「Dawn」の特集コレクションセクション&コレクションテンプレートでモバイルでの列数を3列表示対応にする方法


【設定手順①:商品グリッドセクション】「main-collection-product-grid.liquid」にschemeを、「ja.schema.json」にラベルを追加


【設定手順②:特集コレクションセクション】「featured-collection.liquid」にschemeを、「ja.schema.json」にラベルを追加


【設定手順③】base.cssを修正


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

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

サンプルコード

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

「main-collection-product-grid.liquid」featured-collection.liquid」にschemeを追加


「ja.schema.json」の2箇所にラベルを追加


base.cssにスタイルを追加(その1)

関連ポスト