Banner Masonry
1. Purpose Displays multiple promotional banners in a masonry grid with different sizes. Suitable for featured products, campaigns, collections, and visual sto…
2 min read
On this page
1. Purpose
Displays multiple promotional banners in a masonry grid with different sizes. Suitable for featured products, campaigns, collections, and visual storytelling.
2. Common use cases
Homepage
Landing page
Seasonal campaigns
Featured collections
Promotional content
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Banner Masonry
4. Main blocks
Item masonry: Adds a banner with responsive size, link, and content positioning.
Content blocks: Adds Heading, Text, Paragraph, Button, or Spacer inside each banner.
5. Key settings
5.1. Item masonry
Setting | Description |
|---|---|
Color | Controls the banner colors. |
Banner link | Sets the destination when customers click the banner. |
Open in a new tab | Opens the banner link in another browser tab. |
Content padding | Adjusts spacing between the content and banner edges. |
5.2. Responsive item layout
Setting | Description |
|---|---|
Column width | Sets the banner width on desktop and mobile. |
Row count | Controls how many masonry rows the banner occupies. |
Content position | Positions content inside the banner. |
Content alignment | Aligns content left, center, or right. |
5.3. Section layout
Setting | Description |
|---|---|
Make section full width | Expands the section across the browser width. |
Color scheme | Controls the overall section colors. |
Item height | Sets banner height on desktop and mobile. |
Top padding | Adjusts spacing above the section. |
Bottom padding | Adjusts spacing below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
6. Best practices
Use high-quality images with clear focal points.
Plan column widths and row counts before adding content.
Keep banner text short and readable.
Check content positions separately on desktop and mobile.
Use consistent spacing between banners.
Avoid creating too many differently sized items.
7. Common issues
Issue | Solution |
|---|---|
Masonry layout has empty spaces | Review each item’s column width and row count. |
Banner opens the wrong page | Check the Banner link. |
Text is too close to the edges | Increase Content padding. |
Mobile layout looks uneven | Adjust mobile column width and row count. |
Content covers important image details | Change the content position or use another image. |
Banners have inconsistent heights | Review the section Item height settings. |
Need a Shopify store to follow along? Start a free Shopify trial