Slideshow is a dynamic and visually engaging section on a website that displays a series of images or slides. It can be used on the homepage or other prominent sections of the website to showcase products, promotions, brand images, or any other content the merchant wants to highlight.
To add the Slideshow,
- Go to Online Store > Themes and click Customize in your Shopify admin
- Then click Add section under Templates area. Now you can choose Slideshow from the list.
You can find the following settings inside the Slideshow,
| General settings | Description |
|---|---|
| Enable fullwidth | It will allow this section to occupy full width of the viewport if needed. |
| Width | It will allow you to set custom width for this section. Only applicable, if fullwidth is disabled. |
| Color scheme | Choose from any of predefined color scheme to display your section better. |
| Use inner padding | It will add the space around the section. |
| Height | It will define the height of the slideshow |
| Slider settings | Description |
|---|---|
| Enable autoplay | Set to move carousel automatically |
| Autoplay interval | Set the interval for autoplay |
| Enable loop | Set to display the first carousel element after last for loop |
| Enable mouse drag | It will allow you to drag each carousel element to move next/prev |
| Show navigation arrows | Set to show arrows on right & left sides |
| Show pagination dots | Set to display dots at the bottom of the section |
| Transition speed | Speed of switching between elements. |
Slide
Slideshow can have multiple Slide blocks. Each block can have their own headings, description & buttons.
You can find the following settings inside the each Slide block,
| General settings | Description |
|---|---|
| Background Image | Set the background image for the slide |
| Additional Background Image | It will display another background image on the right side. next to the actual background image (Optional) |
| Background for mobile | It will display this image over the actual image in mobile. |
| Overlay | It will display solid color over the background image. |
| Heading | It will display heading for the slide |
| Heading tag | Set the tag your preferred, it may be heading, paragraph or special tag |
| Custom width | |
| Subheading | It will display additional heading for the slide |
| Subheading tag | Set the tag your preferred, it may be heading, paragraph or special tag |
| Custom width | |
| Description | It will display description text for the slide |
| Description tag | Set the tag your preferred, it may be heading, paragraph or special tag |
| Custom width | |
| Button 1 label | It will display the button to slide |
| Button 1 URL | Set the url for the button |
| Button 1 target | Set the link to open in new tab or same tab. |
| Button 2 label | It will display the additional button to slide |
| Button 2 URL | Set the url for the button |
| Button 2 target | Set the link to open in new tab or same tab. |
You can find more information for mega menu here