# Tags

## Tags

{% hint style="success" %}
**Tip:** To hide the title, description, or button, leave the corresponding fields blank.
{% endhint %}

### Heading

Use the **"Heading"** placeholder to add a section title. It will be placed at the top of the section by default. Start typing text in the field to view the additional settings:

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

If you need to change a title color, use the **"Color"** picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.

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

Use the **"Description"** input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.

The color of the description can be set in the **"Color"** picker. The color you apply to the item will be used for both desktop and mobile.

### Content

Using the **"Layout"** picker, specify the section position to the "Side" or "Center".

Set the desired parameters on the **"Width"** scale from 40% to 100% to define the width of the appearing content area.

* Using the minimum value of 40% with the "Slide" layout, position content on the left:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8NmP8SRZmVTGzLvpkq2V%2Ftags_side.png?alt=media&#x26;token=3653abac-fe4e-4807-9354-d36695fee712" alt=""><figcaption></figcaption></figure>

* The "Center" layout, with a maximum value of 100%, positions content at the center in the full width of a page:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FpNn0eRhHLwN5sKQSTX7y%2Ftags_center.png?alt=media&#x26;token=e6ec6f98-382e-4fa1-8a7c-28286e6f2335" alt=""><figcaption></figcaption></figure>

### Tags

The settings described below will be applied to the tag buttons:

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.

### Section layout

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the **"Dividing line"** drop-down. It will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, 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

The provided setting is applied to the "[<mark style="color:blue;">Header - transparent</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/advanced-settings)" feature.

Enable the **"Invert header colors"** to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "[Background](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#base)" item.

Here are the examples of the section on desktop and mobile:

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FNX1jBEwvA6M55VeBs28a%2Ftags_desktop.png?alt=media&#x26;token=3bd7947d-6c7d-4e1c-ad16-762faa9eca20" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRnKmyMZEAJcqepD5c8iH%2Ftags_mobile.png?alt=media&#x26;token=38a969d9-f774-4855-a984-9ce3bdd7fab3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

{% hint style="success" %}
**Tip:** Each tag can be managed using the "Tag" block. The given block can be added several times by pressing the **"Add Tag"** button.
{% endhint %}

## Tag

Title the button using the **"Label"** field. Leave the field blank to deactivate the tag.

To redirect visitors to the desired page by hitting the button, apply the URL from the **"Link"** source selector or add an external link to the field.

Here is an example of settings from the block:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FPeelbHSU5JI96S1b7TZy%2Ftag_tag%20block.png?alt=media&#x26;token=5661b910-edd3-4308-86a0-e9e72da0585d" alt=""><figcaption></figcaption></figure>