# Featured collection

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FWCrTQzGJiMtPO8RrnZ2V%2FPrimavera%20Distinction%202025-04-03%20at%202.29.36%20pm.jpg?alt=media&#x26;token=f213befb-f302-4a6f-b057-c7cc82405b8e" alt=""><figcaption><p>Featured collection the Savoir demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Select a collection or specific products
* Optionally, adjust the layout
* The spacing between items is determined in your [global grid settings](https://docs.ultramarinastudios.com/theme-settings)
  {% endhint %}

{% hint style="info" %}
Tip:  While static product lists are a great way to feature specific products, you may want to consider using an established collection for highlighting promoted products or integration with a third-party app for easier management.
{% endhint %}

### Settings

* **Collection**:
  * **Collection**: Select an existing collection
  * **Products**: If you want to hand-pick products instead, leave the collection field empty and select products here
* **Layout**:
  * **Desktop/mobile columns:** You can choose the number of columns for desktop and mobile
  * **Layout (desktop):** This controls the display of excess items that do not fit the grid columns. You can choose between the **slideshow** or **grid** layout.
  * **Container type:** allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
  * **Maximum products to show:** Choose how many products should display (between 1 and 25)
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](https://docs.ultramarinastudios.com/common-settings):

* Color scheme/color scheme transition
* Padding
* Borders

{% endhint %}

### Blocks

This section also comes with pre-loaded with two types of blocks should you wish to add a header above the blog posts or buttons below them:

* [Section header](https://docs.ultramarinastudios.com/sections/section-header)
* [Buttons](https://docs.ultramarinastudios.com/blocks/buttons) (hidden by default, fill in the settings to display)

### Examples & Inspiration

<div data-full-width="false"><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FO2EGXWnhc88dsbx0HRH1%2Ffeatured-collection-primavera.png?alt=media&#x26;token=ac94d89c-6c85-40b8-8da4-fcf633826346" alt=""><figcaption><p>Primavera preset</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FTESGMoxcFQFlRcyaO4Eq%2Ffeatured-collection-composition.webp?alt=media&#x26;token=01d41263-7d85-4e23-ad97-e7285806cdda" alt=""><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FnYWTAHtbzDjWLOYgAGzc%2Ffeatured-collection-gaia.webp?alt=media&#x26;token=5dd252e6-87f2-4204-9bf5-eaa5e130228c" alt=""><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FgEidFN7WhY8xra8rEJxo%2Ffeatured-collection-gloss.webp?alt=media&#x26;token=91844f9d-abaf-4ff2-8092-a6ebaa493756" alt=""><figcaption><p>Gloss preset</p></figcaption></figure></div>
