# Product details

The **Product details** element is an essential feature for displaying product-specific information in your Shopify store. This element combines product media and information in a structured layout, making it essential for creating effective product pages.

{% hint style="info" %}
**Use cases:** Use the **Product details** element for either:

:white\_check\_mark: Product page template

:white\_check\_mark: Sections like Featured product
{% endhint %}

## How to add the Product details element to your page

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

1. From the editor, click Add elements > **Single product** > **Product details**

<img src="/files/afu2iP1UvDFF8I7SM4yI" alt="" data-size="original">

2. Drag it onto the canvas
3. The element includes some essential components you need

<img src="/files/8SvzKczQfqzv4HmkDSgA" alt="" data-size="original">

4. You can also edit/add more elements to display the information you want.
   {% endhint %}

## Before you customize your Product details

Depending on the page type/section type, make sure you follow the steps below before customizing the **Product details** section.

{% tabs %}
{% tab title="Product template" %}
For product template, start with **assigning products to your template**. This way, the correct details are displayed on each individual product page.

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

1. Click **Assigned products** from the Top bar.
2. Choose how to apply the template:
   * **Apply to specific products**: Select individual products
   * **Apply to all products**: Template applies to your entire catalog
     {% endhint %}

<figure><img src="/files/5v3ZgLKhU5ZW0FRlkOLq" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Do not assign a fixed product in the Product details element**. If you do, all products using this template will show the same product. Instead, keep it as previewing only.
{% endhint %}

<figure><img src="/files/Y4ZcycVWxbPh7FHcxJXf" alt=""><figcaption></figcaption></figure>

:eyes: Learn more about **assigning products to a template** in our *tutorial* here:&#x20;

{% embed url="<https://youtu.be/04T6saGBZ7w>" %}
{% endtab %}

{% tab title="Featured product section" %}
For section for highlighting a best-seller or featured product (perfect for home page or sales landing page): make sure you **select a product for the section**. This way, the section can be shown on the storefront with the selected product's information.

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

1. Select the **Product details** element
2. In the settings panel, choose **Select product**
3. Select the specific product you want to feature

This ensures consistent display of your chosen featured product.
{% endhint %}

<figure><img src="/files/b6VuV6ZQ4dDe1cEoniI7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## How to edit your Product details

{% hint style="info" %}
A product details section usually contains **2 main parts**:

* [#product-media](#product-media "mention")
* [#product-information](#product-information "mention")
  {% endhint %}

### Product media

The **Product media** section displays your product visuals and is crucial for customer engagement.

<figure><img src="/files/PdhoS4zRBWkIwIDzfkQq" alt=""><figcaption></figcaption></figure>

<details>

<summary>Media layout</summary>

Controls how your product images and video are arranged and displayed to customers.

:writing\_hand: [*See how to add media to your products*](https://help.shopify.com/manual/products/product-media/add-media)

{% hint style="info" %}
This setting applies to the desktop view.

On mobile/tablet view, the media layout is Stacked by default.
{% endhint %}

<table><thead><tr><th>Media layout option</th><th>Example</th><th data-hidden></th></tr></thead><tbody><tr><td>Carousel</td><td><img src="/files/Us3unrJmGBwHvYrIEEfe" alt=""></td><td></td></tr><tr><td>Stacked</td><td><img src="/files/67vchcSzthzkq7gQc1Zv" alt=""></td><td></td></tr><tr><td>Grid mix</td><td><img src="/files/aPh5fxF5DsrynqF7q8ME" alt=""></td><td></td></tr><tr><td>Grid 2 columns</td><td><img src="/files/qakoX7LExO8qN6r6HhQ0" alt=""></td><td></td></tr></tbody></table>

</details>

<details>

<summary>Media ratio </summary>

Determines the aspect ratio and cropping of your product images:

* **Adapt to media**: Maintains original image proportions - prevents distortion but may create inconsistent sizing across different products.
* **Square (1:1)**: Forces all images into square format - creates uniform appearance, popular for social media consistency.
* **Portrait (3:4)**: Vertical rectangular format - ideal for tall products like clothing, bottles, or furniture.
* **Landscape (16:9)**: Horizontal rectangular format - works well for wide products like electronics, appliances, or home decor.

</details>

<details>

<summary>Interactives </summary>

* **Sticky on scroll**: Keeps media visible while scrolling through product information - ensures customers can always reference the product image while reading details.
* **Enable effect fade**: Shows fade effect when sliding through the product media. This setting is available for **Carousel** layout only.

<figure><img src="/files/otPp4qjspIk5nLve9eX6" alt=""><figcaption></figcaption></figure>

* **Video looping**: Automatically loops product videos - creates engaging, continuous product demonstrations without user interaction.
* **Hide thumbnails**: Toggle thumbnail visibility for cleaner appearance - removes thumbnail navigation for minimalist design.

<div><figure><img src="/files/11lgAlhjNTvTrU68IPFi" alt=""><figcaption></figcaption></figure> <figure><img src="/files/L7strJ9JnknEPK0PT2iq" alt=""><figcaption></figcaption></figure></div>

* **Hide carousel controls**: Remove navigation arrows for minimal design - creates cleaner look but relies on touch/swipe navigation, best for mobile-optimized stores.

<div><figure><img src="/files/tPM1Ugl8xIStqBV8rzbz" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4vMDc3SmzIfaqOkWVJuV" alt=""><figcaption></figcaption></figure></div>

</details>

### Product information

<figure><img src="/files/G9jlSfR5HiiXT1lWviya" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Elements to include & Why they matter

1. **Product title & price**: Instantly communicate the product name and cost.
2. **Description**: Useful for sharing size, materials, shipping info, and care instructions.
   * :writing\_hand: See how to [add description to your product](https://www.youtube.com/watch?v=265f0W3LQXY).&#x20;
     {% endhint %}

<figure><img src="/files/LjXwh484YMQu9aacp8V1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### 3. Variant picker (Variants)&#x20;

* Pulls data directly from Shopify variant options. [*Learn more*](https://help.shopify.com/manual/products/variants)
* Customize:

  * **Picker type**: **Dropdown** or **Buttons**
  * **Label position: Above** or **Inline**
  * **Show selected option value**

  <figure><img src="/files/4bEZUj7COsJThrd4u8iG" alt=""><figcaption></figcaption></figure>

  * **Hide unavailable options:** Hide the unavailable options based on the selected variant.
* 👉 Want to show **swatches**? Use the extension [Color Swatches](/foxify-app/page-management/app-extensions/color-swatches.md)
  {% endhint %}

{% hint style="info" %}

#### 4. Add to cart

* These auto-detect the product + selected variant — no manual setup required.
* Change the **button label** and add an **icon** before the label.
* :star:To change the ATC button label across all Foxify pages, go to **Translation > Edit Foxify defaut theme content**.&#x20;
  * Learn more: [Translation](/foxify-app/page-management/translation.md#change-the-default-wording-in-foxify)
* 👉 Want to add products to cart **without reloading the page**? Enable the extension [Ajax Add to Cart](/foxify-app/page-management/app-extensions/ajax-add-to-cart.md)
  * This extension can open the cart drawer of your theme or app (if you're using a cart drawer from an app) as well. To set this up, you may need to **contact the app provider or theme developer** to get the **event to trigger cart**  — then contact us for integration!
    {% endhint %}

{% hint style="info" %}

#### 5. Dynamic checkout buttons

* These auto-detect the product + selected variant — no manual setup required.
* The kind of accelerated checkout button that displays to your customers depends on different factors factors. [*Learn more*](https://help.shopify.com/manual/online-store/dynamic-checkout)
  {% endhint %}

<figure><img src="/files/GwbWg5KPdBpxZY01Stxp" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Don’t use standard `Buy buttons` here (those require fixed product setup - more suitable for a section that links to **one specific** product/variant).&#x20;

:x: ![](/files/3ITRJH7GOL5qpr6eLnRr)
{% endhint %}

{% hint style="info" %}

#### Additional elements to enrich your product page

Foxify lets you go beyond the basics. Here are some **optional but powerful** elements to enhance your product story:

* **Product Media**: Add extra images, videos, or 3D previews.
* **Tabs & Collapsibles**: Organize long info (e.g., reviews, specs, FAQs).
* **Testimonials & Press**: Build trust with customer feedback or media mentions.
* **Promotions**: Highlight offers, discounts, or bundles.

👉 Learn more about all available elements: [Add and edit elements](/foxify-app/foxstudio/add-and-edit-elements.md)
{% endhint %}

{% hint style="success" %}
:star: **Pro tip: Use Stack for structure**

To keep everything aligned and responsive, wrap your product section elements inside a **Stack**:

* Prevents overlapping
* Ensures spacing consistency
* Fully responsive on all screen sizes

*🔍 Learn more:* [Stack elements](/foxify-app/foxstudio/layout-and-styling/stack-elements.md)

:star: **Explore our Build for success series**

[Product page](/foxify-app/build-for-success-series/product-page.md)
{% endhint %}


---

# 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/foxify-app/foxstudio/add-and-edit-elements/product-details.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.