> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/featured-collection.md).

# Featured collection

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Featured Collection** section lets you showcase products from a selected Shopify collection on your store. It's an excellent way to highlight new arrivals, best sellers, seasonal collections, or promotional products and encourage customers to explore and purchase.

Products are automatically pulled from the selected collection, so any changes you make to the collection in Shopify are reflected in this section.

#### When Should I Use This Section?

Use the **Featured Collection** section when you want to:

* Showcase your best-selling products.
* Highlight a newly launched collection.
* Promote seasonal or limited-time products.
* Feature products on your homepage or landing pages.
* Encourage customers to browse a specific product category.

{% hint style="info" %}
**Recommendation Size**\
Product image size: 1000x1500
{% endhint %}

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

1. Open **Online Store → Themes → Customize**.
2. Click **Add section**.
3. Select **Featured Collection**.
4. Configure the section layout and display settings.
5. Choose the Shopify collection you want to feature.
6. Adjust the number of products and columns displayed.
7. Customize the heading, colors, and optional View All button.
8. Save your changes.
   {% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Choose how products are displayed within the section.</p><ul><li><strong>Grid</strong> – Standard product grid layout.</li><li><strong>Compact</strong> – A tighter layout, showing up to four columns.</li><li><strong>Full Width on Right Side</strong> — Displays the section heading and optional description on the left while showcasing the featured collection in a wider product slider on the right.</li></ul></td></tr><tr><td>Heading</td><td><p>Displays the main title above the product collection. </p><p></p><p>Use a short, descriptive heading that tells customers what products they are viewing.</p></td></tr><tr><td>Description</td><td><p>Displays optional text below the heading. </p><p></p><p>Use this area to introduce the collection or promote a campaign.</p></td></tr><tr><td>Heading position</td><td><p>Controls where the heading appears.</p><p>Customization of the "Heading position" in this section is as follows:</p><ul><li><strong>Next to the cards</strong> — heading beside the product grid</li><li><strong>Top</strong> — heading above the products</li></ul><p>When the position is set to "Next to the cards", the slider arrows will remain at the bottom. </p><p>For visual guide show <a href="#heading-position"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Collection</td><td><p>Select the Shopify collection whose products will be displayed in this section. </p><p></p><p>Products update automatically whenever the selected collection changes.</p></td></tr><tr><td>Product display limit</td><td><p>Select the maximum number of products displayed from the selected collection.</p><p></p><p>You can show a minimum of “2” and a maximum of “10” products.</p></td></tr><tr><td>Desktop view columns</td><td><p>Controls how many product cards are visible at the same time on desktop devices.</p><p></p><p>More columns display additional products, while fewer columns create larger product cards. </p><p></p><p> You can show a minimum of “3” and a maximum of “5” products.</p></td></tr><tr><td>Color</td><td><p>Select a predefined color scheme for the section background, headings, buttons, and product cards to match your store branding.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>View all button</td><td><p><strong>Enable view all button</strong><br>Displays a button that links customers to the selected collection page, allowing them to browse every product in that collection.</p><p></p><p><em><strong>Recommendation:</strong> Enable this option whenever your collection contains more products than are displayed in the section.</em><br><br><strong>Label</strong><br>Sets the text displayed on the button. </p><p>Choose a short and descriptive label that encourages customers to browse the complete collection. </p><p></p><p>For visual guide show <a href="#view-all-button">screenshot</a></p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/bzgIC6Mu5HkeVxKqTK2m" alt=""><figcaption></figcaption></figure></div>

## Section settings screenshot

#### Heading position

<div data-with-frame="true"><figure><img src="/files/ukZBMklJYavYVi9IW7IN" alt=""><figcaption><p><strong>Heading position — Top</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/TrLHlOTqcB66E41ofwQy" alt=""><figcaption><p><strong>Heading position — Next to the card</strong></p></figcaption></figure></div>

#### View all button

<div data-with-frame="true"><figure><img src="/files/bNqU5nmY9WHs4YEL6shq" alt=""><figcaption><p><strong>View All Button</strong></p></figcaption></figure></div>

## Best Practices

✔ Display **4–8 products** to keep the section visually appealing.

✔ Use descriptive headings such as **New Arrivals**, **Best Sellers**, or **Summer Collection**.

✔ Add a short description to introduce the featured products.

✔ Enable the **View All** button for collections containing many products.

✔ Use a consistent product image aspect ratio for a clean, professional appearance.

✔ Avoid displaying too many products on the homepage to maintain fast loading speeds.

✔ Regularly update the featured collection to keep your homepage fresh and encourage repeat visits.