Try Hyper freeContact support

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:

  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

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.

Learn more

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

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.

1

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

  4. Save the definition.

2

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.

3

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.

Last updated