Collections list

Collections list can be found as a section or as a page. The page lists all collections in the store. The Collection list section can hold up to 16 collections. Below are the settings that are shared between both, followed by the settings specific to each.

Settings

Collections per row

Number of columns in a row, between 1- 4. A larger number will show a smaller collection card and vice versa.

Collection card

Card style

Image next to text example

Background image example

No image example

Title size

Select a size for the collection title in the card

Show collection item count

Check this box to show how many items are in the collection underneath the collection title.

Image

Here you can choose which image you'd like to show on the collection card.

Featured image

This is the collection image. If one does not exist on the collection, then the featured image of the first product in that collection will show. If there is no image on that product, then the background placeholder color/gradient will show.

First product image

The featured image on the first product in the collection. If there is no image on that product, then the background placeholder color/gradient will show.

Custom image

Create a custom metafield on collections where you can upload a new photo to use. See the bottom of this page for detailed instructions on how.

Background image settings

These settings only apply if you select a background image card style

Font color

Color of the text on the card

Overlay color

Color of the slightly transparent overlay over the image.

Overlay opacity

Select the percentage of transparency you want to apply to the overlay color. A higher number is a more opaque/solid color.

Section spacing

(Whisk 5.0.0 and above)

Adjust top and bottom padding within the section.

Add space above or below

(Whisk 4.3.1 and below)

Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.

How to add a custom collection card image to collections using metafields

Step 1: Add a new image metafield to collections

The metafield you create needs to be named and setup exactly as described and named below in order to work correctly. Click into the "Add definition" button to start. 

Step 2: Upload an image to collections

Step 3: Select "Custom image" as the image for your collection card

In the theme editor, select "Custom image" as the image for your collection card in the section that you want to use it on.