# Icon boxes

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

Highlight your key features or ingredients with clean, visually engaging icon boxes that make it easy for customers to explore and understand what sets your products apart.

## How to add an Icon boxes section to your Shopify store

<Hint type="success">

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

</Hint>

## How to customize an Icon boxes section

### Section settings

#### Layout

<Table widths="218.28009033203125,auto">

| Setting | Description |
| --- | --- |
| **Type** | Choose how icon boxes are displayed. |
| **Columns** | Set the number of columns displayed in the grid. |
| **Column gap** | Adjust the spacing between columns. |
| **Row gap** *(Grid only)* | Adjust the spacing between row. |

</Table>

<Tabs>
<Tab title="Grid">

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

</Tab>

<Tab title="Carousel">

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

</Tab>
</Tabs>

#### Mobile layout

<Table widths="218.28009033203125,auto">

| Setting | Description |
| --- | --- |
| **Enable swipe on mobile** | Allow users to swipe through items on mobile devices. |
| **Custom column width** | Enable custom width for columns instead of equal sizing. |
| **Mobile columns** | Select how many columns appear on mobile. |
| **Horizontal gap** | Adjust the spacing between items horizontally on mobile. |

</Table>

<Tabs>
<Tab title="Enable swipe on mobile">

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

</Tab>

<Tab title="1 column">

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

</Tab>

<Tab title="2 columns">

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

</Tab>
</Tabs>

<Hint type="info">

Check out other Icon boxes 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 Icon boxes section consists of three main blocks: **Header**, **Icon box**, and **Quick view**.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_yfQZe6xU.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>

<Hint type="success">

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

</Hint>

</Tab>

<Tab title="Icon box">

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

<Hint type="success">

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

</Hint>

</Tab>

<Tab title="Quick view">

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

Displays a quick view modal with a list of icon box details, allowing users to easily browse information without leaving the page.

<Table widths="300.64312744140625,auto">

| Setting | Description |
| --- | --- |
| **Heading** | Set the title displayed at the top of the quick view pop up. |
| **Button** | Customize the text shown on the action button. |
| **Button style** | Choose the visual style of the button. |
| **Button size** | Adjust the size of the button. |
| **Button icon** | Add or remove an icon displayed alongside the button label. |
| **Enable button full width on mobile** | Make the button stretch to full width on mobile devices for better usability. |

</Table>

</Tab>
</Tabs>