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

# FAQs

## FAQs

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">FAQs</mark>](/unicorn-shopify-theme/dynamic-theme-sections/faqs/faqs.md)" blocks.\
**Tip:** Press **"Add block"** to use the desired block.\ <mark style="color:orange;">**Note!**</mark> This section supports a maximum of **2 nested blocks**. Any additional blocks will be ignored.
{% endhint %}

Use this section to organize common questions into expandable items, reducing the need for customer support while improving the shopping experience. Each FAQ item can be customized with its own question and answer, making it easy to present clear and helpful information.

### Layout

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

The layout settings change the look and feel of the section.

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

**Vertical alignment**\
Choose how the "Header" content group is aligned relative to expandable items: "Top", "Center", or "Bottom".\ <mark style="color:orange;">**Note!**</mark> The option is available for the "Split" layout.

**Use custom column width**\
Enable the option to display the related settings.

**Content column width**
\
Set the input field width between 25% and 75%.

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

{% tab title="Mobile" %}

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