# Product

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><strong>Lookbook card</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FsbHiFQQuQ8zebwpypw9F%2FFox-BG%20Light%20-%202025-11-18T102035.223.jpg?alt=media&#x26;token=625e1f7d-05a2-4b45-8483-4c9c030e18ac">Fox-BG Light - 2025-11-18T102035.223.jpg</a></td><td><a href="#lookbook-card">#lookbook-card</a></td></tr><tr><td align="center"><strong>Product card</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fkwy4ZdRxDaSnbe3GhKtS%2FFox-BG%20Light%20-%202025-11-18T102207.747.jpg?alt=media&#x26;token=ad3e1d94-0541-4526-968b-6bc4c066f46b">Fox-BG Light - 2025-11-18T102207.747.jpg</a></td><td><a href="#product-card">#product-card</a></td></tr><tr><td align="center"><strong>Product overlay card</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpERd9ybmVjkYDtjPryna%2FFox-BG%20Light%20-%202025-11-18T102354.492.jpg?alt=media&#x26;token=63ea0fed-50bd-4a34-a22b-7bd1e6cb022f">Fox-BG Light - 2025-11-18T102354.492.jpg</a></td><td><a href="#product-overlay-card">#product-overlay-card</a></td></tr></tbody></table>

<details>

<summary>Lookbook card</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FarrC2oGXI4qC1ONtp4HN%2Fimage.png?alt=media&#x26;token=05aee247-2d21-49ee-9120-d6d659e9984e" alt=""><figcaption></figcaption></figure>

The **Lookbook card** block allows you to display a collection of products within a styled card. You can feature images along with a list of products, to create a dynamic and engaging shopping experience for your customers.

#### ⚙️ **Block settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload the image you want to display on the Lookbook card.</td></tr><tr><td><strong>Image (Mobile)</strong></td><td>Upload a separate image for mobile users to ensure a responsive, optimized experience.</td></tr><tr><td><strong>Image ratio</strong></td><td>Choose the aspect ratio of the image.</td></tr><tr><td><strong>Product list</strong></td><td>Select up to <strong>3</strong> products you want to display in the Lookbook card.</td></tr><tr><td><strong>Heading</strong></td><td>Add a heading for the Lookbook card.</td></tr><tr><td><strong>Heading preset</strong></td><td>Choose a heading style for your Lookbook card.<br><em>Learn more:</em> <a data-mention href="../../theme-settings/typography#text-presets">#text-presets</a></td></tr><tr><td><strong>Color scheme</strong></td><td>Choose the color scheme for the Lookbook card.<br><em>Learn more:</em> <a data-mention href="../theme-settings/colors">colors</a></td></tr><tr><td><strong>Border radius</strong></td><td>Set the border radius (rounded corners) for the card. Default is 20px, but you can adjust it as needed.</td></tr></tbody></table>

</details>

<details>

<summary>Product card</summary>

The **Product card** block allows you to showcase individual products. It's ideal for displaying featured items, bestsellers, or any product you'd like to highlight on your store.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FNkKFGxUcBSmPcfQfdbSG%2Fimage.png?alt=media&#x26;token=05f1defa-34dd-4858-b8c5-421632e0036a" alt=""><figcaption><p>An example of a Grid block with Product cards</p></figcaption></figure>

The **Product card** block allows you to showcase individual products with a clean and structured layout. It's ideal for displaying featured items, bestsellers, or any product you'd like to highlight on your store.

#### ⚙️ **Block settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select the product you want to feature in the card. This will display the product's image, title, and price.</td></tr></tbody></table>

{% hint style="success" %}
📌 **In the Product card's content**

You can enhance your Product card by adding additional text blocks. Here are some ideal use cases:

* **Showcasing product details**: Use text blocks to highlight product features, specifications, or other important information.
* **Displaying dynamic content**: Connect to dynamic content that can change based on the product.

:white\_check\_mark: To add more content:

1. In the Product card's block, click **Add block**.
2. You can then choose from various content types such as **Heading**, **Subheading**, or **Text**.

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQdSrM7z2GYG94yArfa8b%2Fimage.png?alt=media\&token=56857fc0-2528-4e31-ac36-5cb411eb3a3d)
{% endhint %}

{% hint style="warning" %}
Customize the function on the product cards across your store in **Theme settings** > [product-cards](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards "mention").
{% endhint %}

</details>

<details>

<summary>Product overlay card</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FCIQg4g1CnrnmQuDi4st7%2FGroup%205559.jpg?alt=media&#x26;token=f90ca577-1a80-420b-bdcb-52f2d5441f06" alt="" width="300"><figcaption></figcaption></figure>

The **Product overlay card** block is designed to showcase a product with an overlay that contains essential details.&#x20;

#### ⚙️ **Block settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select the product you want to feature in the overlay card. This will display the product's image, title, and price.</td></tr><tr><td><strong>Image</strong></td><td>Upload the default image for the product card.</td></tr><tr><td><strong>Image (Mobile)</strong></td><td>Upload a separate image optimized for mobile views.</td></tr><tr><td><strong>Color scheme</strong></td><td><p>Choose a color scheme to style the card. </p><p><em>Learn more:</em> <a data-mention href="../theme-settings/colors">colors</a></p></td></tr><tr><td><strong>Border radius</strong></td><td>Adjust the border radius of the card for rounded corners.</td></tr></tbody></table>

</details>