Collection list

Steps to add the Collection list section:

1. In your Shopify admin dashboard, go to Online Store > Themes.
2. Choose the theme you want to edit and click on the Customize button.
3. Click on the arrow down next to Home page↓and select a template you want your Collection list section to add to. 
4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
5. Scroll down, or search for Collection list, then click on Collection list. 
6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Collection list section.

Collection list controls

1. Heading - The title of the section.
2. Heading size - Change the size of the heading text. Choose between small, medium, large, or extra large.
3. Heading alignment - Choose the alignment of the section heading. Options are left, center, or right.
4. Image ratio - The image ratio for the featured images of the collections:
• Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
• Portrait - Crops the images to use a 2:3 ratio.
• Square - Crops the images to use a 1:1 ratio.
5. Content floating - If checked, the collection title will be displayed directly on the image.
6. Number of columns on desktop - Number of columns to display on desktop computers. Minimum: 1. Maximum: 4.
7. Enable "View all" button if list includes more collections than shown - Displays a "View all" button that takes the customers to the full list of collections.
8. Button style - Choose the style of the button.

Slider controls

1. Slider options - Choose whether you want to display a slider for Mobile only or Mobile and desktop.
2. Navigation (arrows) - If clicked, arrows will be shown as slider controls.
3. Pagination (dots) - If clicked, dots will be shown as slider controls.

Section padding

1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
2. Read more about Custom CSS.

Steps

1. Find the Collection list section you added and customized following the steps above.
2. Click + Add collection underneath.
3. Once you add a collection, click on it to see additional block customization options.
4. (Optional) Click and hold the drag-and-drop handles ⋮⋮    to re-order your collections.

Collection controls

1. Collection - Click Select collection and choose a collection you wish to display.
2. Show product count - If checked, the product count for the collection will be displayed next to the collection name.

Custom content

This content will display only if the collection above is not selected.

1. Image - The image that will be shown for the collection block. Accepts dynamic sources.
2. Heading - The title of your custom collection block. Accepts dynamic sources.
3. URL - Make the collection clickable by inserting a URL or connecting to a dynamic source.
4. Heading size - Choose between Small, Medium, Large, or Extra Large.