# Slideshow

<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://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-11-13%20at%2011.57.04_ok3QM3j8.png)

## How to add a Slideshow

<Hint type="success">

Steps

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

</Hint>

## Section settings

### Design settings

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_hHyEdwOm.png)

And the slide height:

![image](https://docs-assets.foxecom.app/minimog-theme/image_MU8jrGDn.png)

<Hint type="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.

</Hint>

### **Auto-rotate slides**

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.

![image](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-11%20at%2022.23.47_D3Quj8NR.png)

## Block settings

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_2t3TCiJm.png)

### Background settings

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

<Hint type="success">

💡**Pro tip:** 1920x900px is recommended for desktop & 600x480px is recommended for mobile.

</Hint>

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

![image](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-11%20at%2022.48.48_N9RFgcct.png)

### 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">![image](https://docs-assets.foxecom.app/minimog-theme/image_Gbe13oRL.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image%20(2)_1hwR6Aqs.png)</div>

For example:

![image](https://lh7-us.googleusercontent.com/AYtwfKs-beekTPf5zJxNwJ9S2MLmFPU2bbATv5z-VzWwiqFBm-d26VPodhGFxitPHDiiasQee6eW3UDYNWeSFb-w1XFpRkMs9wffpoPDLMCpGT3ok7esBbXxWlzuMjj3C6ER_6o85Z6T68YuyBrNFw0)

### **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;

![image](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-11%20at%2022.52.25_fATRWHs9.png)