# 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.
**Use cases:** Use the **Product details** element for either:
β
Product page template
β
Sections like Featured product
## How to add the Product details element to your page
**Steps**
1. From the editor, click Add elements > **Single product** > **Product details**
2. Drag it onto the canvas
3. The element includes some essential components you need
4. You can also edit/add more elements to display the information you want.
## 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.
For product template, start with **assigning products to your template**. This way, the correct details are displayed on each individual product page.
**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
**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.
π Learn more about **assigning products to a template** in our *tutorial* here:
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.
**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.
## How to edit your Product details
A product details section usually contains **2 main parts**:
* [Product media](#product-media)
* [Product information](#product-information)
### Product media
The **Product media** section displays your product visuals and is crucial for customer engagement.
Controls how your product images and video are arranged and displayed to customers.
β [*See how to add media to your products*](https://help.shopify.com/manual/products/product-media/add-media)
This setting applies to the desktop view.
On mobile/tablet view, the media layout is Stacked by default.
| Media layout option | Example |
| --- | --- |
| Carousel | 
_Us3unrJm.gif) |
| Stacked | 
|
| Grid mix | 
_aPh5fxF5.gif) |
| Grid 2 columns | 
|
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.
* **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.
_otPp4qjs.gif)
* **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.
 
* **Hide carousel controls**: Remove navigation arrows for minimal design - creates cleaner look but relies on touch/swipe navigation, best for mobile-optimized stores.
 
### Product information
1. **Product title & price**: Instantly communicate the product name and cost.
2. **Description**: Useful for sharing size, materials, shipping info, and care instructions.
* β See how to [add description to your product](https://www.youtube.com/watch?v=265f0W3LQXY).
* 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**
* **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/pages/app-extensions/color-swatches)
* These auto-detect the product + selected variant β no manual setup required.
* Change the **button label** and add an **icon** before the label.
* βTo change the ATC button label across all Foxify pages, go to **Translation > Edit Foxify defaut theme content**.
* Learn more: [Change the default wording in Foxify](https://docs.foxecom.com/foxify-app/pages/translation#change-the-default-wording-in-foxify)
* π Want to add products to cart **without reloading the page**? Enable the extension [Ajax Add to Cart](https://docs.foxecom.com/foxify-app/pages/app-extensions/ajax-add-to-cart)
* 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!
* 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)
Donβt use standard `Buy buttons` here (those require fixed product setup - more suitable for a section that links to **one specific** product/variant).
β 
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](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements)
β **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)
β **Explore our Build for success series**
[Product page](page://3f6d3198-0848-47c4-a5b6-f3a12a4b2e6f)