# Slideshow

The **Slideshow** displays 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.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FIOW1TcB7OaUZAB2zLP7h%2Fslideshow-barista.png?alt=media&#x26;token=7cd0f141-43b6-481f-90ab-769839664c2c" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Add slides

***

Click **(+) Add block** to add a slide block. Use the drag-and-drop handles **`⋮⋮`** to change the order of the slides. Click the **Slide blocks** to add an image.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../section-styles#image-overlays">#image-overlays</a></td><td><a href="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F73JN6EXgS8wovHQZ2N6u%2Foverlay-solid.png?alt=media&#x26;token=780c4a79-021f-4cd4-96e1-f7ea21e4356e">overlay-solid.png</a></td></tr></tbody></table>

`Click Image slide block to find settings`

<table><thead><tr><th width="179">Setting</th><th>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 link</mark></td><td>Select a page or URL to make the entire image a clickable link.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>For desktop and mobile, select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

## Add slide content

***

After adding an image, add **headings**, **text**, and **buttons**. You can adjust the **text size** and change the **alignment** of the slide content.

&#x20;

`Click Slide block to find settings`

<table><thead><tr><th width="157">Setting</th><th width="423">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Custom width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td>4<strong>00 - 1000 px</strong></td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Set the position of the text content for mobile screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>The small text above the heading.</td><td></td></tr><tr><td><mark style="color:blue;">Accent divider</mark></td><td>Choose to show a border beneath the Accent heading.</td><td></td></tr><tr><td><mark style="color:blue;">Accent divider color</mark></td><td>Choose to use the <strong>Theme color</strong> (as selected in the theme settings) or the <strong>Current color</strong> (as selected in the section settings).</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the slide.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1 - 8</strong></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the section text from small to large.</td><td><strong>1 - 8</strong></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

## Show text box

***

Choose to display the slide content inside a text box. You can show tiles with shadows or borders.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F1IlcUx1CiiuemvRF247u%2Ftext-box.png?alt=media&#x26;token=db9b1411-8274-4cc4-95e3-a7d21214395e" alt=""><figcaption><p>Soft shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FY0ixtRIckHZYj5cOdTw1%2Ftext-box-shadow.png?alt=media&#x26;token=1e3e62fa-d5c2-4c31-a476-b2014989dd27" alt=""><figcaption><p>Solid shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FlquZUPY7bpLAKH624yY7%2Ftext-box-border.png?alt=media&#x26;token=58816514-bec7-4250-947f-cb4852b84f57" alt=""><figcaption><p>Thick border</p></figcaption></figure></div>

`Click Slideshow section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text box</mark></td><td>Choose to show a border around the slide content.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display text boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><p>Select the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default colors: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You may also select one of the two custom color schemas.</p><p><br>Learn more about <a href="../../../theme-styles/colors#color-schemes">Color schemes</a>.</p></td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to apply custom colors to the section.<br><br>These colors will override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for all text.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for background of text box.</td></tr></tbody></table>

&#x20;

## Customize slideshow

***

Click the **Slideshow** section to customize the overall appearance of the section.

&#x20;

### Set image width and height

***

Under **Image height**, choose to display the image with a **Fixed** or **Relative** height.

* **Fixed** heights maintain the same pixel height on all screens.
* **Relative** heights adapt the image height as a percentage of the screen height.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="167">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable full width</mark></td><td>Choose to span the slide across the whole window or screen, removing the margins on either side.</td><td></td></tr><tr><td><mark style="color:blue;">Desktop height</mark></td><td>Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>250 - 750px<br><strong>Relative height</strong><br>50 - 100%</td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>150 - 750px<br><strong>Relative height</strong><br>50 - 100%</td></tr></tbody></table>

&#x20;

### Autoplay slides

***

By default, multiple slides will auto-rotate every 6 seconds. You can change the **time between slides** or **disable autoplay** to let visitors rotate through slides with the pagination buttons.

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable autoplay</mark></td><td>When checked, slides will auto-rotate.</td><td></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><td><strong>4 - 20 secs</strong></td></tr></tbody></table>

&#x20;

### Slide navigation

***

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

&#x20;

`Click Slideshow section to find settings`

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Navigation alignment</mark></td><td>Choose to align the navigation buttons either to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the slides.</td></tr><tr><td><mark style="color:blue;">Show drop shadows</mark></td><td>Display colored shadows around the navigation elements.</td></tr><tr><td><mark style="color:blue;">Foreground</mark></td><td>Change the color of the autoplay bar and play/pause button.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>Change the color of the box behind the navigation buttons.</td></tr><tr><td><mark style="color:blue;">Background opacity</mark></td><td>Use the slider to adjust the transparency of the background.<br><br>Set the opacity to 0% to hide the background. If set to 100%, the background will be opaque.</td></tr><tr><td><mark style="color:blue;">Background effect</mark></td><td>Choose to use a color Fill or a Radial gradient for the background.</td></tr></tbody></table>

&#x20;<br>

***

> **Related links**
>
> [Grid](https://help.fluorescent.co/cornerstone/pages/theme-sections/grid)\
> [Image hero](https://help.fluorescent.co/cornerstone/pages/theme-sections/image-hero)\
> [Image with content](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content)