The Slideshow section in Maison lets you create a rotating banner using Image and Video slides with text, buttons, overlays, and separate desktop/mobile transition settings.
It is useful for:
- Homepage hero banners
- New collections
- Product launches
- Seasonal campaigns
- Promotional messages
- Brand storytelling
- Image and video-based introductions
Maison supports up to 5 slides in one Slideshow section.
The default preset uses three Image slides, and each slide contains a Content container with a Heading, Description, and Button.
Section overview
A typical structure is:
Slideshow
├── Image
│ └── Content container
│ ├── Heading
│ ├── Description
│ └── Button
├── Image
│ └── Content container
└── Video
└── Content container
Each slide can contain a maximum of 1 Content container.
STEPS:
1. Add the Slideshow section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the slideshow.
- Click Add section.
- Select Slideshow.
- Add or edit the Image and Video slides.
- Configure the transition, navigation, and slideshow size.
- Click Save.
You can combine Image and Video slides in the same Slideshow.
Maison supports a maximum of:
5 slides
You can reorder the blocks in the Theme Editor to change the slide order.
2. Choose the Transition effect
Maison lets you configure the slide transition separately for desktop and mobile.
Transition effect
Available desktop options are:
- Slide horizontal
- Slide vertical
- Fade
Default:
Fade
Transition effect on mobile
Available mobile options are also:
- Slide horizontal
- Slide vertical
- Fade
Default:
Slide vertical
This means you can use one effect on desktop and another on mobile.
For example:
Desktop: Fade
Mobile: Slide horizontal
This is the setup used by the Maison homepage demo.
3. Configure Navigation style
Use Navigation style to control how customers manually move between slides.
Available options are:
- Dots
- Arrows
- Dots and arrows
Default:
Dots and arrows
Navigation is only displayed when the Slideshow contains more than one slide.
Desktop
Dots appear near the bottom of the Slideshow.
Arrow navigation is displayed across the Slideshow and becomes visible on hover when using a mouse or other fine pointer.
Mobile
Arrow controls are hidden on mobile.
For this reason, Dots or Dots and arrows are generally better choices when you want visible navigation on both desktop and mobile.
Customers can also interact directly with the carousel on touch devices.
4. Configure Auto-switch
Enable Auto-switch when you want Maison to change slides automatically.
When enabled, the Switch interval setting appears.
Available range:
3–10 seconds
Default:
7 seconds
Maison loops through the slides continuously.
Auto-switch temporarily pauses while the customer is interacting with the Slideshow, including when:
- Hovering over it
- Touching or dragging it
- Focusing on interactive content inside it
After the interaction ends, Auto-switch can continue.
5. Configure the Slideshow Size and Section width
The Slideshow includes a Size setting with separate desktop and mobile values.
Default:
| Device | Width | Height |
|---|---|---|
| Desktop | 100% | 600px |
| Mobile | 100% | 400px |
Use Size to make the Slideshow shorter or taller depending on the page design.
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
Default:
Full
For hero-style Sliders, Full is usually the most suitable option.
The section also includes:
- Show section divider
- Spacing
6. Add an Image slide
Add an Image block when you want a static image slide.
Main settings include:
- Image
- Image on mobile
- Alt text
- Custom colors
- Arrangement
- Spacing
Image
Select the main desktop image.
Image on mobile
Use this setting when you want a separate crop or composition for smaller screens.
For example:
Desktop:
Wide lifestyle image
Mobile:
Portrait crop focused on the main product
Alt text
Add a short description of the image for accessibility.
For example:
Modern lounge chair in a bright reading corner
The slide media fills the configured Slideshow height, so cropping can occur depending on the source image and selected Size.
7. Add a Video slide
Add a Video block when you want motion content inside the Slideshow.
The Source setting provides:
- Uploaded
- URL
For URL videos, Maison supports YouTube or Vimeo.
Main Video slide settings include:
| Setting | Purpose |
|---|---|
| Source | Choose Uploaded or URL. |
| Video | Select an uploaded video. |
| URL | Add a YouTube or Vimeo URL. |
| Autoplay | Automatically starts the video when its slide is active. |
| Mute video | Controls audio when Autoplay is disabled. |
| Loop video | Repeats the video. |
| Show video controls | Displays standard video controls. |
| Show play button | Displays the Maison play button. |
| Cover image | Adds a cover image for an external URL video. |
| Alt text | Describes the video for accessibility. |
Default behavior includes:
Autoplay: Disabled
Mute video: Enabled
Loop video: Enabled
Show video controls: Disabled
Show play button: Enabled
When Autoplay is enabled, the video is muted by default.
8. Understand Video behavior when slides change
Maison manages Video slides according to the active slide.
When a customer moves to another slide:
- Video on the previous slide is paused.
- If the new active slide contains a Video with Autoplay enabled, that Video starts playing.
- Hidden or inactive slideshow Videos do not continue playing in the background.
If the Slideshow itself becomes hidden, Maison pauses its Videos.
This helps prevent multiple slideshow Videos from playing at the same time.
Auto-switch vs. Video Autoplay
These settings work independently.
For example:
Auto-switch: Enabled
Video Autoplay: Disabled
The Slideshow changes slides automatically, but the customer must manually play the Video.
Or:
Auto-switch: Disabled
Video Autoplay: Enabled
The Slideshow stays on the current slide until the customer navigates, while the active Video can play automatically.
9. Add content with the Content container
Each Image or Video slide can contain up to 1 Content container.
The default preset uses:
Content container
├── Heading
├── Description
└── Button
The Content container can also include:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
This lets each slide have its own message and call to action.
For example:
Subheading:
New arrivals
Heading:
YOUR FAVOURITE
CORNER AWAITS
Button:
Shop chairs
10. Position the Content container
Each Image or Video slide includes Arrangement and Spacing controls.
Use Arrangement to position the Content container within the slide.
For example:
Left aligned
Center aligned
Right aligned
The Maison homepage uses different content positions for different slides.
One slide aligns its content to the left, while another centers the content.
Use Spacing to keep slide content away from the edges.
The default slide spacing includes approximately:
Desktop:
100px left
100px right
Mobile:
0px left
0px right
You can customize these values to suit the image composition.
The Content container also has its own Arrangement, Spacing, and Size settings for more precise control.
11. Customize colors and Overlay per slide
Each Image and Video slide includes Custom colors.
When enabled, you can configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button background gradient
- Overlay color
- Overlay opacity
Overlay opacity supports:
0–100%
This is useful when slide text does not have enough contrast against the image or video.
For example:
Text color: White
Overlay color: Black
Overlay opacity: 30%
Custom colors are configured per slide, so different slides can use different text and overlay treatments.
Maison also automatically adapts the slideshow navigation colors to the active slide's color scheme.
12. Customize the Content container appearance
The Content container can have its own appearance settings.
It supports:
- Background media
- Custom colors
- Arrangement
- Spacing
- Size
Available Background media options are:
- None
- Image
- Video
This means the Content container can have its own background independently from the main Image or Video slide.
For most hero Slideshow layouts, a simple transparent Content container is enough.
Use its Custom colors or Background media only when you need a stronger card or panel effect over the slide.
13. Configure Allow transparent header
The Slideshow supports Allow transparent header.
This setting only applies when the Slideshow is the first section on the page.
When enabled, additional options appear:
- Apply transparent text color
- Use solid header on mobile
Apply transparent text color
When enabled, Maison applies the transparent Header color treatment and also uses the white logo.
Use solid header on mobile
Enable this when you want:
Desktop:
Transparent Header over Slideshow
Mobile:
Normal solid Header
This can improve readability when the mobile slide image is light or visually busy.
Maison homepage example
The Maison homepage uses three slides:
Slideshow
├── Video
│ └── Content container
│ ├── Subheading
│ ├── Heading
│ └── Button
├── Image
│ └── Content container
│ ├── Subheading
│ ├── Heading
│ └── Button
└── Image
└── Content container
├── Subheading
├── Heading
└── Button
Main homepage settings:
Desktop transition: Fade
Mobile transition: Slide horizontal
Navigation style: Dots and arrows
Auto-switch: Disabled
Section width: Full
Desktop size:
100% × 750px
Mobile size:
100% × 500px
The Image slides use:
Text color: White
Overlay color: Black
Overlay opacity: 30%
The Video slide uses an uploaded video with:
Autoplay: Enabled
Loop video: Enabled
Mute video: Enabled
Show play button: Disabled
Recommended setup
For a clean Maison-style Slideshow:
- Use 2–4 strong slides instead of filling all 5 unless necessary.
- Keep the message on each slide short and focused.
- Use a separate Image on mobile when the desktop image crops poorly.
- Use Fade for a softer editorial presentation.
- Use Slide horizontal when you want more obvious carousel movement.
- Use Dots and arrows for clear desktop navigation while retaining dots on mobile.
- Keep Auto-switch intervals long enough for customers to read the content.
- Use Overlay when text is difficult to read.
- Keep CTA placement consistent between slides where possible.
- Test Video slides separately from Slideshow Auto-switch.
- Test the Slideshow on both desktop and mobile before publishing.
Notes and limitations
- A Slideshow supports up to 5 Image or Video slides.
- Each slide supports up to 1 Content container.
- Desktop and mobile Transition effects can be configured independently.
- Navigation styles are Dots, Arrows, or Dots and arrows.
- Navigation only appears when more than one slide is present.
- Arrow navigation is hidden on mobile.
- Auto-switch interval supports 3–10 seconds.
- Auto-switch and Video Autoplay are separate settings.
- Image slides support a separate Image on mobile.
- Video slides do not provide a separate mobile Video setting.
- External Video URLs support YouTube or Vimeo.
- Cover image is available for external URL Video slides.
- Inactive Videos are paused automatically when the slide changes.
- Custom colors and Overlay are configured separately for each slide.
- Section width options are Narrow, Page, Fluid, and Full.
- Allow transparent header only applies when the Slideshow is the first section.
- Slideshow cannot be added to Header or custom Overlay groups.
Troubleshooting
If the Slideshow does not display or behave as expected:
- Make sure at least one Image or Video slide is added.
- Remember that Maison supports a maximum of 5 slides.
- If navigation is missing, make sure there is more than one slide.
- If mobile arrows are missing, this is expected behavior; arrows are hidden on mobile.
- If Auto-switch does not run, make sure Auto-switch is enabled.
- If Auto-switch seems paused, check whether the Slideshow is being hovered, touched, dragged, or focused.
- If an Image crops poorly on mobile, add a separate Image on mobile or adjust the Slideshow Size.
- If a Video does not autoplay, check the Video slide's Autoplay setting rather than the Slideshow Auto-switch setting.
- If a Video continues to require interaction, check browser autoplay restrictions and make sure the video can play muted.
- If text is difficult to read, enable Custom colors and increase Overlay opacity.
- If content is positioned incorrectly, check the slide Arrangement, slide Spacing, and Content container settings.
- If the transparent Header does not activate, make sure the Slideshow is the first section on the page.
- Test all slides on both desktop and mobile after changing transition, navigation, Size, or media.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Rich Text Section in Maison
How to Set Up the Video Section in Maison