This section allows you to show a list of collection. It is usually located on Home Page. However, Shopify 2.0 allows you to add Collection list to any pages that you want. From Theme Custom > Go to Add section > Search and add Collection list.
1. Collection List Configuring
1.1. Title Settings
- You are allowed to enter Heading and Subtitle for Collection list. Moreover, you also can change font for subtitle by clicking on Sub Text use font.
- Title design: There are totally 12 title designs.
- Style 7 icon line-awesome: Enter a name of icon that you want to add. Go Line awesome to get more icons.
1.2. General settings
- Layout design: You can choose among Grid and Slider.
- Enable zoom image on hover? This option allows you to enable/disable zooming when you hover on images.
- Collection Designs: There are totally 8 collection designs.
- This section also allows you to change Space between collections, Aspect Ratio and adjust Collections columns(Desktop, Table, Mobile). Please visit this link learn more about the configured Aspect Ratio on the section.
- Products Text: This option allows you to change quantity text under the Collection titles. It only works for design collection 5 and 7.
- Use loop: At the end of cells, wrap-around to the other end for infinite scrolling.
- Auto play speed in second: You can set the automatically time move on to the next slider. Set is ‘0’ to disable auto play.
- Visible: You can choose between Always/ Only hover.
- Besides, you can choose different styles and colors for Prev/Next buttons.
- Enable Page dot:
- You also can choose different styles and colors for Page dot.
- Layout: You can choose between Container and Full width. Besides, you can also choose background color for layout.
- Margin, Padding: You are allowed to change both of them.
- Margin, Padding: You are allowed to change both of them for mobile devices.
2. Collection List Item Configuring
You can add a maximum of 16 Collection blocks. This block allows you to add a collection, image, title, link and adjust Image Alignment.
This video below is an example of how section works after you’ve made all of the necessary changes.