# Comparison gallery

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

Showcase before-and-after or product differences in a customizable layout to help customers compare and choose easily.

## How to add a Comparison gallery section to your Shopify store

<Hint type="success">

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

</Hint>

## How to customize a Comparison gallery section

This section includes two main blocks: **Header** and **Product**.

<Tabs>
<Tab title="Header">

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

The **Header** block lets you introduce the section with titles, text, images, or buttons. Use it to create a strong opening and guide customers through the comparison.

| 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 widths="155.89990234375,215.6544189453125,auto">

| Block | Description | Example |
| --- | --- | --- |
| Subheading | Provide supporting text above or below the heading | ![image](https://docs-assets.foxecom.app/pebble-theme/image_bl7Yyjzf.png) |
| Heading | Add a main title | ![image](https://docs-assets.foxecom.app/pebble-theme/image_XVyv0FGN.png) |

</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="Product">

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

The **Product** block displays individual items with customizable content such as image comparison, product title, features, and call-to-action, helping highlight key benefits and differences.

<Table widths="141.9110107421875,247.8656005859375,auto">

| Block | Description | Example |
| --- | --- | --- |
| **Product** | Showcase product | ![image](https://docs-assets.foxecom.app/pebble-theme/image_CRg4mA9z.png) |
| **Image comparison** | <br/>Display before &#x26; after images with an interactive slider. Learn more: [theme-blocks/basic#image-comparison](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#image-comparison) | ![image](https://docs-assets.foxecom.app/pebble-theme/image_VYMtNXbl.png) |
| **Product title** | Show the product name | ![image](https://docs-assets.foxecom.app/pebble-theme/image_6OOJJFZI.png) |
| **Icon list** | Highlight key features with icons. Learn more: [theme-blocks/basic#icon-list](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#icon-list) | ![image](https://docs-assets.foxecom.app/pebble-theme/image_Ca7jgRRz.png) |
| **Button** | Add a call-to-action | ![image](https://docs-assets.foxecom.app/pebble-theme/image_QYWDtr92.png) |

</Table>

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

</Tab>
</Tabs>