# Collection cards
_Fo6vrNct.jpg)
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
* **Color scheme**: Choose a theme color preset. [Learn more →](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
#### Section header
* **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](https://docs.foxecom.com/hyper-theme/faqs/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](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.
💡 **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.
### 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.
### 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.
### 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.
