Hyper Theme
Hyper Theme
Theme Sections

Collection cards

4 min read
image

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:

  1. In the theme editor (Customize), click Add section.
  2. Locate Collection cards section.
  3. Make necessary changes.
  4. Save.

How to edit a Collection cards section

Section settings

General

Section header

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.
image
  • Enable carousel on desktop: Allow horizontal swiping through collections when the number of collections exceeds the number of column on desktop.
image

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.
image

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

  1. Option to select a collection you want to feature.
  2. Upload a custom featured image for the collection.
image

Leave blank to show the collection's featured image.

image
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

  1. From your Shopify admin, go to Settings > Metafields and metaobjects > Collections.

  2. Click Add definition.

  3. Use the following details:

    • Name: Collection thumbnails (or any name you like)
    • Namespace and key: foxtheme.collection-thumbnails
    • Content type: File → Accepts: List of images
    image

  4. Save the definition.

Add images to collection

  1. Go to Products > Collections.
  2. Click on the collection you want to edit.
  3. Scroll down to the Metafields section.
  4. Upload 1–3 images to the metafield you just created.
image

View on the theme editor

  1. Open your theme editor (Online Store > Themes > Customize).
  2. Navigate to the Collection cards section.
  3. 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.

image
Last updated

Collapsible tabs

Previous Page

Collection list

Next Page

ON THIS PAGE

How to add a Collection cards section to your Shopify storeHow to edit a Collection cards sectionSection settingsGeneralSection headerLayout settingCarousel settingMobile layoutCard settingsBlock settings - Collection setupCustom thumbnail images 🔥

Was this helpful?