> 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/collection-tabs.md).

# Collection tabs

## Collection tabs

{% 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

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

### Description <a href="#description" id="description"></a>

**Color**\
Set the color to colorize the collection description. The color setting is applied to all screen sizes.

### Content <a href="#content" id="content"></a>

**Products per row**\
The number of products displayed per row can be set to 2, 4, or 6.

**Set item count manually**\
Enable this option to manually specify the number of products displayed instead of using the automatically generated amount.

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

### Product cards

{% 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).

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

**Content alignment**\
Use the picker to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.

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

**Buttons layout**\
Select the corresponding option in the picker: "Icon with text", "Icon only", or "Add to cart below". Select the "Use theme settings" option to apply the global settings. Read the options' descriptions [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/theme-settings/product-cards.md#button-layout).

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

### Layout options

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use swipe on mobile**\
Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.

**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/8cuVzGrogCea8dEacY5L" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

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

***

## Collection

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

**Use recently viewed products**\
If the option is enabled, the current collection will be replaced with products that the visitor has recently viewed.

**Title**\
Replace the default collection title with the custom one using the field.

**Description**\
Use the input field to add accompanying text to the section title.

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