> 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 settings described on this help page to customize dynamic sections to match your store's design. Settings may vary for different 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FHe6DhZECX94ANiBLMZnG%2Feditor_templates.png?alt=media&amp;token=7db2e8d2-8402-4fe9-8dd4-cd9a6dcad4d2" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfHZCtO9T333BC300aqng%2Feditor_add%20section.png?alt=media&amp;token=0ddae65b-f5a7-43f4-8943-bfbbb14d9e44" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F73OODW0aa3MIJWxyXWSn%2Feditor_add%20block.png?alt=media&amp;token=79cd4594-81cc-4848-a484-5846e6262f62" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FxsCB5XgOZsAQH41ettvk%2Feditor_remove.png?alt=media&amp;token=cf48e2c8-8a87-44ea-9b2a-a482bc7cad84" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FX1YNr4y9foAfQsAvY90k%2Fsection_hide.png?alt=media&amp;token=6d831ad7-13e2-4c34-a787-c069f08d0c03" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F9APgs8KT9B2poO3eUTtO%2Fsection_duplicate.png?alt=media&amp;token=de59bd02-c339-4cfd-b2d1-cfd3b4863164" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FGMF43BPvfiZowmpkq3UG%2Fsection_move.png?alt=media&amp;token=6d34f6e0-11a6-4582-825e-8d40a881a9f2" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FU7hMSYcSAhWKUfjLsSz9%2Feditor_inspector.png?alt=media&amp;token=0398dfc6-8ac1-430b-a69e-6fa2f1d3e3ef" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FN43f9tUkeWtP5kmLbYYX%2Feditor_edit%20content.png?alt=media&amp;token=3f2acdd2-04c8-4c32-81b6-5de08861a2ab" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FuXLUQNcyg4KAkjHNt1Fq%2Flayout_split.png?alt=media&amp;token=3765b7e6-cf87-4c5c-b37a-4c285f072b3f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Stacked" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fq8ROJRSs5w6cZS35jEMU%2Flayout_stacked.png?alt=media&amp;token=b4e9c9b6-8792-496d-9c77-47e15df82811" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Centered" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fu8Wv8qIMXRP6FxPwdDFd%2Flayout_centered.png?alt=media&amp;token=3c304140-3faf-44fd-bd91-d2a5dfd1a042" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FA3atLVBVQpEvKg79IM0d%2Fmobile%20alignment_left.png?alt=media&amp;token=0f243ce2-8180-44e5-a6e7-5ca646d2131e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F2quBKjNecTaJFxPentIr%2Fmobile%20alignment_center.png?alt=media&amp;token=262206d8-4a07-435b-82d4-13609b131b1a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdgPfnq6snrOBzXrwXTT3%2Fvertical%20alignment.png?alt=media&amp;token=b0ace613-0d5e-4d32-b16c-9efdbde323af" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FzCftnloP7kxRnX2PDYWG%2Fswipe%20on%20mobile_disabled.png?alt=media&amp;token=4556f6a5-676a-4526-9b29-acba10c83593" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Swipe" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FY8uI0FOekRvmDCZDnewe%2Fswipe%20on%20mobile_enabled.png?alt=media&amp;token=ae49229a-fdde-4828-a024-0ca3d0cf59a4" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdcVcxjN5x6T9G6GJfjDb%2Fimage%20ratio_portrait.png?alt=media&amp;token=05c645f7-9a39-4012-9706-6b6d5f8fe825" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Square" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRt32HG7AWvSG8QFfwhgk%2Fimage%20ratio_square.png?alt=media&amp;token=733cb2b3-cbe8-4aef-87cb-33c908dd479c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Landscape" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FMmpDEk699l2KYYCjG2hp%2Fimage%20ratio_landscape.png?alt=media&amp;token=deb1a933-1c98-43df-b581-16fe1263fc6c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Circle" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FKL1OnhrAQW0Z6Ogtc2mK%2Fimage%20ratio_circle.png?alt=media&amp;token=3468bbe6-a7f5-4532-bd0e-d1ba2e23aef5" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FUeSs6W1KUYV7mdMNlyT8%2Fwidth_standard.png?alt=media&amp;token=8ab2bc57-cb1b-4530-89d0-26592e5f0e13" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Wide" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F41UlSnRgyjoxloopCMwq%2Fimage%20with%20text_wide.png?alt=media&amp;token=572afcda-621d-42ce-954c-a967a76f2f13" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FsJhnKRbeum67JOKJ2JU4%2Fwidth_fixed%20min.png?alt=media&amp;token=79e87363-0c93-498a-8e21-169d921f8418" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FSD0NhUfUH845fxCY9lLE%2Fwidth_fixed%20middle.png?alt=media&amp;token=bb62276f-5fd2-4f63-ba93-5537361a3822" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F6AMkPD1Rmfy1r6WGywBn%2Fanimation_zoom%20in.gif?alt=media&amp;token=13e6f7d4-a75d-4e7c-b2a3-2d00375325b2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Zoom out" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F3lc5JOpyxzF0TRyp96NI%2Fanimation_zoom%20out.gif?alt=media&amp;token=d42e6e8b-99a5-4959-a0a5-425bddde49d9" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FcLIGWJT4oTT7LJpMrn5C%2Fanimation_zoom%20in%20overlay.gif?alt=media&amp;token=09379223-c0e4-4485-b3f4-efcc1f4050aa" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F9aQn4IhL0QPOYuAclc5l%2Fanimation_zoom%20out%20overlay.gif?alt=media&amp;token=fbd31d03-f1a3-4212-b6e2-2bf59cf9f7ac" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FwXQ5GFivA4YvNOpWPrUB%2Fanimation_overlay.gif?alt=media&amp;token=e7359f6c-2984-4955-8797-cf905a9752bb" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeY3sYCLp5jRw9Gg9duGl%2Fmedia%20overlay_gradient.png?alt=media&amp;token=24fc85d0-2e62-475b-85e2-8a4a9a2966d7" 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).