# Featured collection

<figure><img src="/files/ZB2Oe1ADPvRutXzUoLIf" 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](/theme-settings.md)
  {% 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](/common-settings.md):

* 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](/sections/section-header.md)
* [Buttons](/blocks/buttons.md) (hidden by default, fill in the settings to display)

### Examples & Inspiration

<div data-full-width="false"><figure><img src="/files/v2CR6C6nOkHDrbhwTkWA" alt=""><figcaption><p>Primavera preset</p></figcaption></figure> <figure><img src="/files/9KNVD3C3Wlo4sIXUE1bl" alt=""><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="/files/69UjtbzQu8Q9HOo4oM5o" alt=""><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/urG73QLhMoxpsIUSqdkd" alt=""><figcaption><p>Gloss preset</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ultramarinastudios.com/sections/featured-collection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.