# 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="/files/NE1lmLP5PdLEzWIfVJ46">/files/NE1lmLP5PdLEzWIfVJ46</a></td><td><a href="/pages/HVkXnp8DHK7S5fFGOVPo#lookbook-card">/pages/HVkXnp8DHK7S5fFGOVPo#lookbook-card</a></td></tr><tr><td align="center"><strong>Product card</strong></td><td><a href="/files/1SlUtVXYqCODkn1RvTse">/files/1SlUtVXYqCODkn1RvTse</a></td><td><a href="/pages/HVkXnp8DHK7S5fFGOVPo#product-card">/pages/HVkXnp8DHK7S5fFGOVPo#product-card</a></td></tr><tr><td align="center"><strong>Product overlay card</strong></td><td><a href="/files/fEkIzivVfo5GBAkk7zYM">/files/fEkIzivVfo5GBAkk7zYM</a></td><td><a href="/pages/HVkXnp8DHK7S5fFGOVPo#product-overlay-card">/pages/HVkXnp8DHK7S5fFGOVPo#product-overlay-card</a></td></tr></tbody></table>

<details>

<summary>Lookbook card</summary>

<figure><img src="/files/PPEFCWcL44r1nGmzPGPe" 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="/pages/r4NenlkISxJJlRrFyhyI#text-presets">/pages/r4NenlkISxJJlRrFyhyI#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="/pages/LHMEEJzFAAyBfjuU3BDC">/pages/LHMEEJzFAAyBfjuU3BDC</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="/files/KtMr2DMq5dLrrOFlY3YV" 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**.

![](/files/B7zW3xfCTLfKcxMaahau)
{% endhint %}

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

</details>

<details>

<summary>Product overlay card</summary>

<figure><img src="/files/2rggMLT5efVXkDkzVOjq" 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="/pages/LHMEEJzFAAyBfjuU3BDC">/pages/LHMEEJzFAAyBfjuU3BDC</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>


---

# 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-blocks/product.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.