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

# Slideshow

You can add a slideshow of images to your home page. In the slideshow section, you have the option to adjust the slide heights, add text and buttons and set the slides to rotate automatically.

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FFzX0Y0m8QqCXQxP0XGUe%2Fimage.png?alt=media&amp;token=fe38168c-f963-4c01-bf90-20ac55242b44" alt=""><figcaption></figcaption></figure>

To add this section, please follow the below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Slideshow**".

## Section settings <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>The layout for the slideshow:</p><ul><li>Full width</li><li>Grid</li></ul></td></tr><tr><td>Slide height</td><td><p>Determines the height of the image:</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop image padding</td><td>Creates space on the left and the right of image.</td></tr><tr><td>Pagination style</td><td>Choose layout for the pagination.</td></tr><tr><td>Auto-rotate slides</td><td>Set the slideshow to play automatically.</td></tr><tr><td>Change slides every</td><td>Choose how often to change slides.</td></tr></tbody></table>

#### Animations

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image behavior</td><td><p>Animation for the image when scroll:</p><ul><li>None</li><li>Ambient movement</li><li>Zoom in on scroll</li></ul></td></tr></tbody></table>

#### Mobile layout

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show content below images on mobile</td><td>The content displays below the images, instead of lying on the images.</td></tr></tbody></table>

#### Accessibility

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Slideshow description</td><td>Describe the slideshow for customers using screen readers.</td></tr></tbody></table>

#### Section padding

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).</td></tr></tbody></table>

## Slide block

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>The image for this block.</td></tr><tr><td>Heading</td><td>The heading for this block.</td></tr><tr><td>Heading size</td><td><p>The size of the heading text:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li><li>Huge</li></ul><p></p></td></tr><tr><td>Heading font weight</td><td><p>The font weight of the heading text:</p><ul><li>Regular</li><li>Medium</li><li>SemiBold</li><li>Bold</li><li>ExtraBold</li><li>Black</li></ul></td></tr><tr><td>Subheading</td><td>Add the text for this block. This text appears below the heading text.</td></tr><tr><td>Button label</td><td>The text that displays on the button. Leave the label blank to hide the button.</td></tr><tr><td>Button link</td><td>The URL that you want the button to link to.</td></tr><tr><td>Button style</td><td><p>Style of the button:</p><ul><li>Filled</li><li>Text link</li><li>Outlined</li></ul></td></tr><tr><td>Desktop content position</td><td><p>Positions the content relative to the image:</p><ul><li><strong>Top Left</strong> - Positions the content to the top vertically and the left horizontally.</li><li><strong>Top Center</strong> - Positions the content to the top vertically and the center horizontally.</li><li><strong>Middle Left</strong> - Positions the content to the middle vertically and the left horizontally.</li><li><strong>Middle Center</strong> - Positions the content to the middle vertically and the center horizontally.</li><li><strong>Bottom Left</strong> - Positions the content to the bottom vertically and the left horizontally.</li><li><strong>Bottom Center</strong> - Positions the content to the bottom vertically and the center horizontally.</li></ul></td></tr><tr><td>Show container on desktop</td><td>Show background for the content.</td></tr><tr><td>Desktop content alignment</td><td><p>Sets the alignment of the content on desktop:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr><tr><td>Image overlay opacity</td><td>Dims the banner image with an overlay.</td></tr><tr><td>Color scheme</td><td>Set the color for this slide.</td></tr></tbody></table>

#### Mobile layout

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile content alignment</td><td><p>Sets the alignment of the content on mobile:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr></tbody></table>