Banner masonry

Written by Nelly

Last updated 7 hours ago

14 views

On this page

Banner Masonry is a visually dynamic layout that arranges banners in a grid with varying sizes, creating a modern and engaging design. This section allows you to showcase multiple banners in an eye-catching way, making it ideal for highlighting promotions, featured products, or storytelling through images. In this guide, you'll learn how to customize and optimize the Banner Masonry section.

1. How to access the Banner masonry section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Banner masonry.

2. How to customize the Banner masonry section?

2.1. Item masonry

2.1.1. Item masonry block

Each image represents one banner masonry. In this block, you can adjust your Banner masonry with many options below:

General options

Display colors by section: Toggle to apply the section's global color scheme to the block.

Color scheme: Select the color scheme for the banner.
Background block: Adjust the transparency or background overlay for the banner. Value ranges from 0 (fully transparent) to 100 (fully opaque).
Banner link: Enter the link for the banner when clicked.
Open this link in a new tab: Enable/disable opening the link in a new tab.
Image hover effect: Choose how the image behaves when hovered over.
Warning: Hovering effect will resize your images
Item effect when hover: Optional visual effects for the entire banner when hovered (e.g., border run, overlay,...).
Content padding (top/bottom, left/right): Adjust the spacing between the content and the banner edges.

Desktop

Column width: Set the banner width as a percentage of the total width.
Row count: Define the number of banner rows in the Masonry layout.
Content position: Choose where the content appears (top, center, bottom,....).
Content alignment: Align the content (left, center, right).

Mobile

Column width: Set the banner width on mobile (50% or 100%).
Row count: Define the number of banner rows displayed on mobile.
Content position: Choose the content position on mobile.
Content alignment: Align the content on mobile.
Background content: When enabled, a semi-transparent background (e.g., white or black with opacity) appears behind the content.

2.1.2. Other blocks

In the Item masonry, you can add various blocks such as Heading, Text, Button, Media, and Spacer to enhance the layout and design.

Click on Item masonry block > Add block (plus icon ➕) > Select the block you can add

2.1.2.1. Media

Use source: Choose between using an image or a video as the media type for the banner.
Image: Upload or select an image to display on desktop.
Image Mobile: Upload or select a separate image specifically for mobile devices. Helps optimize layout for smaller screens.
Video: Upload or select a video file to display in place of an image. This overrides the external video link if both are set.
External link video: Add a video link from YouTube or Vimeo. Used only if no uploaded video is selected.

2.1.2.2. Heading

Heading: Allows you to enter and format the text (bold, italic, underline, lists, links, etc.). Shift + Enter to line break.
Hidden <br> on mobile: Disables line breaks on mobile devices.
Line height: Adjusts the spacing between lines of text. Options include: "Default", "Small", "Fit".
Size: Lets you select sizes for the heading.
Text color: Allows you to set the text color.
Custom size options:
- Font size: A slider and input field to set the font size (e.g., 50 px) for regular (desktop) viewing.
- Mobile font size: A slider and input field to set the font size (e.g., 24 px) specifically for mobile devices.
- Letter spacing (in pixel): A slider and input field to adjust the spacing between individual characters (e.g., 0 pixels).

2.1.2.3. Text

Text : This is where you input the main text content
Shift + Enter to line break.
Use shortocdes: [countdown]. Countdown to the end sale date will be shown
Hidden <br> on mobile: Disables line breaks on mobile devices.
Hidden on mobile: A toggle switch. If enabled, the text content will not be displayed on mobile devices.
Font family: A dropdown menu to select the typeface for the text. "Default" is currently selected.
Size: Controls font size, options include such as Small, Medium, Large, ... and "Custom size inline" for specific settings.
Line-height: Adjusts the vertical spacing between lines of text. Options include "Default", "Small", and "Fit".
Font weight: A dropdown menu to choose the thickness or boldness of the font.
Text color: A dropdown menu to set the color of the text. "Default" is currently selected.
Date countdown: An input field or date picker where you can set the exact date and time for the countdown to end (e.g., "2025-09-30 15:00:00").
Text day countdown: An input field where you define the text to display for the "days" unit of the countdown.
Effect slider: This likely refers to the transition effect for the content, with options like "Fade" or "Slider" currently selected.
Autoplay speed in seconds: A slider and input field to set the duration (in seconds) before the next slide or item in the "slider" effect appears.
Set is '0' to disable autoplay

2.1.2.4. Button

Label: Defines the text displayed on the button.
Link: Specifies the destination URL when the button is clicked.
Open this link in a new tab: Opens the link in a new browser tab when enabled.
Make button full width: Expands the button to take up the full width of its container.

Style: Choose between Solid, Outline, or Link styles for different visual effects.
Size: Adjusts the button size (e.g., Extra Large, Medium, etc.).
Font weight: Controls the thickness of the button text (e.g., Normal, Bold).

Custom Size Options:

Font size: Adjusts the heading size for desktop.
Tablet font size: Adjusts the heading size for table.
Mobile font size: Adjusts the heading size for mobile.
Font weight: Controls the thickness of the text (e.g., 600 is semi-bold).
Letter spacing: Adjusts the space between characters.

Icon:

Icon: Select the icon to display on the button (e.g., arrow, plus, etc.).
Icon position: Choose whether the icon appears Before or After the button text.
Icon size: Adjust the size of the icon in pixels.
Icon spacing: Set the spacing between the icon and the text to ensure proper alignment and readability.

2.1.2.5. Spacer

Horizontal space: If enabled, the spacer will also add horizontal spacing instead of only vertical spacing.
Space: Adjusts the amount of space (in pixels) on desktop screens.
Tablet space: Defines the amount of space for tablet devices, ensuring responsive spacing.
Mobile space: Sets the spacing specifically for mobile screens.

2.2. Banner Masonry

2.2.1. Banner masonry

Here’s how you can customize the Banner masonry section to best fit your content and layout. Below are the available options for customization:

Desktop

Item height: Sets the vertical height (in pixels) of each masonry item on desktop view.

Mobile

Item height: Controls item height on mobile devices.
Spacing between items: Sets spacing between masonry blocks on mobile.
Spacing between items (Tablet): Controls spacing on tablet view.
Spacing between items (Mobile): Allows specific spacing adjustments for smaller screens.

Layouts

Display colors by section: When enabled, the section inherits theme-wide colors.
Color scheme: Choose a predefined color palette for this section (e.g., Scheme 2).
Background section overlay: Adjusts transparency of an overlay color across the section background.
Width: Determines layout width —
- Container: Adds margins to align content with the rest of the page.
- Full width: Stretches the section across the entire screen.
Background image: Upload or select an image to appear behind the whole section.

2.2.2. Theme Settings

Page width: defines the maximum width of the main content area on the website.

2.2.3. Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.