> 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/before-and-after.md).

# Before and after

## Before/after image

This section allows you to place two images side by side, enabling customers to compare the results instantly.

{% 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;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/image.md)" blocks for content setup.
{% endhint %}

### Content

**Type**\
Use the picker to specify the position of images:

* **"Horizontal"**. Set the horizontal dividing line that sets images side by side.

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

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

{% tab title="Mobile" %}

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

* **"Vertical"**. Display a vertical dividing line that separates images and positions them at the top and bottom.

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

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

{% tab title="Mobile" %}

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

**Default state percent**\
Change the default position of the divider line using a percentage scale. This setting helps you control the visibility of each image in the section.

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

**Image ratio**\
Use the options to adapt media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they appear underneath the drop-down after selecting an option:

* **"Adapt to media"**. Displays an image in its original aspect ratio.
* **"Fixed height"**. This option helps to change an image size in pixels by specifying the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.
* **"Aaspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%\*.

  \*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings)" subsection.

**"Aspect ratio"** 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.

* **"Fullscreen"**. Set this option to show media in the full width of a page. The image width will match the page width set in global settings if the "Use page width limit" option is ticked under *Theme settings ->* [*<mark style="color:blue;">Page layout</mark>*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing will be subtracted from the total height. Review your storefront to ensure the settings meet your expectations.

**Width**\
Select one of the options in the drop-down: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed".

**Fixed width**\
Works with the "Fixed" option. Once the option is selected, the width can be changed manually on the scale from 450 to 2000 pixels. The margins will be set to the left and right when the "Fixed" option is used.\ <mark style="color:orange;">**Note!**</mark> The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in *Theme settings ->*  [*<mark style="color:blue;">Page layout</mark>*](/unicorn-shopify-theme/theme-settings/page-layout.md).

For more information about the described options, please refer to the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

### 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:

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

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

### Animations

**Image behavior**\
Add dynamic motion to a static image by selecting one of the options:

* **"None"**. Disables smooth image motion.
* **"Ambient movement"**. The option adds a slight circular movement to an image.
* **"Zoom in out"**. Creates a smooth zoom-in and then zoom-out effect on the image.
* **"Zoom out in"**. Applies a zoom-out effect followed by image enlargement.

### Mobile settings

**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.

**Image ratio**\
Change the image size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:

* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Fixed height"**. 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 700 pixels.
* **"Aspect ratio"**. Select the option to adjust the image height as a percentage using the corresponding scale. The parameters can be changed from 10% to 210%.

**"Aspect ratio"** 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.

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