# Products highlight

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

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 type="success">

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

</Hint>

## How to customize a Products highlight section

### 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: [Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors)</p> |

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

* **2 static blocks:**

<Expandable title="Header – add heading, subheading, text and button inside the header">

<div data-with-frame="true">![image](https://docs-assets.foxecom.app/pebble-theme/image_tgzmu8l9.png)</div>

#### 📦 Nested dynamic blocks

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

<Table widths="219.5386962890625,auto">

| Dynamic blocks | Purpose |
| --- | --- |
| **Heading** | Primary title text used to introduce the section or key content. |
| **Subheading** | Secondary text that provides additional context or supports the main heading. |
| **Text** | Regular body text used for descriptions, details, or any supplementary information within the block. |
| **Button** | A call-to-action element that users can click to open another page. |

</Table>

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

</Expandable>

<Expandable title="Banner – add and configure the banner image/video">

<div data-with-frame="true">![image](https://docs-assets.foxecom.app/pebble-theme/image_YNCwliKu.png)</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 type="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.

</Hint>

| Image only                                                                                          | Video only                                                                                          |
| --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| <div>![image](https://docs-assets.foxecom.app/pebble-theme/image_IlQQKwxS.png)</div> | <div>![image](https://docs-assets.foxecom.app/pebble-theme/image_n3WIivc2.png)</div> |

</Expandable>

### 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.

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

#### 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 type="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.

</Hint>