# Products highlight

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJ8kajycWDWd3rXGq4bSl%2FFox-BG%20Light%20(3).jpg?alt=media&#x26;token=c7fe7e22-1983-402d-97f2-3ff0119e89f5" 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="../theme-settings/colors">colors</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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6d0zE4SJExd8I8HSdUl1%2Fimage.png?alt=media&#x26;token=68e5944a-e5ab-4ea7-9120-22e489e14420" 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: [#text](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text "mention") [#button](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#button "mention")

</details>

<details>

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

<div data-with-frame="true"><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FWTGH4U2y5uOKv4iQxvF1%2Fimage.png?alt=media&#x26;token=af06c51b-ba5a-459d-a227-88574567e76e" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FGf0KN2dyRtIyoI6HOxja%2Fimage.png?alt=media&#x26;token=f4091acb-7fcb-4d99-b30b-4534f6942d7b" alt=""><figcaption></figcaption></figure></div> | <div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F8NQEk00cJhCkUPJ3tHDe%2Fimage.png?alt=media&#x26;token=ec57983b-3f43-47d5-b59a-44d7653e79fb" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F4CA4E8wwzMUJCDk77SgE%2Fimage.png?alt=media&#x26;token=6f295923-2f4c-4f35-be5a-b2d40698a5bd" 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 %}