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

# Slideshow

The **Slideshow** displays up to 8 auto-rotating slides to showcase your product images. You can fine-tune how your images look, all slide headings and colors, and add a mobile-specific image for the best experience across all devices.

![](/files/G56XGnwdeMtqVqLMBLDe)

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Slideshow**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add image slides</h2>

***

Add up to 8 slides with images and alternate mobile images. Set the focal point of the images and add an optional image link.

<sub><mark style="color:$info;">Click Slide block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="573">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image to display as the background of the banner.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Specify the main focus of your images for both desktop and mobile.<br><br>The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.</td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Select a page or URL to make the entire image a clickable link.</td></tr></tbody></table>

### <mark style="color:$primary;">Add slide content</mark>

Click a slide block to start adding content.

* Add **headings** and change **text size** and **position**.
* Add up to 2 **buttons**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Slide** block to open the settings.
2. Select a **Text position** to align all slide content in one of six possible positions.
3. (*Optional.*) Enter text for the **Accent** text to display above the **Heading**.

   > we recommend using the **Accent** as a label or category for what you're showcasing in the slide, such as "Products", "Collections", or "Sale", etc.
4. Add a **Heading** as a title of slide.

   > we recommend a short title of just a few words.

   > Set the **Heading size** to *Small*, *Medium*, or *Large*. Make sure it's large enough to be easily readable with your chosen font.
5. Add **Subheading** text to display below the heading.

   > We recommend a few words or short sentence.

   > Set the **Heading size** to *Small*, *Medium*, or *Large*. Make sure it's large enough to be easily readable with your chosen font.
6. (*Optional*) Use the sliders to adjust the **Heading size** and **Subheading size**.
7. Enter **Text** for a longer statement. We recommend text no longer than 3 lines on the slide.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).

   > Set the **Text size** to *Small*, *Regular* or *Large*.
8. Change the slide colors to match the slide image and your branding, including **Text** and **Buttons**.
9. Change the **Text color** to make sure the headings are readable against the other colors or your slide image.
10. Change the **Overlay color** and **Overlay opacity** using the slider to increase the contrast between the text and slide image.

    > These settings help make your text clear and readable.

    > Set the **Opacity** to **`100%`** to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.
11. (*Optional*) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

    > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
12. Click **Save**.

</details>

<sub><mark style="color:$info;">Click Slide block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="221">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Accent</mark></td><td>Add small text in all-capitals above the heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter heading text to display as the slide title.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter subheading text to display below the heading.</td></tr><tr><td><mark style="color:blue;">Heading font size</mark></td><td>Select font size for the heading.</td></tr><tr><td><mark style="color:blue;">Subheading font size</mark></td><td>Select font size for the subheading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a link for the button or slide.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Add custom text for your call-to-action button.</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Use a <strong>Solid</strong> or <strong>Outline</strong> style for the section button. The button uses the theme-wide button color set in the <a href="/pages/7UqaWJHr530MKWscpEMp#button-colors">color theme settings.</a></td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select the color of the slide text.</td></tr><tr><td><mark style="color:blue;">Buttons color</mark></td><td>Select the color of the button label (e.g. "Shop now")</td></tr><tr><td><mark style="color:blue;">Solid button text</mark></td><td>Select the text color for the buttons using the solid style.</td></tr></tbody></table>

### <mark style="color:$primary;">Background image overlay</mark>

The color **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

<sub>Click Slide block to find settings</sub>

<table><thead><tr><th width="190">Setting</th><th width="569">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select color scheme to apply 'Background' or 'Gradient' colors.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).</td></tr></tbody></table>

<h2 align="center">Slideshow height (image cropping)</h2>

***

You can choose to display slides with the **Original height** of your uploaded images (without cropping) or set a **Custom height** for all slides (with cropping).

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Slideshow** section to open the section settings.
2. Choose to display slides images with a **Custom** or their **Original** height (without cropping).

   > The **Custom** setting will make all slides uniform in height.

   > For the **Original** setting, we recommend uploading images with the same dimensions to avoid irregularity in the slideshow height when rotating.
3. If **Custom** height is selected: adjust the **Height** and **Mobile Height** of your slide images between 50% to 100% of the maximum height.

   > When **Custom height** is set to 50%, the slideshow will always display at half the height of the customer's screen or window height.
4. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="182">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image height</mark></td><td>Set the image height to Custom or Original. Select Original to display your uploaded image without cropping.</td></tr><tr><td><mark style="color:blue;">Custom height</mark></td><td>The height of the mobile slideshow as a percentage of the screen height.<br><br>Your image will be cropped to match the height. If the custom height is 100%, the slideshow will expand the full height of any screen.</td></tr></tbody></table>

<h2 align="center">Slide autoplay</h2>

***

By default, multiple slides will auto-rotate every 6 seconds. Change the time between slides or disable autoplay to let customers click through announcements manually.

#### Set time between slides

Display each announcement between **2** to **10** seconds. Announcements with more words may need more time for customers to read them.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Slideshow** section to open the section settings.
2. Click and drag the slider to select the number of seconds to display each slide (between **2** and **10** seconds).
3. Click **Save**.

</details>

#### <mark style="color:$info;">Turn off autoplay</mark>

If you turn off autoplay, customers can click the *next / previous* arrows to view slides at their own pace. Click the **Slideshow** section to open the settings and uncheck the **Enable autoplay** option.

{% hint style="info" %}
Turning off autoplay can make your online store accessible to more customers, including people with disabilities. Learn more about [accessibility for themes](/stiletto/general/editing-themes/accessibility.md) to help make the web inclusive and usable for everyone.
{% endhint %}

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="212">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable autoplay</mark></td><td>When checked, slides will auto-rotate.</td></tr><tr><td><mark style="color:blue;">Time between slides</mark></td><td>Set the number of seconds to show each slide before auto-rotating.</td></tr></tbody></table>

<h2 align="center">Slide navigation</h2>

***

Change the alignment and colors of the navigation buttons used for moving forward or backward through slides.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Slideshow** section to open the section settings.
2. Select a **Navigation alignment** to position the previous and next buttons at the bottom of the slides. Either **Left**, **Center**, or **Right**.
3. Change the **Foreground color** to make sure the navigation buttons are clearly visible on your slide image.
4. Change the **Background color** of the navigation buttons to add more contrast and match your slide images.
5. Click **Save**.

</details>

***

> **Related links**
>
> [Image hero](/stiletto/sections/theme-sections/image-hero.md)\
> [Image hero split](/stiletto/sections/theme-sections/image-hero-split.md)\
> [Gallery carousel](/stiletto/sections/theme-sections/gallery-carousel.md)\
> [Grid](/stiletto/sections/theme-sections/grid.md)