Masonry banner

A Masonry Banner is a grid-based design with varying content sizes, creating a dynamic, staggered layout. It's ideal for showcasing multiple items in a visually engaging way, especially on websites and digital ads.

How to Set Up a Masonry Banner Section:

Step 1 : Open the Theme Editor. Navigate to your Shopify dashboard and open the Theme Editor for your store.

Step 2 : Add the Banner Section. Click on 'Add section' and select 'Masonry banner' to integrate this section into your page layout.

Step 3 : Save your changes. After customizing the Masonry banner section, click 'Save' to implement your adjustments.

Masonry banner

Content

• Use the provided text fields to add a suitable heading, subheading, or description. Leave any of them blank if you do not want to display them.

• You can change the heading size

• You can provide links to button labels.

• You can also change the button outline style

Column alignment: You can also change column alignment to left and center

Color scheme: Set text color and background color with preset scheme

Masonry banner

Content for block

• Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Main banner alignment: You can also change column alignment to left and center

Content Position: You can change the position of the content within a section. The following options are available:

• Top Left

• Top Centre

• Top Right

• Centre Left

• Centre

• Centre Right

• Bottom Left

• Bottom Centre

• Bottom Right

Banner settings

Main Banner Style & Additional Banner Style: Change the style for the block. There are two available options(Overlay, Grid)

Content Width: Define the width of the content for various screen sizes

Device width: Set a specific width for content displayed on desktop and laptop screens.And it adaptable for the tablet and mobile devices.

Content Color: Set the color of the content text and elements in the layout. This includes options for headings, paragraphs, and links to ensure consistent branding and readability.

Additional Block

Additional Banners Block Style: You can change the Additional Banners Block Style. There are 10 different types of block styles available, offering a variety of visual layouts to suit your design needs.

Overlay Height: You can change the overlay height for different devices such as desktop, laptop,tablet and mobile

Add the block and Required details for the additional blocks as same as main block