モバイル画面で表示されるサムネイル画像のレイアウトを「カルーセル」ではなく、すべてグリッドに並べた状態で表示できるようにする設定例です。
商品説明や購入ボタンは画面の下の方に押し下げられてしまいますが、なるべく多くの商品画像を一気に見てもらいたい場合などに有効です。
◆実装のメリット
・商品画像を一覧で確認しやすい
・ユーザーが画像を比較しやすい
・スワイプ操作が不要になり操作性向上
◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。
設定方法②
「sections/main-product.liquid」「snippets/product-media-gallery.liquid」にカスタムコードを追加。
運用方法
モバイルのレイアウトで「サムネイルをグリッド表示する」を選択。
テーマ「Dawn/Rise」商品詳細のモバイルレイアウトの「サムネイル」を「カルーセル」以外に「グリッド（格子状）」でも表示できるようにする設定例
【（テーマRise/Dawnの場合）設定方法①】「sections/main-product.liquid」にschemaを、「ja.schema.json」にラベルを追加
【（テーマRise/Dawnの場合）設定方法②】「sections/main-product.liquid、snippets/product-media-gallery.liquid」にコードを追加
【（テーマRise/Dawnの場合）運用方法】モバイルのレイアウトで「サムネイルをグリッド表示する」を選択する（表示するカラム数の変更も可能）
