# 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FL3om68MvznAAdJB9Csiy%2F2025-04-04_00-34-46.jpg?alt=media&#x26;token=db1735ff-897e-4d2e-b601-62211a6c1899" 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FqIaWrRXeowy3mRmbWtIv%2F2025-04-04_00-35-26.jpg?alt=media&#x26;token=9cbf246a-9d2b-4d3c-8559-0a19ee24064e" alt=""><figcaption></figcaption></figure>

* **Section width** -  Boxed / Wide / Full
* **Desktop height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Desktop fixed height ⇒** Height applied when 'Fixed height' is selected
* **Mobile height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Mobile fixed height ⇒** Height applied when 'Fixed height' is selected
* **Auto-rotate slides**&#x20;
* **Change slides every**
* **Pause auto rotate on hover**
* **Transition type** -  Zoom  /  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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FC7x3pocAwS4D055LVOKT%2F2025-04-04_00-38-00.jpg?alt=media&#x26;token=52269fbf-e62b-49bc-abfa-9497714d8542" 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://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F2PvzfH1u1Fx8xnwoyyEu%2F2025-04-04_00-38-45.jpg?alt=media&#x26;token=34c2dc66-36a6-4060-a4a2-91912d3f6c33" alt=""><figcaption></figcaption></figure>

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

### Layout & Content

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F7FJ81Skt8pQVFIBfcWqY%2F2025-04-04_00-39-28.jpg?alt=media&#x26;token=047970c0-fd96-4290-a554-04b10525f111" alt=""><figcaption></figcaption></figure>

* **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 ⇒**  `use [f] and [/f] to highlight the text`
* Highlighted word type ⇒ Single line / Multiple lines
* **Heading size** - From Heading Xl - Heading 6
* **Description** - Small / Medium / Large

### Colors

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Fh7Yvvzyof0PWleYYSceI%2F2025-04-04_00-41-57.jpg?alt=media&#x26;token=b396947a-a485-452e-a6d4-57c537fb29b1" alt=""><figcaption></figcaption></figure>

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

### Buttons

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FtO2mJcGURnWtbJgEJ7lz%2F2025-04-04_00-42-38.jpg?alt=media&#x26;token=b6ea6283-e553-4d2d-8a38-47e57664ff94" 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