Masonry Feature is a Shopify theme section in the Section Star library. Show a grid of clickable features in a beautiful vertical brick format.
About the Masonry Feature section
The Masonry Feature section is a highly customizable, visually engaging section designed to enhance your Shopify store's user experience. This section allows you to showcase images and videos in a masonry grid layout, creating a dynamic and modern look for your store. With various font, background, and button customization options, you can tailor this section to match your brand's style and capture the attention of your visitors effectively.
Live demo
Use cases
-
Product Gallery: Use the Masonry Feature section to display a variety of product images or videos, highlighting different angles, colors, or features of your products. This creates an engaging way for customers to explore what's available in your store.
-
Customer Testimonials: Showcase customer reviews and testimonials with accompanying images or videos. This adds social proof and builds trust with potential buyers.
-
Seasonal Promotions: Perfect for marketing campaigns, you can use this section to feature seasonal sales, limited-time offers, or holiday-specific products with eye-catching images and promotional videos.
-
Brand Storytelling: Tell your brand's story through a mosaic of images and videos, engaging your visitors with behind-the-scenes looks, team introductions, and brand milestones.
-
Lookbooks: Fashion and lifestyle brands can use this section to create inspiring lookbooks, combining images and videos to give customers styling ideas and complete looks.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the design for your masonry grid
| Setting | Type | Default |
|---|---|---|
| Columns | Select (1, 2, 3) | 2 |
| Mobile Columns | Select (1, Match Columns) | 1 |
| Grid Gap | Number | 20 |
Feature Design
Set the design for the feature section
| Setting | Type | Default |
|---|---|---|
| Text Color | Color | #ffffff |
| Vertical Alignment | Select (Top, Center, Bottom) | center |
| Spacing between Elements | Number | 10 |
| Horizontal Alignment | Select (Left, Center, Right) | center |
| Image Width | Number | 1000 |
| Mobile Image Width | Number | 600 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Text Alignment | Text alignment | center |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Round Borders on Button | Range | 5 |
| Border Size on Button | Range | 0 |
| Border Color on Button | Color | #888 |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
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 |
Feature block settings
| Setting | Type | Default |
|---|---|---|
| Background Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
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 Feature”.
- 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.