> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/banners/slideshow.md). # Slideshow The Slideshow section displays multiple images or videos that automatically rotate or can be manually navigated. It's perfect for showcasing multiple promotions, featured products, or brand stories in an engaging, dynamic format. Each slide can contain its own image, text content, and call-to-action buttons, making it ideal for highlighting different aspects of your business or running multiple campaigns simultaneously.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Navigate to the page where you want to add the slideshow, or click **Add section** and select **Slideshow**. 3. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Layout * **Height**: Controls how tall each slide appears on desktop. Choose "Adapt image" to match your image's natural proportions, or select a fixed height (Small, Medium, Large, Full-screen, or Screen-adapted) for consistent sizing across all slides. * **Mobile height**: Sets the slide height specifically for mobile devices, allowing you to have different proportions on mobile versus desktop. * **Image behavior**: Choose how images or videos animate within each slide. Options include "None" for static images, "Ambient" for subtle movement, or "Zoom-in" for a gentle zoom animation. * **Text animation style**: Controls how text content appears when a slide becomes active. Choose from "Fade-up" (text slides up and fades in), "Fade-left", "Fade-right", or "Scale" (text grows from small to full size). {% hint style="info" %} Use "Screen adapted" option only if the section is the first section on the page. {% endhint %} #### Slideshow Settings * **Slide transition effect**: Determines how slides transition between each other. "Fade" creates a smooth crossfade effect, while "Blur-fade" adds a blur effect during the transition for a more dramatic look. * **Autoplay**: When enabled, slides automatically advance to the next slide after a set amount of time, creating a hands-free presentation. * **Change slides every**: This setting appears when "Auto rotate" is enabled. Controls how many seconds each slide displays before automatically moving to the next (3 to 9 seconds). * **Pause slideshow on hover**: This setting appears when "Auto rotate" is enabled. When enabled, the slideshow pauses when visitors hover their mouse over it, giving them time to read the content. #### Slideshow Controls * **Hide slideshow controls**: When enabled, completely hides the navigation controls (arrows and dots) from view. * **Hide prev/next buttons**: This setting appears when controls are visible. Hides only the previous/next arrow buttons while keeping the dot indicators visible. * **Hide indicators buttons**: This setting appears when controls are visible. Hides only the dot indicators while keeping the arrow buttons visible. * **Size**: Controls the size of the navigation controls. Choose from Small, Medium, Large, or Extra Large to match your design preferences. * **Color scheme**: Select a predefined color scheme that controls the colors of the navigation controls. * **Transparent slideshow controls**: When enabled, removes the background from the controls, making them blend more seamlessly with your slides. * **Position**: Positions the navigation controls on the slideshow. Choose from Top-left, Top-right, Bottom-left, Bottom-center, or Bottom-right. #### Content * **Enable custom borders**: When enabled, allows you to add custom borders and rounded corners to the text content boxes on each slide. * **Content border width**: This setting appears when custom borders are enabled. Controls the thickness of the border around text content boxes (0 to 10 pixels). * **Content border radius**: This setting appears when custom borders are enabled. Controls how rounded the corners of text content boxes are (0 to 50 pixels). #### Effects * **Overlay on scroll**: When enabled, adds an overlay that gradually becomes darker as visitors scroll down the page, improving text readability. * **Overlay target opacity**: This setting appears when "Overlay darken on scroll" is enabled. Controls how dark the overlay becomes at the end of the scroll animation (0 to 100%). * **Scroll overlay color**: This setting appears when "Overlay darken on scroll" is enabled. Choose the color of the overlay that appears when scrolling. #### Accessibility * **Slideshow description**: A text description that helps screen readers understand what the slideshow contains. This improves the experience for visitors using assistive technologies. *** ### Slide Block Settings Each slide in your slideshow can be customized individually. Click on a slide block to access these settings: #### Media * **Image**: Upload the main image for this slide that will be displayed on desktop devices. * **Video**: Alternatively, upload a video file to play as the background for this slide instead of an image. {% hint style="info" %} If a video is selected, it will take priority over the image. {% endhint %} #### Media Mobile * **Image**: Upload a separate image optimized for mobile devices. If left empty, the desktop image will be used on mobile. * **Video**: Upload a separate video for mobile devices. If left empty, the desktop video will be used on mobile. #### Effects * **Overlay opacity**: Adds a colored overlay on top of this slide's image or video to improve text readability. Set to 0% for no overlay, or increase the percentage to make the overlay more visible. * **Overlay color**: Choose the color of the overlay that appears on this slide's media. #### Link * **Slide link**: Optionally add a URL that the entire slide will link to when clicked. If you add buttons to the slide, those will take priority over this link. #### Layout * **Container**: When enabled, displays a background box behind the text content on this slide. When disabled, text appears directly over the image without a background. * **Content position**: Choose where the text content box appears on this slide. You can position it at the top, middle, or bottom, and align it to the left, center, or right. * **Content max width**: Controls the maximum width of the text content box for this slide. Choose from Small, Medium, or Large. * **Content max width limit**: Determines whether the content container spans the full width of the page or stays within the standard page width boundaries (setted in [Layout Settings](/docs/theme-settings/layout.md)). * **Content alignment**: Controls how text is aligned within the content box on desktop (left, center, or right). * **Color scheme**: Select a predefined color scheme that controls the text colors and background styling of this slide's content box. #### Mobile Layout * **Mobile content position**: Choose where the text content appears on mobile devices for this slide (top, center, or bottom). * **Text alignment mobile**: Controls text alignment on mobile devices for this slide (left, center, or right). #### Caption * **Text**: Add a small text caption that appears above the main heading. Useful for labels like "New Collection" or "Limited Time". * **Size**: Controls the size of the caption text (Small, Medium, or Large). #### Heading Content * **Heading**: The main headline text for this slide. You can format it with bold, italic, and other text styling. * **Heading size**: Controls the size of the heading text, from Small (H4) to Extra Extra Extra Large (HXXXL). * **Subheading**: Add descriptive text that appears below the heading. This can include multiple paragraphs and basic formatting. #### Icon with Text * **Show icon with text**: When enabled, displays up to three icons with text labels on this slide, perfect for highlighting key features or benefits. * **Layout**: Choose whether icons appear horizontally (side by side) or vertically (stacked). * **Icon size**: Controls the size of the icons. * **Font size**: Controls the size of the text labels below each icon. * **Icon 1, 2, 3**: Select an icon from the library for each position, or upload a custom image icon. * **Image 1, 2, 3**: Upload custom image icons as an alternative to the icon library. * **Heading 1, 2, 3**: Add text labels that appear below each icon. #### Countdown Timer * **Show countdown timer**: When enabled, displays a countdown timer on this slide, perfect for time-sensitive promotions or sales. * **End date**: Set the date when the countdown should end (format: YYYY-MM-DD, e.g., 2026-12-01). * **End time**: Set the specific time when the countdown should end (format: HH:MM:SS, e.g., 12:00:00). * **End text**: Customize the message that appears when the countdown reaches zero. * **Number size**: Controls the size of the countdown numbers. * **Label size**: Controls the size of the time unit labels (Days, Hours, Minutes, Seconds). * **Container**: When enabled, displays a background box behind the countdown timer. * **Color scheme**: Select a color scheme for the countdown timer. #### Button * **Buttons full width**: When enabled, makes buttons span the full width of the content box. * **Button label 1**: The text that appears on the first button. * **Link**: The URL the first button links to. * **Button style 1**: Choose the visual style of the first button (Solid, Outline, Transparent, or Link). * **Button label 2**: The text that appears on the second button (optional). * **Link**: The URL the second button links to. * **Button style 2**: Choose the visual style of the second button (Solid, Outline, Transparent, or Link). *** ### Tips * Use high-resolution images (at least 1920px wide) for best quality on desktop screens. * Prefer one strong headline + one clear CTA; avoid long paragraphs on slides. * Always add a “Slide link” or button so the slide drives action. * If your text is hard to read over the image, increase the overlay opacity or choose a darker overlay color. * The "Adapt image" slide height option works best when you want slides to match your images exact proportions without cropping. * When using autoplay, set the speed to 5-7 seconds to give visitors enough time to read the content without feeling rushed. * You can add up to 5 slides, but 2-3 slides often work best to maintain visitor engagement without overwhelming them.