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

# Dynamic Theme Sections

Use the dynamic theme sections to add varied content to pages. The theme supports displaying sections on such webpages: Home page, [<mark style="color:blue;">Products</mark>](/unicorn-shopify-theme/page-categories/products.md), [<mark style="color:blue;">Collections</mark>](/unicorn-shopify-theme/page-categories/collections.md), [<mark style="color:blue;">Collections list</mark>](/unicorn-shopify-theme/page-categories/collections-list.md) page, [<mark style="color:blue;">Blogs</mark>](/unicorn-shopify-theme/page-categories/blogs.md), [<mark style="color:blue;">Blog posts</mark>](/unicorn-shopify-theme/page-categories/blog-posts.md), [<mark style="color:blue;">Cart</mark>](/unicorn-shopify-theme/page-categories/cart.md), [<mark style="color:blue;">Search</mark>](/unicorn-shopify-theme/page-categories/search.md) page, [<mark style="color:blue;">Password</mark>](/unicorn-shopify-theme/page-categories/password.md) page, [<mark style="color:blue;">404 page</mark>](/unicorn-shopify-theme/page-categories/404-page.md), and Pages.

{% hint style="success" %}
**Tip:** Use the top drop-down menu to select the desired template and customize it according to your needs.
{% endhint %}

<figure><img src="/files/9jni5I2oWKjIch5J9oGd" alt=""><figcaption></figcaption></figure>

Each dynamic section can be added, removed, or hidden:

{% hint style="success" %}
**Tip:** To add a section, press the **"Add section"** button and select the necessary one from the list.
{% endhint %}

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

{% hint style="success" %}
**Tip:** Some sections contain a list of customizable blocks. To add a block, hover over the section title and click the plus button.
{% endhint %}

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

{% hint style="success" %}
**Tip:** The section will be removed once you press the **"Remove section"** button at the very bottom of each section.
{% endhint %}

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

{% hint style="success" %}
**Tip:** To hide a section, press the eye icon next to the section name.
{% endhint %}

<figure><img src="/files/7oMEqjiYXXcxl6tYZx2L" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** To duplicate a section, open the related one and press the dotted \[...] button next to the section's name. Then, you can choose the **"Duplicate"** option from the list.
{% endhint %}

<figure><img src="/files/7f99nZzrRHhAUW0bhP8Q" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** Drag and drop sections to arrange them in the desired order on a page.
{% endhint %}

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

{% hint style="success" %}
**Tip:** A section can be easily found using the Inspector. Activate the Inspector in the top toolbar. Then, press the desired content block to open its settings.
{% endhint %}

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

{% hint style="warning" %}
**Note!** Most text content that cannot be changed in the Theme Editor can be edited under "Edit default theme content".
{% endhint %}

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

***

{% hint style="warning" %}
**Note!** Each section includes various settings to change its layout.\
The number of options depends on the section.
{% endhint %}

## Layout options

Use the layout settings in the sections: [<mark style="color:blue;">Before and after</mark>](/unicorn-shopify-theme/dynamic-theme-sections/before-and-after.md), [<mark style="color:blue;">Blog posts</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blog-posts.md), [<mark style="color:blue;">Brand list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/brand-list.md), [<mark style="color:blue;">Collage</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collage.md), [<mark style="color:blue;">Collection collage</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-collage.md), [<mark style="color:blue;">Contact form</mark>](/unicorn-shopify-theme/dynamic-theme-sections/contact-form.md), [<mark style="color:blue;">Collection list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-list.md), [<mark style="color:blue;">Collection slider</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-slider.md), [<mark style="color:blue;">Collection tabs</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-tabs.md), [<mark style="color:blue;">FAQs</mark>](/unicorn-shopify-theme/dynamic-theme-sections/faqs.md), [<mark style="color:blue;">Featured collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/featured-collection.md), [<mark style="color:blue;">Image gallery</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-gallery.md), [<mark style="color:blue;">Image collage</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-collage.md), [<mark style="color:blue;">Map</mark>](/unicorn-shopify-theme/dynamic-theme-sections/map.md), [<mark style="color:blue;">Media</mark>](/unicorn-shopify-theme/dynamic-theme-sections/media.md), [<mark style="color:blue;">Multicolumn</mark>](/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md), [<mark style="color:blue;">Newsletter signup</mark>](/unicorn-shopify-theme/dynamic-theme-sections/newsletter-signup.md), [<mark style="color:blue;">Page content</mark>](/unicorn-shopify-theme/dynamic-theme-sections/page-content.md), [<mark style="color:blue;">P</mark><mark style="color:blue;">romotions</mark>](/unicorn-shopify-theme/dynamic-theme-sections/promotions.md), [<mark style="color:blue;">Reels</mark>](/unicorn-shopify-theme/dynamic-theme-sections/reels.md), [<mark style="color:blue;">Rich text</mark>](/unicorn-shopify-theme/dynamic-theme-sections/rich-text.md), [<mark style="color:blue;">Tag list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/tag-list.md), and [<mark style="color:blue;">Testimonials</mark>](/unicorn-shopify-theme/dynamic-theme-sections/testimonials.md).

**Layout**\
Most of the listed sections include three layouts: "Split", "Stacked", and "Centered". View the examples below.

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

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

{% tab title="Stacked" %}

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

{% tab title="Centered" %}

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

**Mobile alignment**\
The header elements can be aligned to the left or center.

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

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

{% tab title="Center" %}

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

**Vertical alignment**\
View the example of the centered header elements below.

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

**Use swipe on mobile**\
Enable or disable the option in the blocks: [<mark style="color:blue;">Blog posts</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blog-posts.md), [<mark style="color:blue;">Brand list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/brand-list.md), [<mark style="color:blue;">Collection list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-list.md), [<mark style="color:blue;">Collection tabs</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-tabs.md), [<mark style="color:blue;">Image gallery</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-gallery.md), and [<mark style="color:blue;">Multicolumn</mark>](/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md).

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

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

{% tab title="Swipe" %}

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

***

## Content

**Image ratio**\
The content layout can be changed in the following sections: [<mark style="color:blue;">Brand list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/brand-list.md), Collage ("[<mark style="color:blue;">Collection products</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collage/collection-products.md)" block), Collection collage ("[<mark style="color:blue;">Collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-collage/collection.md)" and "[<mark style="color:blue;">Product</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-collage/product.md)" blocks), [<mark style="color:blue;">Collection tabs</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-tabs.md), [<mark style="color:blue;">Collection list</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collection-list.md), Collection slider ("[<mark style="color:blue;">Collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/collection.md)"), [<mark style="color:blue;">Countdown timer</mark>](/unicorn-shopify-theme/dynamic-theme-sections/countdown-timer.md), [<mark style="color:blue;">Featured collections</mark>](/unicorn-shopify-theme/dynamic-theme-sections/featured-collections.md), Image collage ("[<mark style="color:blue;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-collage/images.md#image)" block), [<mark style="color:blue;">Image gallery</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-gallery.md), [<mark style="color:blue;">Lookbook</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook.md), [<mark style="color:blue;">Map</mark>](/unicorn-shopify-theme/dynamic-theme-sections/map.md#map-block), [<mark style="color:blue;">Media</mark>](/unicorn-shopify-theme/dynamic-theme-sections/media.md), [<mark style="color:blue;">Multicolumn</mark>](/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md), and [<mark style="color:blue;">Reels</mark>](/unicorn-shopify-theme/dynamic-theme-sections/reels.md).

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

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

{% tab title="Square" %}

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

{% tab title="Landscape" %}

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

{% tab title="Circle" %}

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

The "Standard", "Wide", and "Fixed" options (The number of options depends on the section!) can be set in the **"Width"** picker. The settings are available in the [<mark style="color:blue;">Promotions</mark>](/unicorn-shopify-theme/dynamic-theme-sections/promotions.md) and [<mark style="color:blue;">Slideshow</mark>](/unicorn-shopify-theme/dynamic-theme-sections/slideshow.md) sections:

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

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

{% tab title="Wide" %}

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

{% tab title="Fixed (900 px)" %}

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

{% tab title="Fixed (1450 px)" %}

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

***

## Animations

The described settings include the following sections: Collage ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), Collection collage ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), [<mark style="color:blue;">Countdown timer</mark>](/unicorn-shopify-theme/dynamic-theme-sections/countdown-timer.md), [<mark style="color:blue;">Image banner</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-banner.md), Promotions ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), [<mark style="color:blue;">Multicolumn</mark>](/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md), and [<mark style="color:blue;">Slideshow</mark>](/unicorn-shopify-theme/dynamic-theme-sections/slideshow.md).\
The number of options depends on the section.

**Hover animation**\
View the examples of animation effects below.

{% tabs %}
{% tab title="Zoom in" %}

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

{% tab title="Zoom out" %}

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

{% tab title="Zoom in, add overlay opacity" %}

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

{% tab title="Zoom out, add overlay opacity" %}

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

{% tab title="Add overlay opacity" %}

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

***

## Image

**Gradient**\
Use the setting in such sections: Before and after ("[<mark style="color:blue;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/image.md)" block), Collage ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), Collection collage ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), [<mark style="color:blue;">Image banner</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-banner.md),  Promotions ("[<mark style="color:blue;">Promotion</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/promotion.md)" block), Popup ("[<mark style="color:blue;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/image.md)" block), and Slideshow ("[<mark style="color:blue;">Slide</mark>](/unicorn-shopify-theme/dynamic-theme-sections/slideshow.md#slide)" block).

In the  **"Gradient"**, you can paste your **CSS** element. Or use the built-in **Gradient**, which can be changed to linear or radial. You can set the angle of a gradient in the percentage input box. If you need a complex set of colors for special effects, create up to 10 color-stop points by simply pressing on a gradient line or using the "+" and "-" symbols.

Press each color-stop point on a gradient line to apply color settings. The position and color value of a color-stop point can be set as a percentage or directly within the gradient line. Here, you can paste the specific color hex code into the corresponding field. Or change the color on a color slider. Change the gradient transparency with the second color slider or the percentage input box. To remove the gradient, click the **"Remove gradient"** button.

In the following example, you can see the settings that can be applied to a media overlay with a value of 48%.

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

***

## Video

The video settings can be used in the following sections:

* Video from URL: Collage ("[<mark style="color:blue;">Video</mark>](/unicorn-shopify-theme/dynamic-theme-sections/collage/video.md)" block).
* Video file/ Video from URL: [<mark style="color:blue;">Image banner</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-banner.md), [<mark style="color:blue;">Media</mark>](/unicorn-shopify-theme/dynamic-theme-sections/media.md#media-block), [<mark style="color:blue;">Reels</mark>](/unicorn-shopify-theme/dynamic-theme-sections/reels.md).