Collection cards
Showcase your product collections in an attractive, organized grid layout. This section is perfect for creating a "Shop by Category" area on your homepage or collection pages.
The Collection cards section plays as visual cards, each featuring:
Collection thumbnail image
First 3 collection products
Collection title
Item count
Shop button
How to add a Collection cards section to your Shopify store
Steps:
In the theme editor (Customize), click Add section.
Locate Collection cards section.
Make necessary changes.
Save.
How to edit a Collection cards section
Section settings
General
Color scheme: Choose a theme color preset. Learn more →
Section header
See settings
Text alignment:
Align the text in the section to the Left, Center, or Right.
Adjust alignment based on your banner’s design and layout.
Text alignment on mobile: Override desktop alignment settings specifically for mobile devices if needed.
Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
Heading: Enter the primary title for your banner.
Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
✍️ Add Highlighted text to your Headings
Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.
Description size: Select the size of the description text.
Layout setting
Number of column on desktop: Set how many collection cards display per row on desktop.
Column gap and Row gap: Control spacing between cards and rows separately.
Carousel setting
Enable carousel on desktop: Allow horizontal swiping through collections when the number of collections exceeds the number of column on desktop.
Mobile layout
Set the number of columns on mobile as 1 column/ 2 columns.
Enable swipe on mobile to swipe through the collections on mobile.
Card settings
Color scheme: Select a pre-defined set of colors used for the collection cards of the section.
Image ratio: Set the aspect ratio for collection images (both the collection's featured images and product images).
Show product count: Toggle on to display the number of items in each collection under the collection title.
💡 Tip: Product counts help customers understand the size of each collection and can influence their browsing decisions.
Block settings - Collection setup
Each block includes
Option to select a collection you want to feature.
Upload a custom featured image for the collection.
Leave blank to show the collection's featured image.
or if that collection doesn't have a featured image, the card will take the first product's image.
Give the collection a custom title or leave it blank to use the default name.
Custom thumbnail images 🔥
By default, the collection card displays first 3 products of each collection as thumbnail previews.
However, if you want more control over which images appear as thumbnails, you can set custom thumbnail images using metafields.
This is especially helpful when:
Your first 3 products don’t reflect the collection well.
You want to highlight bestsellers or curated visuals.
Create a metafield definition
From your Shopify admin, go to Settings > Metafields and metaobjects > Collections.
Click Add definition.
Use the following details:
Name: Collection thumbnails (or any name you like)
Namespace and key:
foxtheme.collection-thumbnailsContent type: File → Accepts: List of images
Save the definition.
View on the theme editor
Open your theme editor (Online Store > Themes > Customize).
Navigate to the Collection cards section.
You’ll see the new thumbnail images appear on the right side of the collection card.
🎯 If the metafield is empty, the section will fall back to using the first 3 products in the collection.
Last updated