# Product information

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F8Ox1i4fpXf2oivTk0yvo%2FFox-BG%20Light%20-%202025-11-18T150456.476.jpg?alt=media&#x26;token=179a7189-7eb8-45af-9a3e-8195cd6fe666" alt=""><figcaption></figcaption></figure>

The **Product information** section is the core layout on every product page. It displays your product’s images, videos, details, buy buttons, variants, and supporting information.

This section ensures shoppers can clearly view product imagery while quickly accessing all essential buying details.

## How to navigate to the Product information section

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), open the template selector.
2. Locate **Products**, and select a product template you want to make changes to.
3. On the left sidebar, select the **Product information** section.
4. Make necessary changes and **Save.**
   {% endhint %}

## How to edit the Product information section

### Section settings

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F8PFeSqxnPqV6rvyo54q8%2Fimage.png?alt=media&#x26;token=d493f4a0-87b2-4d4c-a45c-326370f3dacc" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Container</strong></td><td>Choose <code>Full width</code> or <code>Fixed (Page width)</code> layout.</td></tr><tr><td><strong>Media position</strong></td><td>Display product media on the <strong>left</strong> or <strong>right</strong> side of the details.</td></tr><tr><td><strong>Equal columns</strong></td><td>Makes the media and details columns equal width.</td></tr><tr><td><strong>Gap</strong></td><td>Adjust spacing between the media and details columns.</td></tr><tr><td><strong>Color scheme</strong></td><td>Apply a color scheme to this section. <a href="../../theme-settings/colors"><em>Learn more</em></a></td></tr></tbody></table>

### Block settings

The Product information section is made up of **2 static block groups**:

* [#id-1.-media](#id-1.-media "mention")
* [#id-2.-product-details](#id-2.-product-details "mention")

#### 1. Media&#x20;

This block automatically includes the full Product media gallery, such as images, videos, 3D models, and a thumbnails carousel.&#x20;

You cannot remove this block, but its layout depends on your settings.

**📐 Layout**

{% tabs %}
{% tab title="Grid" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FU77t6menKZjqpXHqbJ55%2Fimage.png?alt=media&#x26;token=0cb59a6f-cebe-437d-8d1d-33cfd29bdb52" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Carousel" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7tmjXvXjy6olX9fYS3Yh%2Fimage.png?alt=media&#x26;token=a3ba2d3a-048b-4254-a2c4-8a39ba881009" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Style**: Select your preferred desktop layout for product media. On mobile, the media is displayed as a carousel.

If the style is grid, set:

* **Grid layout**: If using grid, choose 1-column, 2-column, or grid-with-thumbnail layout.
* **Grid gap**: Spacing between media items when using a grid layout.

{% tabs %}
{% tab title="1-column grid" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FmDvaxk5K9XXGCdLoUfMm%2Fimage.png?alt=media&#x26;token=584c5a9b-6c84-4a9c-80d6-7d754e2a3923" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2-column grid" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FKki2kqOtE0nSfaEiEXQ7%2Fimage.png?alt=media&#x26;token=eb512372-ab60-4391-a527-fbde6171005e" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="With thumbnail" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FkYykPcw4KNrYEs5C3aeS%2Fimage.png?alt=media&#x26;token=3419e605-2c60-401c-8091-1655eae16536" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

If the style is carousel, set:

* **Thumbnail**: None/ Inside/ Outside.
* **Thumbnail aspect ratio**: Control cropping of small thumbnail items separately.

{% tabs %}
{% tab title="None" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FHjyxo8I3oydnOTE2b5X6%2Fimage.png?alt=media&#x26;token=cd8e0b59-52df-4311-92ff-225e40adf3bb" alt="" width="373"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Inside" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FuEKjhPKqHfyARrOZgyfK%2Fimage.png?alt=media&#x26;token=038e5782-bd5c-4b16-888c-f03269b8171e" alt="" width="372"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Outside" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FMqMWIuILExwF3Co3PvAg%2Fimage.png?alt=media&#x26;token=e72d5edf-fa97-4b9d-af5f-30c7b8913fbd" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**🖼️ Media display**

* **Media aspect ratio:** Control how the main media is cropped (square, portrait, landscape, auto).
* **Border radius:** Round the corners of media items. This applies to the thumbnails as well.
* **Extend media to screen edge**: Makes visuals extend horizontally when container = “page” (great for immersive layouts).

**🎥 Video & zoom options**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Video autoplay</strong></td><td>Automatically plays product videos (muted) in the gallery.</td></tr><tr><td><strong>Enable zoom</strong></td><td>Enables image zoom interaction on desktop.</td></tr></tbody></table>

**🧬 Variant-aware display**

* **Hide unselected variant media**: When enabled, the gallery only shows media for the selected variant, cleaning up the viewer.

#### 2. Product details&#x20;

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F9IC0UDTavxFERL9BJQSb%2Fimage.png?alt=media&#x26;token=1881e24c-0dd5-4eeb-9117-bfb77ca23ffc" alt=""><figcaption></figcaption></figure>

This block includes all core product detail components. You can manage the sub-blocks of the Product details area in the **Product details** section of the theme editor.

<details>

<summary>Breadcrumbs</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6vaW7jSUaHlOV3ybMWbJ%2Fimage.png?alt=media&#x26;token=19fda408-2aec-4d4d-9312-d39ef2f8cc1b" alt=""><figcaption></figcaption></figure>

Breadcrumb is a type of secondary navigation scheme that reveals the customers’ location on the website.

{% hint style="info" %}
By default, breadcrumbs display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).
{% endhint %}

</details>

<details>

<summary>Product title</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FqJR2ZcfamfWGxPH2yrrK%2Fimage.png?alt=media&#x26;token=49da5516-ca45-47bf-ac03-fbff26ae27b0" alt=""><figcaption></figcaption></figure>

Display the product title. Change the **Text preset** and **HTML tag** as you want for it.

Learn more about [Typography preset](https://docs.foxecom.com/pebble-theme/theme-settings/typography#text-presets).

</details>

<details>

<summary>Product price</summary>

Display the product price.

It automatically updates when shoppers select different variants and can also display compare-at price, installment options, and tax/shipping notices depending on your settings.<br>

**💰 Pricing options**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show installments</strong></td><td>Shows Shop Pay installment messaging under the price (if set up in Shopify admin).</td></tr><tr><td><strong>Show tax info</strong></td><td><p>Displays tax and duties information based on your </p><p>store settings.</p></td></tr></tbody></table>

{% hint style="info" %}

* To change price formatting, go to **Theme settings** > [prices](https://docs.foxecom.com/pebble-theme/theme-settings/prices "mention").
* To change price colors, go to **Theme settings** > [colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors "mention") > **Color scheme 1**.
  {% endhint %}

</details>

<details>

<summary>Description</summary>

Display the product description.&#x20;

✍️ *Not sure how to add a description to your product? See* [*our tutorial here*](https://youtu.be/265f0W3LQXY?si=kQCQpGV1hB_Z_lHf)*.*

</details>

<details>

<summary>Variant picker</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbsnbiHTHA6OG96yNmpRQ%2Fimage.png?alt=media&#x26;token=f58ca7ea-3ad8-4402-ac90-e7412359d2e5" alt=""><figcaption></figcaption></figure>

The **Variant picker** block allows shoppers to choose between product variants directly on the product page. It updates the selected variant, price, media gallery, availability, and add-to-cart button automatically.

**🎨 Variant styles**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Style</strong></td><td><p>Choose how each variant option is displayed.</p><ul><li>Dropdown<br><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FCmEqnzKBNbZQugeSeHj3%2Fimage.png?alt=media&#x26;token=460e70b0-bb33-41ea-a852-5c6e1500c25a" alt=""></li><li>Buttons<br><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FwWRtGXYNfSZE0TS3VDPb%2Fimage.png?alt=media&#x26;token=430b3964-46ae-4342-9fe6-27ecbb308c85" alt=""></li></ul></td></tr><tr><td><strong>Show swatches</strong></td><td>Converts color options into color/pattern circles or squares.<br><span data-gb-custom-inline data-tag="emoji" data-code="270d">✍️</span> <em>Learn how to</em> <a href="https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields"><em>add color swatches using category metafields in Shopify</em></a></td></tr><tr><td><strong>Show variant image</strong></td><td><p>Shows variant preview images inside the swatch (if available).<br></p><p><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fz1TSKqfOc9UEfV2GWogA%2Fimage.png?alt=media&#x26;token=9107de9a-0208-4f4a-bde5-a480355a95c0" alt=""><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FAuAWAs015drnW7GlYynl%2Fimage.png?alt=media&#x26;token=6ea88d6a-8811-42e5-9b93-3393a275c89b" alt=""></p></td></tr><tr><td><strong>Swatch shape</strong></td><td><p>Choose circle or square swatches.</p><ul><li>Circle shape:</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F48tLbJ12A2TWBnOeHuBu%2Fimage.png?alt=media&#x26;token=d662d23a-76cd-499d-8a09-c2f74ed794fb" alt=""><figcaption></figcaption></figure></div><ul><li>Square shape:</li></ul><div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpRn61h8GesndNDPsRzpZ%2Fimage.png?alt=media&#x26;token=a541fbfb-4d15-456b-9bdf-7e2676b4bb97" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Swatch width / height</strong></td><td>Adjust the size of each swatch.</td></tr></tbody></table>

📏 **Size chart**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Size chart title</strong></td><td>Enter the product option name where you want to the size chart button to appear.</td></tr><tr><td><strong>Size chart page</strong></td><td>Select a Shopify Page that opens in a popup.</td></tr></tbody></table>

This is especially useful for apparel, accessories, and shoes.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FMAEWZQsrPH2TTN7aSnh6%2Fimage.png?alt=media&#x26;token=2edf00e6-6f85-4778-a5b6-08906b10bc1c" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Video testimonials</summary>

<div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7UtuJswiDsubYg8k6iW8%2Fimage.png?alt=media&#x26;token=da5a2e66-9c5d-4633-b98c-2dd0ef1bb00d" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F9mZ3XQ7e7YD7bRNCinoy%2Fimage.png?alt=media&#x26;token=e4a3e727-d7af-461b-9a85-e4d74fb6e632" alt=""><figcaption></figcaption></figure></div>

The **Video testimonials** block lets you display short customer videos directly on your product page. Shoppers can tap a thumbnail to open a full video viewer — complete with swipeable navigation and a product card overlay — making it easy to build trust and drive conversions through authentic social proof.

{% hint style="info" %}
This block reads video testimonial data from a **Shopify metaobject**. You must set up the metaobject and link it to your product before any content appears on the page.
{% endhint %}

**Step 1: Create the metaobject definition**

Before adding testimonials to a product, you need to set up a custom metaobject type in your Shopify admin.

{% hint style="success" %}

1. In your Shopify admin, go to **Settings** > **Metafields and metaobjects**.
2. Select the **Metaobjects** tab, then click **Add definition**.
3. Name it `video_testimonial` (the type handle must be exactly `video_testimonial`).
4. Add the following two fields:
   {% endhint %}

| Field name | Field type   |
| ---------- | ------------ |
| `image`    | File — Image |
| `video`    | File — Video |

{% hint style="success" %}
5\. Under **Metaobject options**, enable **Storefronts API access**.
6\. Click **Save**.
{% endhint %}

**Step 2: Create the product metafield definition**

This connects the metaobject to your products so the theme can read the data.

{% hint style="success" %}

1. In your Shopify admin, go to **Settings** → **Metafields and metaobjects**.
2. Click the **Metafields** tab, then select **Products**.
3. Click **Add definition**.
4. Fill in the fields exactly as follows:
   {% endhint %}

| Field                 | Value                                                        |
| --------------------- | ------------------------------------------------------------ |
| **Name**              | `Video testimonials`                                         |
| **Namespace and key** | `foxtheme.video_testimonials`                                |
| **Type**              | List of metaobject references → select **Video testimonial** |

{% hint style="success" %}
5\. Under **Options**, enable **Storefront API access**.
6\. Click **Save**.
{% endhint %}

{% hint style="warning" %}
The **namespace and key** must be exactly `foxtheme.video_testimonials` — this is what the theme code looks for. Any variation will cause the block not to display.
{% endhint %}

**Step 3: Add testimonial entries**

Each entry represents one testimonial — a thumbnail image paired with a video file.

{% hint style="success" %}

1. In your Shopify admin, go to **Content** > **Metaobjects**.
2. Select the **Video testimonial** definition.
3. Click **Add entry**.

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F2vVKmTJQP9WLtnQF3zZ9%2Fimage.png?alt=media\&token=95d16363-37ff-4e76-98e4-6e0304651701)

4. Upload a **thumbnail image** (the circular preview shoppers click to open the video) and a **video file**.
5. Set the status to **Active**.
6. Click **Save**.
   {% endhint %}

Repeat for every testimonial you want to use. Each entry can be reused across multiple products — all linked products are listed in the **References** panel of the entry.

**Step 4: Link testimonials to a product**

Once you have entries, you connect them to a product via a product metafield.

{% hint style="success" %}

1. Go to **Products** and open the product you want to add testimonials to.
2. Scroll down to the **Metafields** section.
3. Find the field `foxtheme.video_testimonials` and click to edit it.
4. Select all the testimonial entries you want to display for this product.
5. Click **Save**.
   {% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FCRUIw5ZewsxfW6mmgQ6I%2Fimage.png?alt=media&#x26;token=6acc6fd9-28d2-4c18-a5d3-8c31a2e12d78" alt=""><figcaption></figcaption></figure>

**Step 5: Add the block in the theme editor**

{% hint style="success" %}

1. In the theme editor (**Customize**), navigate to the product page template.
2. In the **Product details** sidebar, click **Add block**.
3. Select **Video testimonials**.
4. Configure the block settings (see below) and click **Save**.
   {% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FUVuJHirg74APOYOlchxG%2Fimage.png?alt=media&#x26;token=7802860e-1460-4faa-bf47-29327a23a60f" alt=""><figcaption></figcaption></figure>

**Block settings**

Content

<table><thead><tr><th width="333">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Optional title displayed above the testimonial thumbnails (e.g., "What our customers say").</td></tr><tr><td>Heading preset</td><td>Controls the heading size — choose from H3, H4, H5, or H6.</td></tr></tbody></table>

Video

| Setting       | Description                                                                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Aspect ratio  | Sets the shape of the video player. Options: Square (1:1), Portrait (4:5), Portrait (3:4), Portrait 9:16. The default 9:16 is ideal for mobile-shot videos. |
| Media overlay | Adds a color tint over the video, useful for improving text or icon contrast.                                                                               |
| Overlay color | Picker for the overlay color and opacity. Only visible when **Media overlay** is enabled.                                                                   |
| Border radius | Rounds the corners of the video player (0–32px).                                                                                                            |

</details>

<details>

<summary>Buy buttons</summary>

The **Buy buttons** block powers all purchase actions on your product page. It includes the Add to Cart button, quantity selector, accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay…), and optional gift card recipient form (if the product is a gift card).

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fj8rLJ9B9S2CrC0AlukoH%2Fimage.png?alt=media&#x26;token=a0e8e3e1-ffc2-4b7c-b912-72dcaba97c3a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The **Buy buttons** include 3 private static blocks:

* **Quantity**: display a quantity selector inside the Buy buttons area. It allows shoppers to choose how many items they want to add to cart.
* **Add to cart**: display the main action button that adds a selected variant to the customer’s cart.
* **Accelerated checkout**: display fast-checkout buttons depending on the customer’s device and Shopify Payments configuration.\
  [*Learn more about Accelerated checkout buttons*](https://help.shopify.com/manual/online-store/dynamic-checkout)
  {% endhint %}

</details>

<details>

<summary>Product badges</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FisyTa9QmYLFZIdQE5FqL%2Fimage.png?alt=media&#x26;token=49ae7ab8-555e-4f5f-b638-a41eb7646f21" alt=""><figcaption></figcaption></figure>

The **Product badges** block lets you display key status labels, such as Sold out, On Sale, or your own custom badges, on the product page. These badges help customers quickly understand product availability and promotions, improving clarity and boosting conversions.

{% hint style="success" %}
The block automatically pulls product information to display badges such as:

* **Sale badge** — appears when a product has a compare-at price.
* **Sold out badge** — appears when selected variant is unavailable.
* **Custom badges** — shows custom badges you've set for the products.

Sale badges can also show **percentage** or **fixed amount discount** depending on your selected type.
{% endhint %}

{% hint style="info" %}
Change your badges' colors in the **Theme settings** > [colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors "mention").
{% endhint %}

{% hint style="info" %}
Learn how to set up Custom badges: [product-badges](https://docs.foxecom.com/pebble-theme/theme-settings/product-badges "mention")
{% endhint %}

</details>

<details>

<summary>Product inventory</summary>

The **Product inventory** block displays real-time stock status for the currently selected variant. This helps shoppers understand availability, creates urgency, and improves trust.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJBST9pbib49zXp4qiRZp%2Fimage.png?alt=media&#x26;token=8de1f17d-9181-4802-9ce1-b9bfced50948" alt=""><figcaption></figcaption></figure>

The block automatically reads the inventory data from the **selected product variant** (When the "Track inventory" is enabled):

* **In stock** — inventory quantity is above the threshold
* **Low stock** — inventory quantity is at or below your defined threshold
* **Out of stock** — no inventory and the product cannot continue selling
* **In stock (continue selling) —** inventory is 0, but “Continue selling when out of stock” is enabled, or the "Track inventory" is disabled.&#x20;

The block also supports optional **quantity display**, for example:

> “Only 3 items in stock!”

⚙️ **Block settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Inventory threshold</strong></td><td>Quantity level that triggers the “Low stock” status. Example: set to <em>10</em>, and any variant with 10 or fewer units will show a low-stock warning.</td></tr><tr><td><strong>Show inventory quantity</strong></td><td>When enabled, it displays the exact remaining quantity. When disabled, it shows a general message (“Low stock”).</td></tr></tbody></table>

{% hint style="info" %}
Edit the message content anytime in the **Edit default theme content** section.

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FPoUz7auGxSWCei9pNFmT%2Fimage.png?alt=media\&token=84913f66-ef53-431b-9f4f-1bd4fbb2d5a4)![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTSbDN28PVj0hOjq5akUa%2Fimage.png?alt=media\&token=01490c13-2334-47f2-a1eb-9d9641b8828e)
{% endhint %}

</details>

<details>

<summary>Product recommendations</summary>

The **Product recommendations** block automatically suggests relevant or complementary products on your product page. It uses Shopify’s built-in recommendation engine to increase product discovery, boost average order value, and help customers find items they’re more likely to buy.

{% hint style="info" %}
Customize suggested products with Search & Discovery app. [Learn more](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-recommendations)
{% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FxaUj1nZrHFrFE22Bv36l%2Fimage.png?alt=media&#x26;token=a410f717-3b37-4e85-8700-e26779489c4f" alt=""><figcaption></figcaption></figure>

**⚙️ Block settings**

**Recommendation logic**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td>Choose <strong>Related</strong> (similar items) or <strong>Complementary</strong> (add-on items).</td></tr><tr><td><strong>Product count</strong></td><td>Number of products to show (1–10).</td></tr></tbody></table>

**Layout**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop columns</strong></td><td>Display 1–3 columns on large screens.</td></tr><tr><td><strong>Horizontal gap</strong></td><td>Adjust spacing between product cards.</td></tr><tr><td><strong>Mobile swipe</strong></td><td>Enable swipe navigation on mobile for better UX.</td></tr><tr><td><strong>Mobile columns</strong></td><td>Show 1 or 2 products per row.</td></tr></tbody></table>

**Product card display**

Controls what appears inside each recommended product card.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FXN4Rsq9TUMUrS43gQBHc%2Fimage.png?alt=media&#x26;token=f01cf742-fcbd-49db-8ef7-125b937a8407" alt="" width="382"><figcaption></figcaption></figure>

<table><thead><tr><th width="275">Option</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show vendor</strong></td><td>Display product vendor/brand.</td></tr><tr><td><strong>Show product type</strong></td><td>Show the product type.</td></tr><tr><td><strong>Show badges</strong></td><td>Show “Sale”, “Sold out”, or <a href="../../theme-settings/product-badges">custom badges</a>.</td></tr><tr><td><strong>Show swatches</strong></td><td>Show color swatches.</td></tr><tr><td><strong>Quick view</strong></td><td>Allow customers to open a modal preview. <br>Learn more: <a data-mention href="../../global-sections/quick-add-drawer">quick-add-drawer</a></td></tr><tr><td><strong>Quick add</strong></td><td>Show “Add to cart” button directly in the card.</td></tr></tbody></table>

</details>

<details>

<summary>Pickup availability</summary>

Quickly see whether the selected product variant is available for in-store pickup at any of your retail locations.&#x20;

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FgKciGZ7S0P28QuyYDAmk%2Fimage.png?alt=media&#x26;token=8e5e3e76-de94-4597-bf9d-5ecba94f9056" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To show pickup locations, you must first enable **Local pickup** in your Shopify admin.

➡ See Shopify’s official setup guide:\
<https://help.shopify.com/en/manual/fulfillment/setup/delivery-methods/pickup-in-store#set-up-pickup>
{% endhint %}

The block will automatically hide itself if:

* The selected variant has **no pickup-enabled locations**, or
* Pickup is not set up in your Shopify store

</details>

<details>

<summary>Share</summary>

The **Share** block lets customers quickly share your product page across social platforms or copy the link to send to friends, family, or colleagues.&#x20;

{% hint style="info" %}
Set up which social media to share on in **Theme settings** > [#sharing-options](https://docs.foxecom.com/pebble-theme/theme-settings/social-media#sharing-options "mention")
{% endhint %}

The Share block automatically:

* Generates a **share URL** based on the selected product variant
* Applies the correct **product image** and **page metadata**
* Displays a set of share icons (Facebook, X/Twitter, Pinterest, email, etc.)
* Optionally shows a **Help Desk button** with your custom label and link

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FVlnM3x6cW7DQ04rrxNNr%2Fimage.png?alt=media&#x26;token=1bf0b441-10f8-49c5-b466-fcc4839eb41d" alt="" width="563"><figcaption></figcaption></figure>

**⚙️ Block settings**

#### Share label

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Text that appears before the share icons (e.g., “Share”, “Spread the word”).</td></tr></tbody></table>

***

#### Help desk options

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show help desk</strong></td><td>Enables a support button beside the share icons.</td></tr><tr><td><strong>Help desk label</strong></td><td>Custom text for the button (e.g., “Need help?”).</td></tr><tr><td><strong>Help desk link</strong></td><td>URL to your support page, chat, or contact form.</td></tr></tbody></table>

</details>

<details>

<summary>Other dynamic blocks</summary>

Besides private blocks for products, you can also add other dynamic blocks to showcase the details.

[View more dynamic blocks here](https://docs.foxecom.com/pebble-theme/theme-blocks/overview#explore-theme-block-categories).&#x20;

</details>