# Slideshow

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

The slideshow allows multiple slides to display with images and optional text. This section allows you to add a slideshow in full width or grid. There are many options available similar to the slideshow, as you can see in the below screenshot:

{% hint style="info" %}

**Recommendation Size**\
Slideshow image desktop size: 1920x750\
Slideshow image mobile size: 767x750
{% endhint %}

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

<table><thead><tr><th width="252">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the Slideshow section is as follows:</p><ul><li>Full width</li><li>Fluid</li><li>Container</li></ul></td></tr><tr><td>Design type on desktop</td><td><p>Customization of the "Design type" in the Slideshow section is as follows:</p><ul><li>Content beside the image</li><li>Content over the image</li></ul></td></tr><tr><td>Slide height</td><td><p>Customization of the "Slide height" in the Slideshow section is as follows:</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large </li><li>Full Screen height</li></ul><p>Full screen height works only when the 'Design type on desktop' is set to "Content over the image".</p></td></tr><tr><td>Image position on desktop</td><td><p>The Image position customization in the Slideshow section is as follows:</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td>Block padding on desktop</td><td>Utilize this feature to add spacing between blocks.</td></tr><tr><td>Carousel</td><td><p><strong>Pagination color scheme</strong></p><p>In this section, you can change the background and foreground color of the pagination 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<br></li></ul><p><strong>Pagination style</strong></p><p>The style of the slideshow navigation that appears below the images:</p><ul><li>Dots</li><li>Line</li><li>Counter</li><li>Numbers</li><li>Arrows<br></li></ul><p><strong>Enable loop</strong></p><p>Enabling loop will result in the slides continuously looping. <br><br><strong>Enable autoplay</strong></p><p>Enable this checkbox to automatically play the images in the slideshow.</p></td></tr><tr><td>Autoplay interval</td><td>Use the bar to set the auto-rotate time of the slideshow. You can set a minimum of “3” seconds and a maximum of “9” seconds.</td></tr><tr><td>Animations</td><td><p><strong>Image behavior</strong><br>Customization of the "Image behavior" in the Slideshow section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul><p>By employing the Ambient movement feature, the slider images will exhibit motion.</p></td></tr><tr><td>Mobile layout</td><td><strong>Show content below images on mobile</strong><br>By enabling this checkbox, you can view the slide content below the image in a mobile device.</td></tr><tr><td>Accessibility</td><td><strong>Slideshow description</strong><br>Describe the slideshow for customers using screen readers.</td></tr><tr><td>Color scheme</td><td><p>In this 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></tbody></table>

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2Fq8TPF80FVG26oyAZw5pK%2Fslideshow.png?alt=media&#x26;token=df6d5b85-ccb3-4d36-ba66-8199d14acbc7" alt=""><figcaption></figcaption></figure>

## Add Slide

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>Use "Image" to add the image to the slide.<br></p><p><strong>Mobile image</strong></p><p>Use "Mobile image" to add the mobile image to the section. this is optional because it will take desktop image when mobile image will not be added.</p></td></tr><tr><td>Text animation</td><td><p><strong>Enable text animation</strong><br>Enable this checkbox to show text animation this section.<br><br><strong>Text animation position</strong><br>Customization of the "Text animation position" in the Slideshow section is as follows:</p><ul><li>Bottom to top</li><li>Left to right</li><li>Right to left</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong><br>Enter text to display as a title in the section.<br><br><strong>Size</strong></p><p>Customization of the "Size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Subheading</td><td><strong>Text</strong><br>Enter the text you would like to display as a subtitle below the slide's title.</td></tr><tr><td>Button</td><td><p><strong>Label</strong></p><p>Use "Label" to add a label to the Button in the slide.<br><br><strong>Link</strong></p><p>Use "Button link" to add a link to the Button in the slide.<br><br></p><p><strong>Style</strong></p><p>Customization of the "Button style" in the slide is as follows:</p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the slide, utilize the "Desktop content position" setting. Customization of the "Desktop content position" 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></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices 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><li>Scheme 7</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile content alignment</strong></p><p>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right<br></li></ul><p><strong>Content position</strong></p><p>To change the position of the content on the slide, utilize the "Mobile content position" setting. Customization of the "Mobile content position" in the Slideshow section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom </li></ul></td></tr></tbody></table>

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FwokA1cvJREtKJDCJemJI%2Fslideshow-block.png?alt=media&#x26;token=12fbbbdd-3845-432e-8b05-1577d6fbd60f" alt=""><figcaption></figcaption></figure>