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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/minimog-theme/theme-sections/slideshow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
