Media Grid is a Shopify theme section in the Section Star library. Build rich, immersive media galleries — combine videos and images in a flexible grid with autoplay support for a dynamic, scroll-stopping experience.
About the Media Grid section
The Media Grid section provides a sleek, customizable grid layout for displaying images and videos on your Shopify store. It's designed to enhance the visual appeal and user experience by offering various display options and configurations, including responsive design for mobile devices.
Live demo
Use cases
- Product Showcases: Ideal for displaying a collection of featured products with high-quality images and videos.
- Customer Testimonials: Use the grid to showcase customer reviews and video testimonials in a visually appealing manner.
- Brand Storytelling: Narrate your brand's story through a combination of images and videos, giving customers an engaging browsing experience.
- Events and Promotions: Highlight upcoming sales, events, or promotions with captivating media content.
- Blog Features: Create an engaging media-rich blog section that draws readers' attention with stunning visuals.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the display for the grid
| Setting | Type | Default |
|---|---|---|
| Grid Gap | Number | 20 |
| Mobile Display | Select (Slideshow, Stacked) | slideshow |
| Columns (when stacked) | Select (1 column, 2 columns, 3 columns) | 1fr |
| Slidehow Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slidehow Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slidehow Indicator Color | Color | #111 |
| Enable Autoplay? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |
Media Design
Set the display for the images and videos
| Setting | Type | Default |
|---|---|---|
| Media Aspect Ratio | Select (4:1, 21:9, 16:9, 4:3, 1:1, 3:4…) | 3 / 4 |
| Show Big Play Button | Checkbox | On |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Show Zoom on Hover? | Checkbox | On |
| Image Width | Number | 800 |
| Mobile Image Width | Number | 600 |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Optional Link | URL | — |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Poster Image (optional) | Image | — |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Media Grid”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.