> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/banner-masonry.md).

# Banner Masonry

The Banner Masonry Section allows you to showcase multiple banner images in a visually dynamic grid layout. It’s perfect for highlighting promotions, featured collections, or editorial-style visuals.

To customize the Banner Masonry in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner Masonry**
3. **Save**
   {% endhint %}

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F2u1jQcPFVRifoJtMER6X%2Fimage.png?alt=media&amp;token=467a2ab1-30c9-4b16-8cb9-6fe17acf3005" alt=""><figcaption></figcaption></figure>

## Section Settings

### **Section Header**

* **Show “Section header”** – Toggle to display or hide the section heading area.
* **Heading** – Enter the section title.
* **Description** – Add a short paragraph or tagline.
* **Text alignment** – Align the header text to *Left*, *Center*, or *Right*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FXJ8OjIpwbGHoBYTwEM47%2Fimage.png?alt=media&amp;token=c3892e3a-7b14-46cf-af7a-ac54a595fe4b" alt=""><figcaption></figcaption></figure>

***

### **General**

* **Layout** – Choose the layout style for the section (e.g., *Default*).
* **Color scheme** – Apply a color scheme to match your store’s tone.
* **Image ratio** – Select the aspect ratio for banner images.
* **Custom ratio** – Define a custom ratio such as *21:9* if needed.
* **Hover effect** – Add an animation effect on image hover (e.g., *Zoom*).
* **Content position** – Choose where content appears on the banner: *Top*, *Center*, or *Bottom*.
* **Height mobile** – Select *Default* or set a *Custom height* for mobile view.
* **Height image mobile** – Specify a custom image height for mobile (e.g., *350px*).
* **Content align** – Align banner text content to *Left*, *Center*, or *Right*.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FIkCT0mY38qXnkXfwFQ5u%2Fimage.png?alt=media&amp;token=50652a65-dff6-481a-8b10-75cb1d70e67a" alt=""><figcaption></figcaption></figure>

***

### **Section Padding**

* **Padding top / bottom** – Adjust vertical spacing above and below the section.
* **Remove default space between sections** – Enable this option to remove spacing between adjacent sections.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FThGeQKb4TATG5ixTDMbY%2Fimage.png?alt=media&amp;token=45a8f69a-2258-4d6c-88e8-695b6d88e89c" alt=""><figcaption></figcaption></figure>

***

## **Block Settings**

Each **Banner Item** represents one banner within the masonry grid. You can add multiple blocks to create a visually diverse layout.

***

### **Image**

* **Banner image** – Upload a banner image (recommended to match the selected layout’s aspect ratio).
* **Banner image on mobile** – Upload a separate image optimized for mobile devices.

💡 *Tip:* Keep consistent image ratios across banners to maintain a clean, professional look.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FpFULdspoFFU1tbwOBkGg%2Fimage.png?alt=media&amp;token=e5ccf745-f57f-49f3-9110-2344e879721f" alt=""><figcaption></figcaption></figure>

***

### **Content**

* **Color scheme** – Choose a predefined color scheme for the block.
* **Subtext** – Add a short text or tagline above the heading.
* **Heading** – Enter the main banner title.
* **Description** – Write supporting text, such as a product highlight or call to action.
* **Link** – Add a link to collections, products, or pages.
* **Button label** – Customize the button text (e.g., *Shop Now*, *View More*).
* **Button open link in** – Choose whether the link opens in the *Current tab* or a *New tab*.
* **Type button** – Select between *Primary* or *Secondary* button styles.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FK4cE1Fol2DZ4yWV0Fzic%2Fimage.png?alt=media&amp;token=c95cdece-afcd-410a-b25a-4b19bcc4a1e1" alt=""><figcaption></figcaption></figure>

***

### **Typography**

**Sub Heading**

* **Font size** – Adjust the subtext size.
* **Font weight** – Control the thickness of the subtext font.

**Heading**

* **Font size** – Adjust the main title size.
* **Font weight** – Control the boldness of the main heading.

**Description**

* **Font size** – Set the size for the description text.
* **Font weight** – Adjust the boldness of the description.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FufdlHaMA0F4ASW4YnvIX%2Fimage.png?alt=media&amp;token=a2b4f039-81c0-4766-85e6-225d7d466f5f" alt=""><figcaption></figcaption></figure>

***

### **Tips**

* Use high-quality images with consistent visual style.
* Keep text minimal to preserve the masonry layout’s balance.
* Combine different block heights for an editorial look.