# Media Grid

> Build rich, immersive media galleries — combine videos and images in a flexible grid with autoplay support for a dynamic, scroll-stopping experience.

URL: https://sectionstar.app/sections/media-grid/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**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

1. **Product Showcases**: Ideal for displaying a collection of featured products with high-quality images and videos.
2. **Customer Testimonials**: Use the grid to showcase customer reviews and video testimonials in a visually appealing manner.
3. **Brand Storytelling**: Narrate your brand's story through a combination of images and videos, giving customers an engaging browsing experience.
4. **Events and Promotions**: Highlight upcoming sales, events, or promotions with captivating media content.
5. **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 |