Masonry is a Shopify theme section in the Section Star library. Create a gallery that demands to be explored — display images and videos in a stunning brick-style masonry layout that adapts beautifully to any content.
About the Masonry section
The Masonry section is a versatile and visually appealing way to display a mixture of images and videos in a grid layout. The section's responsive design ensures that your media content looks great on any device. You can easily adjust various settings, such as the number of columns, spacing between items, and media appearance options, to customize it to your store's aesthetic.
Live demo
Use cases
- Product Gallery: Showcase your product images and videos in an engaging grid layout. This is useful for stores with diverse product lines, giving customers a clear and attractive visual experience.
- Customer Testimonials: Feature customer testimonial videos alongside images of happy customers using your products, providing social proof and enhancing credibility.
- Blog Visuals: Create a rich media section for your blog articles by embedding related images and videos to accompany your text content.
- Portfolio Display: Use the masonry section to present a portfolio of your work, ideal for businesses such as photographers, designers, or architects.
- Event Highlights: Recap events through a mix of pictures and videos, perfect for stores that host or participate in events and want to showcase memorable moments.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set settings for the grid
| Setting | Type | Default |
|---|---|---|
| Columns | Select (1, 2, 3) | 2 |
| Gap Between Images | Number | 10 |
Media Design
Set the display of the media elements
| Setting | Type | Default |
|---|---|---|
| Image Width | Number | 1000 |
| Mobile Image Width | Number | 600 |
| Zoom on Hover | Checkbox | On |
| Show Big Play Button | Checkbox | On |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
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 | — |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | Off |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
External Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video URL | — |
| Video Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 9:16, 9:21) | 16 / 9 |
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 “Masonry”.
- 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.