# Slideshow

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FrlY8x3opnZ3cZWU2TqcL%2Fimage.png?alt=media&#x26;token=51d7d2b4-ddde-445a-8014-6c6895c7469c" alt=""><figcaption></figcaption></figure>

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

## How to add a Slideshow

{% hint style="success" %}
Steps

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

## How to edit a Slideshow

### Section settings

#### General settings

* **Container**: Set how the image sliders to be displayed as Full width/ Fixed width.
* **Layout**:&#x20;

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F2HkHy38UuZcTmCqX2Gn7%2Fimage.png?alt=media&#x26;token=6edba506-9796-4436-aac6-3c4140381191" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Centered" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3l8vHMAraI9Q8fsQt7mB%2Fimage.png?alt=media&#x26;token=774c5740-b2fa-41e8-8788-1a81524fc5be" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Slide height**: Set the height of the slides as Adapt to first image/ Small/ Medium/ Large.
* **Show pagination**: Enable pagination for the sliders.
* **Auto-rotate content**: Slideshow will run automatically when enabled. The duration time to change slides is between 2-10 seconds.
* Controls color scheme: Set the color of the pagination - Dark/Light.
* Controls position: Set where the pagination is displayed - Inside or Outside the slide images.

#### Mobile layout and Accessibility

You can enable/disable showing the content below images and change text alignment on mobile.

The section also lets you fill in the slideshow description for customers using screen readers.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fg4DEEXZXUdkBNZRVeO2G%2Fimage.png?alt=media&#x26;token=f87084af-61c6-424e-9245-c7489888427c" alt=""><figcaption></figcaption></figure>

### Block settings

You can add images or videos to your sliders.

#### Image slide

Add an image for your slideshow. You can add an image for desktop and mobile view separately.

Set the overlay opacity to the image if needed.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FOQkZozoKv3F0kmwChFAo%2Fimage.png?alt=media&#x26;token=297e86e1-b91e-451f-972e-3b4f17cfe28d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The recommended size is 1920x900px for desktop and 600x480px for mobile.
{% endhint %}

Adjust the desktop content position and desktop content alignment as you wish. To each image slide, you can add:

* Heading
* Subheading
* Description
* Button

The content on mobile will be centralized by default.

#### Video slide

Besides images, you can add videos to your slideshow section.&#x20;

* **Video**: Select a video you've uploaded to Shopify Files or insert a Youtube/Vimeo video URL.
* **Video alt text**: Describe the video for customers using screen readers. [Learn more](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)

Similar to image slide, you can add content to your video slide with a:

* Heading
* Subheading
* Description
* Button.