Skip to content
Slider gallery
Block limitations
This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the Slider block.
Overview
A product media gallery component that displays a collection of media items (images, videos, 3D models) in a slider format. This block is designed to work within a slider section, supporting responsive layouts and various media types from a product.
Common use cases
- Best used within a slider section for product galleries
- Configure appropriate widths based on your layout needs
- Let customers open product media full screen or magnify images on hover.
- Use in conjunction with navigation controls for better user experience
Filter images and add thumbnails
Use the same variant media setup as the grid gallery. Add Slider gallery thumbnails inside the same Slider as Slider gallery, then check that Show thumbnails is on in the Slider settings. Match the thumbnail block’s Product, Item count, and Show selected variant images only settings to the gallery. On the Slider, set Thumbnail size and choose Left, Right, Top, or Bottom for Thumbnails position.
Open media full screen
Enable full screen gallery is on by default. Customers can select an image or use the full-screen button on a video or 3D model. See how customers browse media full screen.
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals device visibility for the gallery | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Show selected variant images only | Filter media for the selected variant on products with fewer than 50 variants. | Checkbox (default: false) |
| Jump to selected variant image | Scroll to the selected variant image without changing the order of the slides. Works independently of filtering. | Checkbox (default: true) |
| Product | Product to display media from | Product picker |
| Item count | Number of media items to display inline | Number (default: 7) |
Spacing
| Setting | Description | Options |
|---|---|---|
| Mobile width | Width of each slider item on mobile | 5 - 100 % (default: 80) |
| Desktop width | Width of each slider item on desktop | 5 - 100 % (default: 40) |
Color
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background color scheme | • Body (default) |
| Color border | Controls the border color | • Body |
Style
| Setting | Description | Options |
|---|---|---|
| Border position | Controls which sides have borders | • None (default) |
Layout
| Setting | Description | Options |
|---|---|---|
| Enable aspect ratio | Maintains a consistent aspect ratio for media | Checkbox (default: false) |
| Enable full screen gallery | Open the selected media in a full-screen viewer. | Checkbox (default: true) |
| Enable zoom on hover | Magnify images when customers hover over them. | Checkbox (default: false) |
| Show entire image | Shows the full image without cropping | Checkbox (default: true) |
| Aspect ratio | Aspect ratio for the media container | • Square |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |