# Featured collection

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FhS3us0hhFxakMk8khqBm%2FHyper%20docs%20screenshot%20do%20not%20delete%20(19).jpg?alt=media&#x26;token=580137d9-2daa-4586-addb-43ded529f374" alt=""><figcaption></figcaption></figure>

Featuring collections can help merchants promote sales and new collections.&#x20;

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

{% hint style="success" %}
Steps:

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

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

<details>

<summary>See settings</summary>

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

</details>

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

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/3Y357T6BZGO3xXWkFpiO/image.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/pIJAiWDptn0HdfTd32Zh/image.png" alt=""><figcaption></figcaption></figure>

#### 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)

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

{% content-ref url="../theme-settings/product-cards" %}
[product-cards](https://docs.foxecom.com/hyper-theme/theme-settings/product-cards)
{% endcontent-ref %}

#### **Mobile layout**

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

{% tabs %}
{% tab title="1 column" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FwRbugz27EGVHYzx0Je0R%2Fimage.png?alt=media&#x26;token=9dacf338-55f5-4e7a-9fbe-564189f10260" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 columns" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FZrCLOSSlbmsIOxqgrT4x%2Fimage.png?alt=media&#x26;token=4ccd98a5-5de4-4dea-836c-c4f852b71933" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% hint style="info" %}
Use the swipe option for larger collections to save space while showcasing more products.
{% endhint %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxIkc9u7VURUNi2b0Xahf%2Fimage.png?alt=media&#x26;token=cb2d7f08-b39b-4c26-9b2f-aa61693982db" alt=""><figcaption></figcaption></figure>

### Block settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxId4o2yT6sj3U0gxTNNh%2Fimage.png?alt=media&#x26;token=e8ed3757-1b8d-456b-88d3-cc4b55418a8b" alt=""><figcaption></figcaption></figure>

#### 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" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fxkr7aE5xJbV1ke6p5fin%2Fimage.png?alt=media&#x26;token=6702a5e4-c0c8-4f9d-ab71-d6ae9f973093" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Show banner disabled" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FnUDwHcjPeKQRfroTJ5f2%2Fimage.png?alt=media&#x26;token=e48f4056-6e41-425a-bcf6-9bcf8c06fd21" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Best practice: Ensure images and text are not overcrowded. Keep your blocks clean and minimalistic for better readability.
{% endhint %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>