# Masonry section

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(27)_jlUTsQJ2.jpg)

Bring your content to life through a flexible masonry grid that highlights visuals, reviews, and media.

## How to add a Masonry section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Masonry section** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Masonry section

### Section settings

#### Mobile layout

<Tabs>
<Tab title="1 column">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(28)_6Cp7CG44.jpg)

</Tab>

<Tab title="2 columns">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(29)_xFrwmWeQ.jpg)

</Tab>
</Tabs>

<Hint type="info">

Check out other section settings: [Common settings available in most sections](https://docs.foxecom.com/pebble-theme/theme-sections/overview#common-settings-available-in-most-sections)

</Hint>

### Block settings

The Masonry section combines a **Header**, **multiple nested blocks**, and a **show more/show less button** into one cohesive layout.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_MTyrHEnv.png)

Use the **Header** block to create and customize the section’s heading and introductory content.

<Table widths="214.1806640625,auto">

| Setting | Description |
| --- | --- |
| **Alignment** | Set the header alignment: left, center, or right. |
| **Devices** | Switch between desktop and mobile padding settings. |
| **Bottom** | Adjust the spacing below the header. |

</Table>

<Hint type="info" title="📦 Nested dynamic blocks">

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action

</Hint>

Learn more: [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic)

</Tab>

<Tab title="Nested blocks">

![image](https://docs-assets.foxecom.app/pebble-theme/image_656sjl25.png)

Combine multiple nested blocks—such as images, testimonials, and videos—into a dynamic, visually engaging layout.

<Hint type="info" title="📦 Nested dynamic blocks">

* [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#image-card)
* [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#testimonial)
* [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#video)

</Hint>

</Tab>

<Tab title="Show more/Show less">

![image](https://docs-assets.foxecom.app/pebble-theme/image_EfDyzHXY.png)

<Hint type="info">

Learn more: [Basic](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#button)

</Hint>

</Tab>
</Tabs>