> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/slideshow.md).

# Slideshow

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Slideshow** section allows you to create an eye-catching hero banner using multiple slides.&#x20;

Each slide can include images, text, buttons, and optional products to promote collections, campaigns, or featured products.&#x20;

It is typically displayed at the top of the homepage to capture visitors' attention and encourage them to explore your store.

You can add a slideshow section to display a carousel of images on a page in your store.

#### When should I use this?

Use the Slideshow section when you want to:

• Promote a seasonal sale

• Introduce a new collection

• Highlight featured products

• Display brand campaigns

• Create a strong first impression for visitors

{% hint style="info" %}
**Recommendation Size**\
Slideshow image desktop size: 1920x850\
Slideshow image mobile size: 770x720
{% endhint %}

### How to add a Slideshow to your Shopify store <a href="#how-to-add-a-slideshow-to-your-shopify-store" id="how-to-add-a-slideshow-to-your-shopify-store"></a>

{% hint style="success" %}

### Steps

1. Open **Online Store → Themes → Customize**.
2. Click **Add section**.
3. Select **Slideshow**.
4. Configure the slideshow settings, including layout, height, navigation, autoplay, and styling.
5. Click **Add Slide** to create one or more slides.
6. Customize each slide by adding images, text, buttons, and optional products.
7. Save your changes.
   {% endhint %}

<table><thead><tr><th width="252">Setting</th><th>Description</th></tr></thead><tbody><tr><td>View</td><td><p>Choose how the slideshow transitions between slides:<br>• <strong>Normal</strong> – Standard slide transition.<br>• <strong>Curtain</strong> – layered transition effect </p><p></p><p>For visual guide show <a href="#view"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Back text</td><td>Displays decorative background text behind the slide content. For the best visual appearance, use a maximum of <strong>two words</strong> or <strong>ten letters</strong>. For visual guide show <a href="#back-text"><mark style="color:$primary;">screenshot</mark></a></td></tr><tr><td>Height</td><td><p>Customization of the "Slide height" in the Slideshow section is as follows:</p><ul><li>Adapt to first slide</li><li>Fit screen</li><li>Small</li><li>Medium</li><li>Large </li></ul><p>For visual guide show <a href="#height"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Arrow position</td><td><p>Customization of the "Arrow position" in the Slideshow section is as follows:</p><ul><li>Inline</li><li>Bottom </li></ul><p>For visual guide show <a href="#arrow-position"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Counter</td><td><p>Show or hide the slide number indicator. </p><p>For visual guide show <a href="#counter"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Mobile slide arrow position</td><td><p>Customization of the "Mobile arrow position" in the Slideshow section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Counter color</td><td>Pick the color of the slide counter text to match your slideshow design.</td></tr><tr><td>Enable loop</td><td>Continuously cycles through all slides. When enabled, the slideshow automatically returns to the first slide after displaying the last slide.</td></tr><tr><td>Auto rotation</td><td>Automatically switches between slides after a set interval.</td></tr><tr><td>Enable product</td><td>Display product information (like product name, price) inside the slideshow when configured in individual slides.</td></tr><tr><td>Heading font</td><td>Select a custom font for slide headings.</td></tr><tr><td>Use default font</td><td>Uses the theme's default heading font instead of the selected custom font.</td></tr><tr><td>Top space</td><td>Adds space above the slideshow section.</td></tr><tr><td>Bottom space</td><td>Adds space below the slideshow section.</td></tr><tr><td>Color scheme</td><td><p>Select the predefined color scheme for the slideshow section, you can change the background and foreground color of the section using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Content under images on mobile</strong> </p><p>By enabling this checkbox, you can view the slide content below the image in a mobile device. </p><p></p><p>For visual guide show <a href="#mobile-slide-arrow-position"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Accessibility</td><td><p><strong>Slideshow description</strong> </p><p>Describe the slideshow for customers using screen readers.</p></td></tr></tbody></table>

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

## Section settings screenshot

#### View

<div data-with-frame="true"><figure><img src="/files/HVsjNpEFtek3U082wLgv" alt=""><figcaption><p><strong>Slider view — Normal</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/q7HgJSzko9YFwKgnUhvn" alt=""><figcaption><p><strong>Slider view — Curtain</strong></p></figcaption></figure></div>

#### Back text

<div data-with-frame="true"><figure><img src="/files/EWsSKOdLQ8LxKb4FNowV" alt=""><figcaption><p><strong>Back text</strong></p></figcaption></figure></div>

#### Height

<div data-with-frame="true"><figure><img src="/files/FIFNobjxm986LNKs5UtC" alt=""><figcaption><p><strong>Height — Adapt to first slide</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/6MKAQyu2NWyvVeWeZ62z" alt=""><figcaption><p><strong>Height — Fit screen</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/7HyWNR4To7HDFINOAsWe" alt=""><figcaption><p><strong>Height — Small</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/mDgndo3MiVl5lbTAPYvr" alt=""><figcaption><p><strong>Height — Medium</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/onySUkcBn2LKVNbVwzdV" alt=""><figcaption><p><strong>Height — Large</strong></p></figcaption></figure></div>

#### Arrow position

<div data-with-frame="true"><figure><img src="/files/Rw5pfPvRKG9gGC3DuIKH" alt=""><figcaption><p><strong>Arrow position — Inline</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/eAHD2JMk1iNoZWY5kvM7" alt=""><figcaption><p><strong>Arrow position — Bottom</strong></p></figcaption></figure></div>

#### Counter

<div data-with-frame="true"><figure><img src="/files/JigGWF1eOxw1SDHdehxG" alt=""><figcaption><p><strong>Counter — Enabled</strong></p></figcaption></figure></div>

#### Mobile slide arrow position

<div data-with-frame="true"><figure><img src="/files/xnrELyfbLCsieAzmXxiy" alt=""><figcaption><p><strong>Content under images on mobile - Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/u3HSX9LUs4Lgm26uQqqu" alt=""><figcaption><p><strong>Content under images on mobile - Disabled</strong></p></figcaption></figure></div>

## Add Slide

A **Slide** represents a single banner within the **Slideshow** section.&#x20;

Each slide can display an image or video, promotional text, buttons, and optional featured product information.&#x20;

You can create multiple slides to showcase seasonal promotions, featured collections, new arrivals, or special campaigns.

To add slides to the slideshow section, click on the 'Add Slide'. There are many options available similar to the slideshow, as you can see in the below points and screenshot:

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Slide</td><td><p><strong>Image</strong></p><p>Upload or select the main image for the slide.</p><p></p><p>This image will be shown as the main banner background if no video is used. </p><p></p><p>For visual guide show <a href="#image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Control image opacity</td><td><p>Adjusts the transparency of the background image. </p><p></p><p>Lower opacity makes the image darker, helping text stand out more clearly. Increase the opacity if you want the image to appear more vibrant. </p><p></p><p>For visual guide show <a href="#control-image-opacity"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Video</td><td><p><strong>Video</strong> </p><p>You can select a video to use instead of a slider image. The video will act as the main background for the slide. Selected image work as a cover image when video is selected and autoplay option is disabled.</p><p><br>Recommended size: <strong>1920 × 850 px</strong>.</p><p></p><p><strong>URL</strong> </p><p>Enter a YouTube or Vimeo video URL if you want to display an externally hosted video.</p></td></tr><tr><td>Heading</td><td><p><strong>Caption</strong> </p><p>Displays a small text label above the main heading, ideal for collection names or promotional tags.</p><p></p><p><strong>Text</strong><br>Displays the main heading of the slide. This is the primary promotional message shown to customers.</p><p></p><p><strong>Highlight text color</strong> </p><p>Choose the color used for highlighted words within the slide heading.</p><p></p><p>To highlight specific text, place the desired words between double forward slashes (<code>//</code>) inside the heading field.</p><p></p><p><strong>Example</strong></p><p></p><p>Heading:<br><code>SKINCARE THAT SEES YOUR //BEAUTY//</code></p><p></p><p>Result:<br>The word <strong>BEAUTY</strong> will be displayed using the selected highlight color.</p><p></p><p>This setting helps draw attention to important keywords and create visually engaging hero banners.</p><p></p><p><em><strong>Note:</strong> Highlight colors are only applied to text wrapped with double forward slashes (<code>//</code>).</em><br></p><p>For visual guide show <a href="#highlight-text-color"><mark style="color:$primary;">screenshot</mark></a></p><p><br><strong>Size</strong></p><p>Customization of the "Heading Size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large </li><li>Extra large</li></ul></td></tr><tr><td>Subheading</td><td>Displays additional information below the main heading to provide more details about the promotion or collection.</td></tr><tr><td>Product</td><td><p>Select a featured product to display inside the slide when the <strong>Enable Product</strong> option is enabled in the Slideshow section.</p><p>This helps customers quickly discover and purchase promoted products.</p></td></tr><tr><td>Enable text middle for desktop</td><td><p>Enable this option to vertically center the slide content within the slideshow on desktop devices.</p><p></p><p>This setting is particularly useful when you want the heading, text, and button content to appear in the middle of the slide for a more balanced and visually impactful presentation.</p><p></p><h4>Requirements</h4><p></p><p>To use this setting, the following slideshow configurations must be applied:</p><p></p><p><strong>Step 1</strong></p><p>Navigate to <strong>Slideshow Section Settings</strong> and set:</p><ul><li><strong>Slider View Type:</strong> <code>Curtain</code></li></ul><p></p><p><strong>Step 2</strong></p><p>Open the desired <strong>Slide Block</strong> and configure the following settings under <strong>Content Details</strong>:</p><ul><li><strong>Slide Placement:</strong> <code>Bottom Center</code></li><li><strong>Enable Curtain Slide in Grid:</strong> Enabled</li><li><strong>Content Alignment for Desktop:</strong> <code>Center</code></li></ul><p></p><p><strong>Note:</strong> This setting is designed specifically for the Curtain slideshow layout and may not produce the intended result with other slideshow view types. </p><p></p><p>For visual guide show <a href="#enable-text-middle-for-desktop"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Desktop content details</td><td><p><strong>Slide placement</strong> </p><p>To change the position of the content on the normal slide, utilize the "Slide placement" setting in desktop device. </p><p>Customization of the "Normal slide placement" in the Slideshow section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul><p><em><strong>Note:</strong> This setting options only visible when '<strong>Slider view</strong>' is set to '<strong>Normal</strong>' or when '<strong>Slider view</strong>' is set to '<strong>Curtain</strong>' and '<strong>Enable curtain slide in grid</strong>' is '<strong>Enabled</strong>'</em>.</p><p></p><p>For visual guide show <a href="#content-details-slide-placement"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Curtain slide placement</strong> </p><p>If using the <strong>Curtain</strong> slideshow view, choose whether content appears at the <strong>Top</strong>, <strong>Middle</strong>, or <strong>Bottom</strong> of the slide.</p><p><em><strong>Note:</strong> This setting options only visible when '<strong>Slider view</strong>' is set to '<strong>Curtain</strong>' and '<strong>Enable curtain slide in grid</strong>' is '<strong>Disabled</strong>'.</em> </p><p></p><p>For visual guide show <a href="#content-details-slide-placement-curtain-view"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Enable curtain slide in grid</strong></p><p>Enable this to show curtain slide in grid view.  </p><p></p><p><em><strong>Note:</strong></em> <strong>Enable curtain slide in grid</strong> <em>setting only visible when '<strong>Slider view</strong>' is set to '<strong>Curtain</strong>'.</em></p><p></p><p><strong>Content alignment for desktop</strong></p><p>Customization of "Desktop content alignment" in the slide is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p>Choose the alignment that provides the best readability based on your banner image.</p></td></tr><tr><td>Button</td><td><p><strong>Label</strong></p><p>Enter the text displayed on the primary call-to-action button.<br><br><strong>Link</strong></p><p>Select the page, product, collection, blog, or custom URL opened when customers click the primary button.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Image</strong> </p><p>Upload a separate image optimized for mobile devices. Using a dedicated mobile image ensures important content remains visible on smaller screens.  <strong>Recommended size:</strong> <strong>770 × 720 px</strong>.</p><p>For visual guide show <a href="#mobile-image"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Content alignment</strong></p><p>Customization of "Mobile content alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/tKLaOkxblk3JlDerHKZM" alt=""><figcaption></figcaption></figure></div>

## Block settings screenshot

#### **Image**

<div data-with-frame="true"><figure><img src="/files/4oLzTxZcBV97iuqXGRMN" alt=""><figcaption><p><strong>Slide image</strong></p></figcaption></figure></div>

#### Control image opacity

<div data-with-frame="true"><figure><img src="/files/hFz3EYHq46iS2qmBJhzP" alt=""><figcaption><p><strong>No Overlay —  image opacity — 0%</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/tMpTTJhuMLfAWgOC776J" alt=""><figcaption><p><strong>Medium Overlay —  image opacity — 50%</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/DGMlRP3MsdGTNacIioag" alt=""><figcaption><p><strong>image opacity — 80%</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/Xrvlq7ZXuM5FGal0hdYW" alt=""><figcaption><p><strong>Solid background —  image opacity — 100%</strong></p></figcaption></figure></div>

#### Highlight text color

{% hint style="danger" %}
**Note:** Use the double slash "//" "//" to highlight text.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/uVpoxwjXWUHmlULsR4yd" alt=""><figcaption><p><strong>Highlight text color</strong></p></figcaption></figure></div>

#### Content details Slide placement&#x20;

{% hint style="danger" %}
***Note:** This setting options only visible when '**Slider view**' is set to '**Normal**' or when '**Slider view**' is set to '**Curtain**' and '**Enable curtain slide in grid**' is '**Enabled**'*.

* *This setting options only visible when '**Slider view**' is set to '**Normal**'.*

1. <img src="/files/W58j0tyZPxGQrHkppuYF" alt="" data-size="original">
2. <img src="/files/n7821Ru7j4eCbH4a8wiF" alt="" data-size="original">

* &#x20;*This setting options visible when '**Slider view**' is set to '**Curtain**' and '**Enable curtain slide in grid**' is '**Enabled**'*.

1. <img src="/files/Koq3P8OSV7uof4gBr73F" alt="" data-size="original">
2. <img src="/files/1JbZ5xkw2hVcGEvzM6z3" alt="" data-size="original">

{% endhint %}

<div data-with-frame="true"><figure><img src="/files/sg07KtJbqYMi1xK3TW8Q" alt=""><figcaption><p><strong>Slide placement — Top left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/F7yTN4hkkZXbPSOLqYBp" alt=""><figcaption><p><strong>Slide placement — Top center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/1Xg3Zak8u5iqBpVI0Awk" alt=""><figcaption><p><strong>Slide placement — Top Right</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/Fgh7ETrSSK92o6imWbq8" alt=""><figcaption><p><strong>Slide placement — Middle left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/y3qbghXQdERGJ89KbgBV" alt=""><figcaption><p><strong>Slide placement — Middle center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/WNlYe13dYQu041g0S3yH" alt=""><figcaption><p><strong>Slide placement — Middle right</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/TeYLHpN3afNdKrosTHqb" alt=""><figcaption><p><strong>Slide placement — Bottom left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/33Sa8wR0LofxaZLIoaY1" alt=""><figcaption><p><strong>Slide placement — Bottom center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/I4CSftWfLEnLZ4xCiI7e" alt=""><figcaption><p><strong>Slide placement — Bottom right</strong></p></figcaption></figure></div>

#### Content details Slide placement '<mark style="color:$primary;">Curtain</mark>' view

{% hint style="danger" %}
*This setting options visible when '**Slider view**' is set to '**Curtain**' and '**Enable curtain slide in grid**' is '**Disabled**'.*&#x20;

1. <img src="/files/Koq3P8OSV7uof4gBr73F" alt="" data-size="original">
2. <img src="/files/YkGB2Ftt48XR1NPzLyEU" alt="" data-size="original">

{% endhint %}

<div data-with-frame="true"><figure><img src="/files/YIdVSWrq0JpcGwgL1izE" alt=""><figcaption><p> <strong>Slide placement — Top</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/1NJGaoe7Dio5j4RxKkVZ" alt=""><figcaption><p><strong>Slide placement — Middle</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/v83oYg4HYfQM1DmsKN2n" alt=""><figcaption><p><strong>Slide placement — Bottom</strong></p></figcaption></figure></div>

#### **Enable curtain slide in grid**

{% hint style="danger" %}
*This setting options visible when '**Slider view**' is set to '**Curtain**'.*&#x20;

<img src="/files/Koq3P8OSV7uof4gBr73F" alt="" data-size="original">
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/uutXq67kbNS8CzVnsSz7" alt=""><figcaption><p><strong>Enable curtain slide in grid — disabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/fz27TzykaOD5qST7i99i" alt=""><figcaption><p><strong>Enable curtain slide in grid — Enabled</strong></p></figcaption></figure></div>

#### Enable text middle for desktop

{% hint style="danger" %}
**Note:** To visible this setting,

1. *'**Slider view**' is set to '**Curtain**'.*&#x20;
2. **Slide Placement:** `Bottom Center`
3. **Enable Curtain Slide in Grid:** Enabled
   {% endhint %}

<div data-with-frame="true"><figure><img src="/files/yCJOdhBjlHdhYBLn8FDx" alt=""><figcaption><p><strong>Enable text middle for desktop</strong></p></figcaption></figure></div>

#### Content alignment for desktop

<div data-with-frame="true"><figure><img src="/files/NrDhd7UZXD8A8wwqpcw9" alt=""><figcaption><p><strong>Content alignment for desktop — Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/kqPfcifMgAxiGdErIqns" alt=""><figcaption><p><strong>Content alignment for desktop — Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/0FTueAngZ3pB4bgata1o" alt=""><figcaption><p><strong>Content alignment for desktop — Right</strong></p></figcaption></figure></div>

#### Mobile image

<div data-with-frame="true"><figure><img src="/files/SduLHmdi5V4DAhSr4ALe" alt=""><figcaption><p><strong>Mobile image</strong></p></figcaption></figure></div>

## Best Practices

✔ Use high-quality images with a resolution of **1920 × 850 px** for desktop.

✔ Upload a dedicated **mobile image** to improve the appearance of the slideshow on phones and tablets.

✔ Keep the **Caption** short (1–3 words) to introduce the promotion or collection.

✔ Limit the **Heading** to 6–10 words for maximum impact and readability.

✔ Use the **Subheading** to provide additional details without overcrowding the banner.

✔ Highlight only one or two important words using the **Highlight Text Color** feature to draw attention.

✔ Position the content where it does not overlap important parts of the image.

✔ Choose button labels that encourage action, such as **Shop Now**, **Explore Collection**, or **Learn More**.