# Featured collection

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(19)_bcn0jB1k.jpg)

Featuring collections can help merchants promote sales and new collections. 

## How to add a Featured collection section to your Shopify store

<Hint type="success">

Steps:

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

</Hint>

## How to customize a Featured collection section

### Section settings

#### Section header

Customize the text and alignment to ensure the sectioneffectively communicates your message and encourages engagement.

<Expandable title="See settings">

* **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.
* **Description:** 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.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **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.

</Expandable>

#### Grid settings

* **Maximum products to show:**  Set the total number of products visible in the section (between 2 and 12).&#x20;
* **Number of columns on desktop** (between 2 and 6): Adjust the number of products displayed per row for desktop users.

![image](https://docs-assets.foxecom.app/hyper-theme/image_fA0ye6vU.png)

You can also control the suitable spacing between the product cards by selecting **Column gap** and **Row gap** options.

![image](https://docs-assets.foxecom.app/hyper-theme/image_KBg0WJK2.png)

#### Carousel settings

* **Enable carousel on desktop:** Toggle this option to display the products as a scrolling carousel.

Carousel shows only when the number of products is larger than the number of columns.

#### Product cards

* **Image ratio**: Select the aspect ratio for product images.
  * Use global settings
  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)

⭐ To set up other addons such as badges, buttons, etc. to the product cards, check out this article:

<PageLink href="https://docs.foxecom.com/hyper-theme/theme-settings/product-cards">Product cards</PageLink>

#### **Mobile layout**

You can adjust the **Number of columns on mobile** to **1 column** or **2 columns.**

<Tabs>
<Tab title="1 column">

![image](https://docs-assets.foxecom.app/hyper-theme/image_XL1XVbt1.png)

</Tab>

<Tab title="2 columns">

![image](https://docs-assets.foxecom.app/hyper-theme/image_tOJMEnA7.png)

</Tab>
</Tabs>

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile**.

<Hint type="info">

Use the swipe option for larger collections to save space while showcasing more products.

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_f0Diz5dZ.png)

### Block settings

![image](https://docs-assets.foxecom.app/hyper-theme/image_QosR5hJ5.png)

#### Collection

Select a **Collection** you want to display in the section.

Add a title for the block (e.g., “New Arrivals” or “Bestsellers”). Leave blank if you want to use the default collection title.

#### Banner

Enable the option **Show banner i**f you want to show a featured image at the beginning of the product list. Once enabled, upload an image and customize how it shows in the section.

<Tabs>
<Tab title="Show banner enabled">

![image](https://docs-assets.foxecom.app/hyper-theme/image_9dknh7BK.png)

</Tab>

<Tab title="Show banner disabled">

![image](https://docs-assets.foxecom.app/hyper-theme/image_0b7V9oY9.png)

</Tab>
</Tabs>

<Hint type="info">

Best practice: Ensure images and text are not overcrowded. Keep your blocks clean and minimalistic for better readability.

</Hint>