# 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.
{% hint style="info" %}
The **Collection cards** section plays as visual cards, each featuring:
* Collection thumbnail image
* First 3 collection products
* Collection title
* Item count
* Shop button
{% endhint %}
## How to add a Collection cards section to your Shopify store
{% hint style="success" %}
Steps:
1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Collection cards** section.
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Collection cards section
### Section settings
#### General
* **Color scheme**: Choose a theme color preset. [Learn more →](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
#### 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.
:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
* **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.
{% hint style="info" %}
:bulb: **Tip**: Product counts help customers understand the size of each collection and can influence their browsing decisions.
{% endhint %}
### Block settings - Collection setup
{% hint style="success" %}
Each block includes
1. Option to **select a collection** you want to feature.
2. Upload a **custom featured image** for the collection.
{% endhint %}
{% hint style="success" %}
Leave blank to show the collection's **featured image.**
{% endhint %}
{% hint style="success" %}
or if that collection doesn't have a featured image, the card will take the **first product's image**.
\
{% endhint %}
{% hint style="success" %}
Give the collection a custom title or leave it blank to use the default name.
{% endhint %}
#### Custom thumbnail images :fire:
{% hint style="info" %}
By default, the collection card displays **first 3 products** of each collection as thumbnail previews.
{% endhint %}
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.
{% stepper %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% endstepper %}
***
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/hyper-theme/theme-sections/collection-cards.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg?alt=media&token=74e7846e-8cda-4a8d-965c-386f313807e7)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)