Collection list and grid

You can feature groups of collections on your home page by adding the Collection List and Collection Grid sections. Using the section settings you have the ability to customize up the width, spacing, collections per row and visual appearances.

The Collection List section shows your collections using margins and spacing with the collection titles displayed below the image. The Collection Gallery section displays a tight, margin-less grid of collections with the title overlaid on top of the image.

Both the Collection List and Collection grid will use the featured image you uploaded in the Shopify admin. If a collection's featured image is not found the sections will load in the image of the first product in the collection.

Layout Options

Expand full width - If checked, the grid or list will expand the full browser width. Unchecked, it will be limited to the 1180px site width.
Show spacing around section - If checked, the grid or list will add vertical spacing above and below the section. It is helpful to uncheck this option if you want the collections to appear directly next to another section on the homepage.
Show spacing around images - If checked, the collections will have spacing between each collection. Unchecked, the collections will appear as a seamless grid.
Collections per row - Choose between 2, 3 and 4 collections to be shown per row. At mobile device widths the collections will be vertically stacked.

Text and Overlay Options

Text placement - Choose if the collection title should be displayed below the image or on top of the image as an overlay.
Colors - If you are using the Over image text placement it might be helpful to set a tinted overlay color on top of the image to give the text more contrast for readability. Additionally you can set the color the overlay will be when you hover over the collection.
Image overlay opacity - Choose the level of opacity (0% to 100% opaque) to control how much the overlay and overlay hover tints the images.
Enable rollover zoom - If checked, a subtle zoom effect is applied when you roll over the images.

Content

Under the Content heading click Add collection to create a new collection block. In the block settings you can choose which collection to load in.

For best results, all collection images should be identical sizes or ratios. One recommended size that would work well for most shops would be 640 x 450px JPG.