# 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FoGS8NxlGCZsqQsyzLz6M%2Fimage.png?alt=media&#x26;token=bb3ad83f-b039-47a7-8b70-0531b0579184" alt="" data-size="original">

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

<img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fr2xfZn9nHgGS0BrjzO7z%2Fimage.png?alt=media&#x26;token=24b1cc70-20c5-4173-8b98-28eedc7ad2e8" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F5BBiMztC4emGjmoR5aBF%2Fimage.png?alt=media&#x26;token=c038ad16-8899-4561-92d3-b5d1e3696a1c" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FsMHpIjZjG5aVas0ok64h%2Fimage.png?alt=media&#x26;token=d936ed38-4f4d-45cd-905f-08e3c4e23484" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FAN1zAeIKYnhhwBAMmoVH%2Fimage.png?alt=media&#x26;token=3dd7ed17-cb94-4ad3-b8fe-8341ac0ae7f9" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FcMyGyZTGmxpi1k6AC3Fz%2Fimage.png?alt=media&#x26;token=2bf5397a-7034-4242-8fbb-bef587287e7a" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FMZub5FzRyQlCdAXQG6jq%2FCS%20-%20Tut%20%20(1).gif?alt=media&#x26;token=8b35024c-a881-49c3-9fd5-2dbdb13a66de" alt=""></td><td></td></tr><tr><td>Stacked</td><td><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F0UoQiSozfBvHs2PBNBK0%2FCS%20-%20Tut%20.gif?alt=media&#x26;token=31830b76-1b69-4e0a-b06c-8a184d3f4f88" alt=""></td><td></td></tr><tr><td>Grid mix</td><td><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FFL1qQ266XdEnHmuJAM4D%2FCS%20-%20Tut%20%20(2).gif?alt=media&#x26;token=8a4cdd71-9036-4550-aba2-79ca982f8020" alt=""></td><td></td></tr><tr><td>Grid 2 columns</td><td><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fi4zYasKoe4Zx3l93qbeP%2FCS%20-%20Tut%20.jpg?alt=media&#x26;token=c9de56dc-8bcb-43ed-9f48-fafcd4977ab7" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FeA6tAnXbpMOzLrfPgCK9%2FCS%20-%20Tut%20%20(3).gif?alt=media&#x26;token=4dbd7154-4f50-41ef-bd4c-b14fbe495704" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F5qLyWZhE3TJqq6Sho7hG%2Fimage.png?alt=media&#x26;token=e0c4a82d-c43f-43cf-a674-f742c98dd776" alt=""><figcaption></figcaption></figure> <figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FXWsrujRjbhi3UtkQz4mt%2Fimage.png?alt=media&#x26;token=8450d24d-23e1-4e21-b082-3cbf1855db06" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F6Flckl0Da1A9oUmSAArf%2Fimage.png?alt=media&#x26;token=30057c0e-5818-4670-9207-644d76b03398" alt=""><figcaption></figcaption></figure> <figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FumvBVAVvZhPlJx73YiSc%2Fimage.png?alt=media&#x26;token=67b3e368-4f91-4f77-862e-e51ad771ac86" alt=""><figcaption></figcaption></figure></div>

</details>

### Product information

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FfzYcxtW3GUgg4v5lEDFo%2Fimage.png?alt=media&#x26;token=541c4a2f-3cad-4f76-86d4-9d48b310b862" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FcIqAbzpEvPgqzVhclWMk%2Fimage.png?alt=media&#x26;token=62eb57aa-5077-4d11-89e5-4d67b8f774dc" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F8xDGfdvHzcG3146c88kI%2Fimage.png?alt=media&#x26;token=a77afcd4-773a-4f0f-820f-2616bcb903f4" 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](https://docs.foxecom.com/foxify-app/page-management/app-extensions/color-swatches "mention")
  {% 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: [#change-the-default-wording-in-foxify](https://docs.foxecom.com/foxify-app/page-management/translation#change-the-default-wording-in-foxify "mention")
* 👉 Want to add products to cart **without reloading the page**? Enable the extension [ajax-add-to-cart](https://docs.foxecom.com/foxify-app/page-management/app-extensions/ajax-add-to-cart "mention")
  * 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FBR7bjyO5NwOBy7LT2n1v%2Fimage.png?alt=media&#x26;token=d0eea71d-f825-4941-9d52-1b201acf2a38" 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: ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FpA0Z7rN8mHoCHzQmqQqm%2Fimage.png?alt=media\&token=ea159cfb-2d63-4bda-ac94-f52405da5a75)
{% 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: [](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements "mention")
{% 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](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements "mention")

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

[product-page](https://docs.foxecom.com/foxify-app/build-for-success-series/product-page "mention")
{% endhint %}