---
description: >-
  This section allows you to display a series of banners with or without text
  lines for efficiently interacting with your customers and highlighting
  important information.
---

# Slideshow

## Slideshow

{% hint style="info" %}
This section's settings are automatically optimized for mobile. Activate the "[<mark style="color:blue;">Enable mobile settings</mark>](#mobile-settings)" option for further customizations on mobile.
{% endhint %}

### Layout

Use the **"Height"** options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:

* **"Adapt to media"**. Displays an image in its original aspect ratio.
* **"Fullscreen"**. Set this option to show a media in the full width of a page. The image width will match the page width set in global settings if the "Enable page width" option is ticked under _Theme settings ->_ [_Layout_](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/layout).
* **"Fullscreen without header"**. Using this option, media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
* **"Proportion in %"**. Select the option to adjust a media height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 10% to 210%.

**"Proportion in %"** indicators:

\*100% = Square image

\*Less than 100% = Landscape

\*More than 100% = Portrait

\*For an ideal video aspect ratio (16:9), set the proportion to 56%.

* **"Fixed in px"**. This option helps to change image size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.

Use the **"Width"** drop-down to apply one of the options: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed". Once the last option is selected, you can manually change the width from 450 to 2000 pixels using a **"Fixed width"** setting. The margins will be set to the left and right when using "Fixed". To read more about the described options, view the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

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.

In the **"Pagination style"** drop-down, one can specify the slide navigation type: "Counter", "Numbers", or "Bullets". To deactivate the pagination select the "Hide" option.

Here is how the "Counter" option might be displayed in a store:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FkHyaYZYPqHIJt22jbsIb%2Fslideshow_pagination.png?alt=media&#x26;token=9c5f6b7c-d017-42f1-8080-a4a9511bc42a" alt=""><figcaption></figcaption></figure>

### Animations

To activate the self-running slide presentation, tick the **"Auto-rotate slides"** checkbox. This option works on all screen sizes.

Decide whether to use the play button next to the slider pagination by checking or deactivating the **"Show play button"** checkbox. This option allows visitors to stop auto-rotating slides and activate them when needed. The option works in cooperation with the **"**&#x41;uto-rotate slides" feature.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FCBmGZg3qtKBVdrN6aYDG%2Fslideshow_play%20bttn.png?alt=media&#x26;token=57685e1b-06e0-4283-ae29-4b1a600f24f1" alt="" width="161"><figcaption></figcaption></figure>

The slide speed rotating can be changed in seconds on the **"Change slides every**" scale from 3 to 9 seconds.

{% hint style="info" %}
The next option enables smooth image transitions with an infinite scroll effect. For easier customization, animations are disabled in the Theme Editor and are turned off on mobile and touch devices to optimize performance. The feature can be checked on the storefront after saving the changes made in the editor.
{% endhint %}

The effect of replacing slides with one another can be controlled using options from the **"Slider animations"** drop-down. You can use the transition animation in different ways by applying one of the options: "Enable for slides and texts", "Enable only for slides", and "Enable only for texts". Decide whether to deactivate the smooth animation using the "Disable" option.

Using the slide animations, set up the speed of slides transition from smooth to swift (from 1 to 15) on the **"Slider animations speed"** scale.

{% hint style="warning" %}
**Note!** The **"Image behavior"** and **"Desktop hover animation"** provide settings for adding image animation. Decide on an image animation effect from one of the drop-downs as these settings may not work together. Use the "None" option for the unnecessary feature.
{% endhint %}

To add a dynamic image motion to a static image, select the option under the **"Image behavior"** drop-down:&#x20;

* **"None"**. Disables smooth image motion.
* **"Ambient movement"**. The option adds a slight circular movement of an image.
* &#x20;**"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.
* &#x20;**"Zoom random"**. Using multiple images in a slideshow, this option will randomly zoom in or out as each image changes.

#### Desktop hover animation

If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the **"Inherit global settings"** option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "**Banner image desktop hover animation**" drop-down. Read the details on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/styles).

The options **"Zoom in"** and **"Zoom out"** place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing **"Add overlay opacity"** and selecting a color for the _"Image overlay background"_ or _"Image overlay gradient"_ (read the details [<mark style="color:blue;">above</mark>](#image)). To use this option, make sure that the _"Image overlay opacity"_ is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active **"Zoom in, add overlay opacity"** or **"Zoom out, add overlay opacity"**. The option **"None"** deactivates the animation.

You can read more about the described options on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#animation).

### Mobile settings

Using the **"Enable mobile settings"** option, you can apply changes to the mobile mode regardless of the desktop settings.

The **"Height"** of an image on mobile can be changed by operating one of the options:

* **"Same as on desktop"**. Choose the option to apply the same settings as on the desktop set in the main section.
* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Fullscreen"**. Set this option to show an image on the full screen.
* **"Fullscreen without header"**.  Using this option, media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
* **"Proportion in %"**. Select the option to adjust the image height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 10% to 210%.

**"Proportion in %"** indicators:

\*100% = Square image

\*Less than 100% = Landscape

\*More than 100% = Portrait

\*For an ideal video aspect ratio (16:9), set the proportion to 56%.

* **"Fixed in px"**. This option helps to change image size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 700 pixels.

The **"Text position"** can be placed "Below image", "Over the image, top", "Over the image, middle", or "Over the image, bottom". Select the desired option in the drop-down list. The examples of available options can be viewed on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#mobile-settings).

***

## Slide

{% hint style="success" %}
**Tip:** To activate the slide rotating effect, use more than one "Slide" block. Click the **"Add Slide"** button to add more blocks than given. In the current block, configure each banner individually.
{% endhint %}

### Image

{% hint style="success" %}
**Tip:** The "Image" settings described below can be used for the desktop and mobile.

Use the "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings-1)" to apply the required changes specifically for mobile.
{% endhint %}

In the **"Main image"** selector, press **"Select"** to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height respectively). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the **"Link"** source selector.

If you need to change the **"Image overlay background"**, select the color from the color picker. By default, the color is set to transparent.

Press **"Image overlay gradient"** to apply the gradient vector. Read details on how to use the option [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).

Adjust the transparency of an image gradient overlay using the **"Image overlay opacity"** scale from 0 to 100%.

### Text

The option **"Desktop text position"** helps to place texts in different positions: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option that best fits your needs in the drop-down.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the **"Desktop text alignment"** drop-down.

In the **"Text box desktop background"**, you can set the color from the color picker. By default, the color is set to transparent.&#x20;

Use the **"Text box desktop opacity"** scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.

The **"Text box desktop width"** scale allows text width to be set from 30% to 100%.

In the following example, you can view how the described settings might display in a banner with the next text parameters:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7dv1g8rMTtcrqWCXdXKM%2Fslideshow_text%20settings.png?alt=media&#x26;token=60c1063e-383a-4cd7-8715-f1ce5881b48b" alt=""><figcaption></figcaption></figure>

You can read more about the described options on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#text).

Use the **"Heading"** field to insert a title. The **"Heading size"** can be changed for the **h1** tag and **h2** tag. The **h1** tag includes the "Large" option. For the **h2** tag, you can choose to display in "Large", "Medium", or "Small" sizes.

If you need to change a title color, use the **"Heading color"** picker. The same color as for the desktop can be applied to the mobile view by enabling the "**Apply color on mobile"** option.

Use the **"Description"** input field to add some descriptive text strings to the section that will appear under the heading.&#x20;

Additionally, you can insert a text paragraph in the **"Description"** placeholder and connect a page in the **"Custom HTML"**. Or just connect a page with the block using the "Custom HTML" selector. Press "Select page" to choose the created page from the list or add a new one by pressing the button **"Create page"**. If you press the **"Create page"** button, you will be redirected to your _Shopify admin -> Online Store -> Pages_. Read details on how to create pages in the following [<mark style="color:blue;">article</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-create-webpages).

If you need to change the description color, use the **"Text"** picker. The same color as for the desktop can be applied to the mobile view by enabling the "**Apply color on mobile"** option.

Here is an example of how the text settings can be displayed over the background color:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FPz40KJYL0mnZbFhl6Cn7%2Fslideshow_slide%20text.png?alt=media&#x26;token=ee3675f3-49bd-4aaa-9cfe-ccf483563a62" alt=""><figcaption></figcaption></figure>

### Button/Second button

Change the internal button text in the **"Label"** field. Leave the field blank to hide the button.

To redirect customers to the desired page, edit the **"Link"**. Use the link from the source selector, or paste the one if you use an external link.

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](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 the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

### Animation

{% hint style="warning" %}
**Note!** This feature works with the selected text animation in the "[<mark style="color:blue;">Slider animations</mark>](#animations)" drop-down configured in the section.

The feature will be applied to the desktop view only.
{% endhint %}

Use the **"Content animation"** drop-down to add the animation of the text block when a new image slides. The animation will be applied to the heading, description, and buttons. The final position of the text box is predetermined by the settings applied in the "[<mark style="color:blue;">Desktop text position</mark>](#text)" drop-down. The current feature includes several options:

* **"Static"**. The text box remains fixed when changing slides.
* **"Up"**. The text box appears from the bottom of the image and is stacked in the predefined position.
* **"Down"**. This option animates the text box from the top and piles the text with buttons to the predefined position.
* **"Left"**. Display the text box over the image from the left using the current option.
* **"Right"**. Shows the text box from the right side of an image.

### First additional image/Second additional image

{% hint style="warning" %}
**Note!** Additional images will only appear on the desktop. These settings do not work on smaller screens, such as mobile devices.
{% endhint %}

To add an illustration overlay on top of the main image, click **"Select"** using the **"Image"** picker.  The recommended image ratio is one-to-one (width-to-height respectively).

The position of the image can be determined using the following scales:

In the **"Width"** scale, set the image size. It can be changed from 1% to 70%.

Assign an image to the left or right side of the screen using the **"Left"** scale, where 0% means an image appears on the left and 100% - shows it on the right.

The **"Top"** scale controls the required image appearance on the top or bottom of the main image. Set the point to 0 % to place an image at the very top and 100% at the bottom of the main image.

Activate the **"Enable shadow"** checkbox to add a slight shadow outside an image.

An example of the described settings can be viewed below:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjnKnDt4uUWXK6hGjn6TL%2Fslideshow_additional%20image.png?alt=media&#x26;token=47488ad6-b44d-4c84-bde0-83634f433e48" alt=""><figcaption></figcaption></figure>

### Ticker

{% hint style="warning" %}
**Note!** Use the ticker to overlay the image on the desktop view. It will be disabled on mobile by default.
{% endhint %}

To add a ticker overlayed on the main image, hit the **"Show ticker"** checkbox.

In the **"Text"** input field, add any promotion or proposition strings.

Using the **"Speed"** slider, you can adjust the running line speed in seconds from 1 to 5.

The **"Position"** picker includes options to arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.

The ticker background color can be raised as solid or transparent in the **"Background opacity"** scale. The parameters vary from 0 to 100 pixels.

Use the **"Background"** and **"Text"** color pickers to colorize the ticker accordingly.

Here are example settings of the ticker:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FctIWpsYeGGMZXyG9VscO%2Fslideshow_ticker.png?alt=media&#x26;token=80dd5df1-4b4b-40df-b4fc-93cdba892615" alt=""><figcaption></figcaption></figure>

### Mobile settings

The settings described below can be applied for mobile mode regardless of the desktop settings by activating the **"Enable mobile settings"** option.

**Image (Optional)**

Here you can select an image for mobile individually. Otherwise, the same image as for the desktop will be shown on mobile view. Press on **"Select"** to upload the one you need. The recommended image ratio is two-to-one (width-to-height respectively).&#x20;

Check the **"Show image overlay"** option to display the color overlay of the image. This option works with the configured settings of the image overlay in the block. Find more details [<mark style="color:blue;">here</mark>](#image).

The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the **"Text alignment"** drop-down. To clarify the use of parameters, check the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#mobile-settings).

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fgi9uT9dMNFRtPAHoBss6%2Fslideshow_slide%20mobile.png?alt=media&#x26;token=d1f07649-48d2-4fca-a783-f8b2d3a1f3bb" alt=""><figcaption></figcaption></figure>
