Skip to product information
1 of 1
Published:2024.11.23

Example of setting to allow the "Number of columns to display thumbnail images" to be specified as any number other than four on the desktop screen of the Shopify theme "Dawn/Rise" product details

Example of setting to allow the "Number of columns to display thumbnail images" to be specified as any number other than four on the desktop screen of the Shopify theme "Dawn/Rise" product details

Applications

  • Product information management and editing

How to implement

  • LIQUID
  • HTML/CSS
View full details

This is a setting method that allows you to change the number of columns of thumbnail images displayed on the desktop screen to any number other than four.
By default, it is fixed at four columns, but you may want to display as many as possible (or as few as possible) per column, and you can change this depending on the products you handle.

◆ Implementation benefits ・Optimal display according to screen size is possible ・Easy design adjustment to match brand image

◆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"

How to useWhen the desktop layout is "Thumbnail" or "Thumbnail Carousel", you can adjust the thumbnail display according to the number of columns you set.


Example of setting to allow the number of columns of thumbnail images to be specified as any number other than four on the desktop screen of the product details for the theme "Dawn/Rise"


[(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"


[(For Rise/Dawn Themes) Operation Method] When the desktop layout is "Thumbnail" or "Thumbnail Carousel", specify the number of columns of thumbnails.


After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Dawn/Rise 15.2.0

Add schema to "sections/main-product.liquid"

Add a label to "ja.schema.json"

Add the code to "sections/main-product.liquid"