# 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: 1920x540\
Slideshow image mobile size: 767x700
{% 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>View</td><td>Choose how the slideshow transitions between slides:<br>• <strong>Normal</strong> – Standard slide transition.<br>• <strong>Curtain</strong> – A curtain-style animation effect.</td></tr><tr><td>Height</td><td><p>Customization of the "Slide height" in the Slideshow section is as follows:</p><ul><li>Adapt to first slide</li><li>Fit screen</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Arrow position</td><td><p>Customization of the "Arrow position" in the Slideshow section is as follows:</p><ul><li>Inline</li><li>Bottom</li></ul></td></tr><tr><td>Counter</td><td>Show or hide the slide counter to let visitors know which slide they’re on.</td></tr><tr><td>Counter color</td><td>Pick the color of the slide counter text to match your slideshow design.</td></tr><tr><td>Enable loop</td><td>Enabling loop will result in the slides continuously looping. </td></tr><tr><td>Auto rotation</td><td>Enable this checkbox to automatically play the images in the slideshow.</td></tr><tr><td>Enable product</td><td>Display product information (like product name, price) inside the slideshow slide.</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><tr><td>Mobile layout</td><td><p><strong>Content under images on mobile</strong> </p><p>By enabling this checkbox, you can view the slide content below the image in a mobile device.</p></td></tr><tr><td>Accessibility</td><td><strong>Slideshow description</strong><br>Describe the slideshow for customers using screen readers.</td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Frns0MUJn08KzJjA4sqHT%2FSlideshow.png?alt=media&#x26;token=2de4eceb-41a6-4b71-9323-e7c785d55c4e" 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. This image will be shown as the main banner background if no video is used.</p></td></tr><tr><td>Control image opacity</td><td>Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the slider image.</td></tr><tr><td>Video</td><td><p><strong>Video</strong> </p><p>You can select a video to use instead of a slider image. The video will act as the main background for the slide. </p><p></p><p><strong>URL</strong> </p><p>Paste a <strong>YouTube</strong> or <strong>Vimeo</strong> link if you want to embed a video directly into the slide. This allows for easy background video banners.</p></td></tr><tr><td>Heading</td><td><p><strong>Caption</strong> </p><p>Use this to add a <strong>short headline</strong> or phrase to highlight your main message.</p><p></p><p><strong>Text</strong><br>Enter text to display as a main heading of the slide.<br><br><strong>Size</strong></p><p>Customization of the "Heading 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>Enter the text you would like to display as a subtitle below the slide's main heading.</td></tr><tr><td>Product</td><td>Select a <strong>product</strong> to display within the slide.</td></tr><tr><td>Desktop content details</td><td><p><strong>Normal slide placement</strong> </p><p>To change the position of the content on the normal slide, utilize the "Normal slide placement" setting in desktop device. Customization of the "Normal slide placement" in the Slideshow section is as follows:</p><ul><li>Top left</li><li>Middle left</li><li>Bottom left</li></ul><p></p><p><strong>Curtain slide placement</strong> </p><p>If using the <strong>Curtain</strong> slideshow view, choose whether content appears at the <strong>Top</strong>, <strong>Middle</strong>, or <strong>Bottom</strong> of the slide.</p><p></p><p><strong>Content alignment</strong></p><p>Customization of "Desktop content alignment" in the slide 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></ul></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.</p></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>Mobile layout</td><td><p><strong>Image</strong> </p><p>If you want to add a separate image for mobile devices, add a image here.</p><p></p><p><strong>Content alignment</strong></p><p>Customization of "Mobile content alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fszly9dSHbXcgt3MosUsJ%2Fslideshow_block.png?alt=media&#x26;token=8e087dd2-c06f-4193-aee3-4845d8cb98a6" alt=""><figcaption></figcaption></figure>
