The Shoppable media section in Maison combines visual media with product information, allowing customers to discover products directly from images or videos.
It is especially useful for:
- Product demonstration videos
- Lifestyle content
- Room inspiration
- Product-in-use videos
- Social-style shopping content
- Editorial product showcases
The Maison demo uses Shoppable media as a carousel of portrait product videos. Each video is linked to a product card displayed directly below the media.
Section overview
A Shoppable media section can contain:
- Heading and text content
- One Media list
- Up to 6 media items inside the Media list
- Image items
- Video items
- Product text content for each media item
- Product cards for each media item
The Media list controls the presentation of all image and video items.
Available Media list settings include:
| Setting | Description |
|---|---|
| Navigation style | Controls the desktop carousel navigation. |
| Aspect ratio | Sets a consistent ratio for all media cards. |
| Custom spacing | Lets you customize horizontal and vertical spacing between media items. |
| Spacing | Controls spacing around the Media list. |
Available Navigation style options are:
- Dot
- Progress
- Arrow
- Page
Available Aspect ratio options are:
- Adapt to media
- 1:1
- 2:3
- 4:3
- 3:4
- 3:2
- 5:4
- 16:9
The Maison demo uses:
- Aspect ratio: 2:3
- Navigation: Arrow
- 6 video items
- Uploaded videos
- Autoplay enabled
- Loop enabled
- One product card per video
STEPS:
Add the Shoppable media section
To add Shoppable media:
- Open the Maison theme editor.
- Open the template where you want to display the section.
- Click Add section.
- Select Shoppable media.
- Add a Heading or other content above the media list if needed.
- Open the Media list block.
- Add Image or Video blocks.
- Click Save.
The section can be added to regular template areas but is not available inside the Header or Overlay groups.
Configure the section layout
The Shoppable media section includes the standard Maison section layout controls.
You can configure:
- Section colors
- Section width
- Section divider
- Layout
- Spacing
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
The Maison demo uses Page width.
The default layout places section content vertically, with the heading or text above the Media list.
Configure the Media list
The Media list contains the shoppable image and video cards.
A Media list supports up to 6 media items.
You can mix:
- Image
- Video
For example:
Shoppable media
└── Media list
├── Video
├── Video
├── Image
├── Video
└── Image
All media items inside the list use the selected Media list Aspect ratio.
Choose the media Aspect ratio
The Media list includes an Aspect ratio setting.
Available options are:
| Aspect ratio | Recommended use |
|---|---|
| Adapt to media | Keeps the original media ratio. |
| 1:1 | Square social-style content. |
| 2:3 | Tall portrait video or lifestyle content. |
| 4:3 | Landscape editorial media. |
| 3:4 | Portrait product imagery. |
| 3:2 | Standard landscape photography. |
| 5:4 | Moderate landscape crop. |
| 16:9 | Wide video or cinematic content. |
The Maison demo uses:
2:3
For a 2:3 layout, a recommended video cover image size is:
1200 × 1800 pixels
Using the same ratio for every item creates the most consistent result.
Choose the Navigation style
When the Media list contains more than one item, Maison can display desktop navigation.
Available options are:
Dot
Displays dot pagination.
Progress
Displays a progress indicator.
Arrow
Displays previous and next arrows.
This is the style used in the Maison demo.
Page
Displays arrows together with the current item and total number.
For example:
2 / 6
On smaller screens, customers can move through the media carousel using touch/swipe behavior.
Add a Video block
Inside the Media list:
- Click Add block.
- Select Video.
- Choose the Video source.
- Add the video.
- Configure playback settings.
- Add a Product card or Product text group if needed.
- Click Save.
Each Video block can contain:
- One Product text group
- One Product card group
The Product card group can contain up to 5 products.
Choose the Video source
Maison supports two video sources:
| Video source | Description |
|---|---|
| Uploaded | Uses a video uploaded to SHOPLINE. |
| URL | Uses a supported external video URL. |
Uploaded video
Choose Uploaded and select the video from SHOPLINE.
This is the method used by the Maison demo.
External video
Choose URL and enter the supported external video source.
When using an external video, Maison also provides a Video cover image setting.
Configure video playback
The Video block includes the following playback settings:
| Setting | Description |
|---|---|
| Autoplay | Automatically plays the active media item. |
| Muted | Controls whether the video is muted when Autoplay is disabled. |
| Loop | Restarts the video after it finishes. |
| Controls | Displays the video's playback controls. |
| Play button | Displays the theme play button. |
| Video fit | Controls how the video fills the media area. |
| Accessibility | Adds descriptive text for the video. |
The Maison demo uses Autoplay and Loop for its Shoppable media videos.
When Autoplay is enabled, Maison controls playback based on the active carousel item:
- The active video's autoplay behavior can start.
- Videos in inactive cards are paused.
- When the active card changes, Maison updates which video can play.
This avoids having multiple carousel videos playing at the same time.
Configure Video fit
Maison provides two Video fit options:
Cover
The video fills the entire media card.
Parts of the video can be cropped if its source ratio does not match the Media list Aspect ratio.
Contain
The full video remains visible inside the media card.
Empty space can appear when the video ratio differs from the card ratio.
The Maison demo uses:
Cover
For the demo's 2:3 layout, portrait videos work best because they require less cropping.
Add Accessibility text
Use the Accessibility field to describe the video.
For example:
Forma Glass Pendant displayed above a dining table
This provides useful context for customers using assistive technologies.
Use a short description that explains the meaningful content of the video.
Add a Product card to a video
Each Video block can contain a Product card group.
To add a product:
- Open the Video block.
- Add or open Product card group.
- Click Add block.
- Select Product card.
- Select the required product.
- Click Save.
Each Product card displays:
- Product featured image
- Product title
- Product price
Clicking the product image or title opens the product page.
The Product card group supports up to 5 Product card blocks.
The Maison demo uses one Product card per video.
Configure Product card prices
Each Shoppable media Product card includes:
- Show compare price
- Show sale price first
Enable Show compare price to display the original compare-at price when applicable.
When Show compare price is enabled, you can also configure Show sale price first.
This controls the order in which sale and compare prices are displayed.
Add Product text content
A Video or Image item can also contain one Product text group.
The Product text group can contain content such as:
- Subheading
- Title
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Divider
- Spacer
The Product text group includes:
- Overlay
- Hide on mobile
- Color settings
- Layout
- Spacing
- Size
Use Product text as an overlay
Enable the Product text group's Overlay setting to position the content over the bottom of the image or video.
When Overlay is enabled, Maison applies an overlay treatment to help the content remain readable over the media.
The group can include a button, allowing customers to move from the media directly to related content.
If Overlay is disabled, the text group is displayed as normal content instead of being positioned over the media.
Hide Product text on mobile
The Product text group includes Hide on mobile.
This setting is enabled by default.
When enabled:
- Product text content can appear on larger screens.
- The Product text group is hidden on smaller screens.
The Product card group remains separate from the Product text overlay.
Use this option when the media card becomes too crowded on mobile.
Add an Image instead of a Video
Shoppable media is not limited to video.
Inside the Media list, you can also add an Image block.
The Image block includes:
- Image
- Accessibility text
- Image fit
Available Image fit options are:
- Cover
- Contain
An Image block supports the same shopping content structure as a Video block:
- One Product text group
- One Product card group
This means the same Shoppable media carousel can contain both images and videos.
Understand the active media effect
Maison visually emphasizes the active Shoppable media card.
On larger screens:
- The active media card is displayed at full color.
- The active card becomes slightly larger.
- Inactive media cards use a grayscale treatment.
- Inactive cards also use reduced opacity.
When another card becomes active, Maison moves the visual emphasis to that card.
The active media card is also the item whose autoplay video is allowed to play.
This behavior creates the focused carousel effect used in the Maison demo.
Configure spacing between media items
Enable Custom spacing in the Media list if you want to override the default card spacing.
You can configure:
- Horizontal spacing: 0–100px
- Vertical spacing: 0–100px
The default custom spacing values are:
- Horizontal: 48px
- Vertical: 48px
If Custom spacing is disabled, Maison uses the theme's normal card-grid spacing.
Maison demo setup
The Maison demo uses Shoppable media as a portrait video carousel.
Its setup follows this pattern:
Shoppable media
├── Heading
│ └── Everything for Your Home
│
└── Media list
├── Video
│ └── Product card
├── Video
│ └── Product card
├── Video
│ └── Product card
├── Video
│ └── Product card
├── Video
│ └── Product card
└── Video
└── Product card
The main demo configuration is:
| Setting | Maison demo |
|---|---|
| Media items | 6 videos |
| Aspect ratio | 2:3 |
| Navigation | Arrow |
| Video source | Uploaded |
| Autoplay | Enabled |
| Loop | Enabled |
| Video fit | Cover |
| Products | One Product card per video |
| Section width | Page |
For a similar visual result, use portrait product videos and keep all media at the same 2:3 ratio.
Recommended media guidelines
For the Maison demo-style setup:
- Use portrait video where possible.
- Use a 2:3 ratio.
- For video cover images, use approximately 1200 × 1800 pixels.
- Keep the main product or subject centered.
- Avoid placing important details too close to the edges when using Cover.
- Keep all carousel media visually consistent.
- Compress videos before uploading to reduce loading time.
- Add useful Accessibility text.
- Use one clearly related product per video for the cleanest layout.
Troubleshooting
If Shoppable media does not display or work as expected, check the following:
- Make sure a Media list has been added to the Shoppable media section.
- The section supports only one Media list.
- A Media list supports up to 6 Image or Video items.
- Make sure a Video block has a valid Uploaded video or external Video URL.
- If an external video does not display a poster image, configure Video cover image.
- If the video is cropped too much, review the Media list Aspect ratio and Video Fit.
- If you want the whole video visible, change Video fit from Cover to Contain.
- If autoplay appears to stop when you change cards, this is expected. Maison pauses inactive carousel videos.
- If multiple videos do not play simultaneously, this is also expected.
- If navigation is missing, make sure the Media list contains more than one item.
- Desktop navigation is displayed on larger screens; use touch/swipe navigation on smaller screens.
- If Product text is missing on mobile, check Hide on mobile in the Product text group.
- If the Product card is missing, add a Product card group and select a product.
- A Product card group supports up to 5 products.
- If compare pricing is missing, enable Show compare price in the Product card.
- Keep media dimensions and ratios consistent to avoid uneven cropping.
- Save your changes and test the section on both desktop and mobile.
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:
Image Size Guidelines for Maison
How to Add and Remove a Sale Badge in Maison