# Slideshow

The "Slideshow" section features rotating images or content, capturing attention and showcasing key messages, promotions, or products. It enhances visual appeal and engages visitors, encouraging them to explore further.

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FJMq0W1vf9pzsukuWP4T0%2Fs1.jpg?alt=media&#x26;token=6ce7c3ac-9d6a-4c54-8d8a-a26b8386aaa8" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

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

## General Settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fx4L78jRFGI9qRXj6Ftii%2Fs1-c.jpg?alt=media&#x26;token=2142f39c-96a8-4034-ad60-c77dd268be4f" alt=""><figcaption></figcaption></figure>

* **Section width** -  Container / Stretched / Full width&#x20;
* **Desktop height** - Adapt to image /  450px / 550px / 650px / 750px /  Full screen&#x20;
* **Mobile height** - Adapt to image / 400px / 450px / 500px / 550px / Full screen&#x20;
* **Auto-rotate slides**&#x20;
* **Change slides every**
* **Transition type** -  Zoom / Zoom cut /  Fade / Slide&#x20;
* **Controls** - Filled arrows / Outlined arrows / Numbers / Dots
* **Slideshow description** - Slideshow about our brand Describe the slideshow for customers using screen readers.

## Block settings

{% hint style="success" %}
Steps:

1. Locate **Slideshow.**
2. **Add Slide**
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F1vxL5b3I8d6Q50JOcEHp%2Fs1-block1.jpg?alt=media&#x26;token=673e0cbb-8407-4942-881d-86be7a5c655e" alt=""><figcaption></figcaption></figure>

* **Image** - 2800 x 1000 .jpg recommended
* **Mobile image** - 1200 x 1600 .jpg recommended
* **Slide link** - Link on image

### Video

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F7YM5cETO2uDoLjbY7caG%2Fs1-video.jpg?alt=media&#x26;token=14579f88-10e8-47c1-9636-d0520a2c0088" alt=""><figcaption></figcaption></figure>

* **Use video as a background** - When enable Video overwite Image slide
* **Shopify-hosted video**

### Content

<div><figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FCOlwk6FgSdXVlttSKtJJ%2Fs1-content-1.jpg?alt=media&#x26;token=574d48d6-546c-4357-8d90-57fc604c5c21" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Ff6OrX3FKMJ1IBvgXZjK8%2Fs1-content-2.jpg?alt=media&#x26;token=bf1142d5-1beb-4a5b-9af1-ada208179f4c" alt=""><figcaption></figcaption></figure></div>

* **Content maximum width**
* **Content position**
  * Top left&#x20;
  * Top center&#x20;
  * Top right&#x20;
  * Middle left&#x20;
  * Middle center&#x20;
  * Middle right&#x20;
  * Bottom left&#x20;
  * Bottom center&#x20;
  * Bottom right
* **Mobile content position**&#x20;
  * Top left&#x20;
  * Top center&#x20;
  * Top right&#x20;
  * Middle left&#x20;
  * Middle center&#x20;
  * Middle right&#x20;
  * Bottom left&#x20;
  * Bottom center&#x20;
  * Bottom right
* **Content space** - Small / Normal / Large
* **Subheading**
* **Heading**
* **Heading size** - From Heading 1 - Heading 6
* **Description** - Small / Medium / Large

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F93zQCOdnAtV5g9DKttzP%2Fs1-color.jpg?alt=media&#x26;token=ea1647bf-8f2d-46b8-bb09-714dfbccf97c" alt=""><figcaption></figcaption></figure>

* **Text color**
* **Overlay**&#x20;
* **Overlay opacity**
* **Overlay gradient** -  If overlay gradient is blank Overlay will use overlay color

### Buttons

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FuE1DjIFkBAWCO0qcUqg1%2Fs1-button.jpg?alt=media&#x26;token=691a6b9f-9165-4e95-a79a-226aaeae6137" alt=""><figcaption></figcaption></figure>

#### Button 1, Button 2

* **Label button** - Leave the label blank to hide the button.
* **Link**
* **Button type**
  * Primary
  * Outline
  * Underlined
  * Solid White
  * Outline White
  * Underlined White
  * Secondary