Staggered Grid is a Shopify theme section in the Section Star library. Display videos and images in flexible, staggered grids of 1 or more blocks. Eye-catching staggered design. Supports autoplay videos.
Live demo
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 | 10 |
| Stagger Offset | Number | 50 |
| 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 |
| 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 “Staggered 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.