# Slideshow

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/TKnDmKPVMok>" %}

A slideshow is a quick and interactive way to showcase content and information on your site. Slideshow lets you display your most popular products/collections or shout out about what's new with a call-to-action button.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FwheriuqJ8lKX7cV6mOaW%2FScreen%20Shot%202021-11-13%20at%2011.57.04.png?alt=media\&token=0ca0bf13-4b7b-4206-a034-87c0944f7f67)

## How to add a Slideshow

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Select **Slideshow**
3. **Save**
   {% endhint %}

## Section settings

### Design settings

In this settings, you can choose the container type for the slideshow:

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FqdAtJba87YyadyWdeL4t%2Fimage.png?alt=media&#x26;token=5bd28e4c-6691-4ce2-a082-064fb05cc816" alt=""><figcaption></figcaption></figure>

And the slide height:

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FzVntpxM4CbcM1GCnWaJy%2Fimage.png?alt=media&#x26;token=894f5724-be2f-44e6-a3e7-79866f7f610a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When choosing "Adapt to first slide image", the slide height will follow the image ratio of the first slide. It will not be cropped.
{% endhint %}

### **Auto-rotate slides**&#x20;

Enable **Auto-rotate slides** to run the slideshow automatically. The duration time to change slides is between 2-10 seconds.

If you don't want to use rotation, you can disable it and use pagination or navigation.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FnYh2VqKwl7TsVQypD0ft%2FScreen%20Shot%202021-10-11%20at%2022.23.47.png?alt=media\&token=90c0edb8-a37a-49cd-8b99-66276ddf97d0)

## Block settings

Since each theme blocks have its own settings, you need to click each block to modify it.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FRMZVoBaJmk2ArVoKZHZs%2Fimage.png?alt=media&#x26;token=a2e0f712-0af9-4866-8df4-4af0fc0fe127" alt="" width="346"><figcaption></figcaption></figure>

### Background settings

You can add images for desktop and mobile versions separately.&#x20;

{% hint style="success" %}
:bulb:**Pro tip:** 1920x900px is recommended for desktop & 600x480px is recommended for mobile.
{% endhint %}

### **Content**

Add some text for the slide’s heading and subheading, then determine the content's color, size, and position by choosing a value in the text color/size, content position, and alignment drop-down.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F0nCvtdi4BMioSW9AzDsC%2FScreen%20Shot%202021-10-11%20at%2022.48.48.png?alt=media\&token=26069964-55d5-47f0-998c-012c98dc8a0e)

### Buttons

You can display **two** call-to-action buttons (**First Button** and **Second Button**) to redirect customers to your desired pages/collections. Add a **Label** and **Link**, then choose a **Button style** and adjust the **Button size.** Leave the **Button label** blank if you don't want to display the button in your slide.

<div align="center"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FHU4OmcD6VEXUgtaOS62y%2Fimage.png?alt=media&#x26;token=51f59010-23aa-4d2e-af2f-0490854de475" alt=""><figcaption></figcaption></figure> <figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FFgGXEfgugSYkmOPdpd95%2Fimage%20(2).png?alt=media&#x26;token=29db5f00-9e87-4b8a-a3f5-ca2038499ccd" alt=""><figcaption></figcaption></figure></div>

For example:

<figure><img src="https://lh7-us.googleusercontent.com/AYtwfKs-beekTPf5zJxNwJ9S2MLmFPU2bbATv5z-VzWwiqFBm-d26VPodhGFxitPHDiiasQee6eW3UDYNWeSFb-w1XFpRkMs9wffpoPDLMCpGT3ok7esBbXxWlzuMjj3C6ER_6o85Z6T68YuyBrNFw0" alt=""><figcaption></figcaption></figure>

### **Footer**

Enable/ Disable the footer by ticking/unticking the checkbox.&#x20;

Footer works as a second call-to-action button that redirects customers to your desired pages/ collections.&#x20;

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FS9Sa713WQsaTT2yXVBPn%2FScreen%20Shot%202021-10-11%20at%2022.52.25.png?alt=media\&token=0b107af8-460a-40a7-866e-c269a997fde2)