# Product highlight points

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

Highlight key product benefits with engaging visuals and brief descriptions, helping customers quickly understand what sets your product apart.

## How to add a Product highlight points section to your Shopify store

<Hint type="success">

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

</Hint>

## How to customize a Product highlight points section

<Hint type="info">

[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 Product highlight points section consists of 3 main blocks: **Header**, **Product highlight point**, and **Button**.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_zGREO0WW.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="Product highlight point">

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

Add individual highlight points with icons, headings, and descriptions to showcase key product benefits in a visually engaging layout.

<Table widths="178.720458984375,auto">

| Setting | Setting |
| --- | --- |
| **Icon** | Choose an icon to visually represent the highlight point. |
| **Image icon** | Upload a custom image to replace the default icon. |
| **Icon size** | Select a predefined or custom size for the icon. |
| **Width** | Adjust the icon width on desktop devices. |
| **Width mobile** | Adjust the icon width on mobile devices. |
| **Heading** | Enter the title for the highlight point. |
| **Heading preset** | Select the heading style (e.g., H1–H6) to control size and hierarchy. |
| **Text** | Add a short description or supporting content. |
| **Color** | Choose the text color style (e.g., primary or subtext). |
| **Color scheme** | Select a color scheme for the highlight card. |
| **Border** | Enable or disable a border around the card. |
| **Corner radius** | Adjust the roundness of the card corners. |

</Table>

<Hint type="info">

**Tip**: Use images as icons to make your highlights look nicer and stand out more.

</Hint>

</Tab>

<Tab title="Button">

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

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

</Tab>
</Tabs>