# 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.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FZhv8WLzTcZ1Gg6tMeCVO%2Fslideshow.jpeg?alt=media\&token=02ca5c06-01de-4ff6-867e-52f39a6061d9)

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add image slides

***

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

`Click Slide block to find settings`

<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>

## Add slide text and buttons

***

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>

`Click Slide block to find settings`

<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="../../../theme-styles/colors#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>

## Add color overlay

***

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

* Select **colors** for the overlay and overlay text
* Change the **opacity** to make the overlay more or less transparent
* Choose to use a **color gradient** for the overlay

`Click Slide block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="569">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay</mark></td><td>Select the color of the overlay.</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><tr><td><mark style="color:blue;">Overlay gradient</mark></td><td><p>Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient.</p><p>See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</p></td></tr></tbody></table>

## Slideshow height (image cropping)

***

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>

`Click section to find settings`

<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>

## Slide autoplay

***

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>

#### Turn off autoplay

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](https://help.fluorescent.co/stiletto/general/editing-themes/accessibility) to help make the web inclusive and usable for everyone.
{% endhint %}

`Click section to find settings`

<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>

## Slide navigation

***

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](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero)\
> [Image hero split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero-split)\
> [Gallery carousel](https://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel)\
> [Grid](https://help.fluorescent.co/stiletto/sections/theme-sections/grid)