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

# Featured collections

## Featured collections

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Collection</mark>](#collection)" block.\
**Tip:** Press **"Add block"** to use the "Collection" block. Each block can be added individually and customized in different ways.
{% endhint %}

### Heading

**Show page heading**\
Enable the option to display the collection titles. Additional settings appear after the option is enabled.

**Size**\
The title size can be changed in the drop-down to "Small", "Medium", or "Large".

**Color**\
Change the title color using the picker. Paste the hex code into the related field or select the color using the paint palette. The color setting is applied to all screen sizes.

### Content

**Maximum number of products**\
Set the maximum number of products to display. It can be changed from 2 to 12 items.

### **View all button**

**Show**\
Enable the option to display the "View All" button if a collection contains more products than are displayed in the column. The related settings are expanded when the option is enabled.

**Style**\
Change the button design by selecting one of the options in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.\
Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/button.md).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

An example of the described settings can be viewed below:

<figure><img src="/files/lDZCYCAD3nhhXZxuOlrC" alt=""><figcaption></figcaption></figure>

### Product card

{% hint style="warning" %}
**Note!** The settings described below are applied to all "[<mark style="color:blue;">Collection</mark>](#collection)" blocks in the section.
{% endhint %}

**Image ratio**\
Choose the appropriate aspect ratio of product cards. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

**Image width**\
Change the product image size from 15% to 60% using the scale.

**Show secondary image on hover**\
Enable the option to show the second product image when the product card is hovered over.

**Show Quick add button**\
Switch on the option to display the "Add to Cart" button on product cards.

**Show vendor**\
Display a brand for each product card.

### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/pNOB1D6VfcIqBeJOWx8W" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/sXjiFb6OeNg3M4DwzlU9" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Collection

{% hint style="success" %}
Provides an additional "[<mark style="color:blue;">Title</mark>](#title)" block.\
**Tip:** Press **"Add block"** to add several blocks.
{% endhint %}

<mark style="color:orange;">**Note!**</mark> The maximum number of blocks in a section is set to four. On desktop, the section displays the same number of columns per row according to the added blocks. The default number of columns on mobile is one item per row. Change the columns' position on the storefront by dragging blocks up or down.

View the example of the blocks used and their display below.

<figure><img src="/files/10qAdMFmKssb9swPxQlH" alt=""><figcaption></figcaption></figure>

**Collection**\
Set the required collection by pressing the **"Select"** button.

***

### Title

**Title**\
Replace the default collection title with the custom one using the field.\ <mark style="color:orange;">**Note!**</mark> The title can be displayed by ticking the "Show page heading" option in the "[<mark style="color:blue;">Featured collections</mark>](/unicorn-shopify-theme/dynamic-theme-sections/featured-collections.md)" section.