> 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/brand-list.md).

# Brand list

## Brand list

{% hint style="success" %}
The section includes the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Column</mark>](#column)" blocks for content setup.\
**Tip:** Press **"Add block"** to use the "Column" block. Each block can be added individually and customized in different ways.
{% endhint %}

### Content

**Brands per row**\
Set the number of brands displayed per row: 4 or 6.\ <mark style="color:orange;">**Note!**</mark> Works only for large screens. By default, the theme displays two items per row on mobile.

**Image ratio**\
Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:

* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*.

  \*The "Proportion" option is applied to mobile by default.

**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 400 pixels.

**Column alignment**\
Decide whether to display the brand title on the "Left" or "Center".

**Prevent image cropping**\
By default, the image zooming effect is enabled on the desktop view when hovering over an image.\
If the option is disabled, the scaled effect is visible inside the image container. When activated, the image container scales itself.

### Layout options <a href="#layout-options" id="layout-options"></a>

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

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

### Block colors

**Title**\
Changes the title color of each brand item.

### 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/Zv9LRoDWpPnVOr3pjpcV" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

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

***

## Column

{% hint style="success" %}
**Tip:** This block can be added several times by pressing the **"Add block"** button.\
Add the block to configure each item individually.
{% endhint %}

**Link**\
Select a page or paste a URL that opens when customers click the item.

**Open in new tab**\
Enable this option to open the linked page in a new browser tab.

**Image**\
Connect an image using the source selector. An image can be added from the store library or uploaded from your device.

**Title**\
Adds a brand title below the image.

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