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.
Collections per row
Number of columns in a row, between 1- 4. A larger number will show a smaller collection card and vice versa.
Image next to text example
Background image example
No image example
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.
Here you can choose which image you'd like to show on the collection card.
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.
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
Color of the text on the card
Color of the slightly transparent overlay over the image.
Select the percentage of transparency you want to apply to the overlay color. A higher number is a more opaque/solid color.
(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.
|Name||Namespace and key||Content type|
|Collection card image||custom.collection_card_image||File (Image only)|
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.