# Slideshow

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

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.

{% hint style="success" %}
Steps

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

## Section settings

### Slider settings

* Select the **Slide effect** you want to use: Slide/Fade;
* Determine the **Slide height**:&#x20;
  * Adapt to first image
  * Small
  * Medium
  * Large
  * Full screen;
* Show **Navigation**/ **Pagination** or both;
* Enable **Auto-rotate slides** to run the slideshow automatically. The duration time to change slides is between 2-10 seconds.

<figure><img src="/files/UrewM66TJRj7mTnD7hCg" 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 %}

### Mobile settings&#x20;

For mobile, you can show your content below the image, or uncheck the box to display the content on the image like on desktop.

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

## Block settings

### Image settings

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

You can also insert a link or select a page you want to redirect visitors to when they click on the slide [button.](#button-settings)

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

### **Content settings**&#x20;

Add some text for the slide’s heading and subheading, then determine the content's position and alignment.

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

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

### Button settings

You can display a call-to-action button to redirect customers to your desired pages/collections.&#x20;

Add a label and select its style. The button will be linked to the page you have added in the [Slide link](#image-settings) field earlier.

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


---

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