This is an example of how to display all thumbnail images on a mobile screen in a grid layout instead of a carousel.
Although the product description and purchase button will be pushed down to the bottom of the screen, this is useful if you want customers to see as many product images as possible at once.
◆ Benefits of implementation ・Product images can be easily viewed in a list ・Users can easily compare images ・Swipe operation is no longer required, improving usability
◆Specific procedure setting method ①
Add schema to "sections/main-product.liquid".
Added a label to "locales/ja.schema.json".
Setting method ②
Add custom code to "sections/main-product.liquid" and "snippets/product-media-gallery.liquid".
How to use: Select "Display thumbnails in grid" in the mobile layout.
Example of settings to display "thumbnails" in the mobile layout of the product details for the theme "Dawn/Rise" in "grid" format in addition to "carousel" format.
[(For the Rise/Dawn theme) Setting method ①] Add the schema to "sections/main-product.liquid" and the label to "ja.schema.json"
[(For the Rise/Dawn theme) Setting method ②] Add the code to "sections/main-product.liquid, snippets/product-media-gallery.liquid"
[(For Rise/Dawn Themes) Operation Method] Select "Display thumbnails in a grid" in the mobile layout (you can also change the number of columns to display)
