# Product highlight points

<figure><img src="/files/RVej6pj7JBSfHVRVK6bH" alt=""><figcaption></figcaption></figure>

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 style="success" %}

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

## How to customize a Product highlight points section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

{% hint style="info" %}
[Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### Block settings

The Product highlight points section consists of 3 main blocks: **Header**, **Product highlight point**, and **Button**.

{% tabs %}
{% tab title="Header" %}

<figure><img src="/files/zGREO0WWDZGJeVy3YvXJ" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 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
  {% endhint %}

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endtab %}

{% tab title="Product highlight point" %}

<figure><img src="/files/QlTQW80W11fglUMTdzUE" alt=""><figcaption></figcaption></figure>

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

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

{% hint style="info" %}
**Tip**: Use images as icons to make your highlights look nicer and stand out more.
{% endhint %}
{% endtab %}

{% tab title="Button" %}

<figure><img src="/files/e3hOAKZcsoU0ZZz0WFAp" alt=""><figcaption></figcaption></figure>

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#button)
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/product-highlight-points.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.