# Products highlight

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

Display featured products in a visually engaging layout designed to capture attention, showcase product details, and guide customers toward making a purchase.

## How to add a Products highlight section to your Shopify store

{% hint style="success" %}

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

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

### Section settings

| Setting                    | Description                                                                                                                                                                   |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Products**               | Select the products you want to highlight in this section (up to 50 items).                                                                                                   |
| **Desktop image position** | Choose between **left** or **right** for the image layout.                                                                                                                    |
| **Color scheme**           | <p>Choose a color scheme to apply to the section's background and text.<br>Learn more: <a data-mention href="/pages/LHMEEJzFAAyBfjuU3BDC">/pages/LHMEEJzFAAyBfjuU3BDC</a></p> |

### The **Products** highlight **section** includes

* **2 static blocks:**

<details>

<summary>Header – add heading, subheading, text and button inside the header</summary>

<div data-with-frame="true"><figure><img src="/files/tgzmu8l9SnemO04zj9mn" alt=""><figcaption></figcaption></figure></div>

#### 📦 Nested dynamic blocks&#x20;

The **Header** block supports **4 nested block types**:

<table><thead><tr><th width="219.5386962890625">Dynamic blocks</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Primary title text used to introduce the section or key content.</td></tr><tr><td><strong>Subheading</strong></td><td>Secondary text that provides additional context or supports the main heading.</td></tr><tr><td><strong>Text</strong></td><td>Regular body text used for descriptions, details, or any supplementary information within the block.</td></tr><tr><td><strong>Button</strong></td><td>A call-to-action element that users can click to open another page.</td></tr></tbody></table>

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md#text) [Basic](/pebble-theme/theme-blocks/basic.md#button)

</details>

<details>

<summary>Banner – add and configure the banner image/video</summary>

<div data-with-frame="true"><figure><img src="/files/YNCwliKuUuwHP7EzSPbC" alt=""><figcaption></figcaption></figure></div>

| Setting                | Description                                             |
| ---------------------- | ------------------------------------------------------- |
| **Image**              | Upload the banner image.                                |
| **Image mobile**       | Upload a separate image optimized for mobile devices.   |
| **Aspect ratio**       | Sets the image’s ratio.                                 |
| **Source**             | Choose the video source (Uploaded/External URL).        |
| **Video**              | Upload the video used inside the banner.                |
| **Video autoplay**     | Automatically plays the video. Videos muted by default. |
| **Video looping**      | Keeps the video playing continuously.                   |
| **Video aspect ratio** | Sets the video’s display ratio.                         |
| **Corner radius**      | Adjusts how rounded the banner’s corners appear.        |

{% hint style="success" %}
For the best result, use **both an image and a video** in the Banner block, or simply use **an image on its own**.

The video plays **inside the banner image area**, so adding an image helps keep the layout looking great. If you add **only a video**, an image placeholder will be shown instead.
{% endhint %}

| Image only                                                                                          | Video only                                                                                          |
| --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| <div><figure><img src="/files/IlQQKwxSvl8BiN4VP8rK" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="/files/n3WIivc2IpbJigkTKw5f" alt=""><figcaption></figcaption></figure></div> |

</details>

### Best practices

#### Number of products

* Recommended: 1–5 products
* Products highlight section is designed to **highlight** key items, not replace a full product grid. Try to feature **products that appear in the banner image or video**.
* Fewer products help keep the message clear and impactful.

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

#### Media quality

* **Images**
  * Use **high-quality images**
  * Prefer **`.webp` format** when available for better performance
* **Videos**
  * Enable **video looping** for a smooth, seamless viewing experience.
  * Avoid large file sizes to maintain fast loading

{% hint style="warning" %}

* The **image container is always larger than the video**.
* If the video size is set larger than the image, the **image aspect ratio setting will not apply**.

*Example:*

* Video ratio: **Portrait (4:5)**
* Image ratio: **Landscape (16:9)**

In this case, the image ratio will be **automatically adjusted to fit the video**, and the selected image aspect ratio will not work as expected.

👉 **Tip:** For best results, keep the image and video aspect ratios consistent.
{% endhint %}


---

# 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/products-highlight.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.