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
From the editor, click Add elements > Single product > Product details
Drag it onto the canvas
The element includes some essential components you need
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
Click Assigned products from the Top bar.
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
Select the Product details element
In the settings panel, choose Select product
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
The Product media section displays your product visuals and is crucial for customer engagement.
Media layout
Controls how your product images and video are arranged and displayed to customers.
✍️ See how to add media to your products
This setting applies to the desktop view.
On mobile/tablet view, the media layout is Stacked by default.
Carousel
Stacked
Grid mix
Grid 2 columns
Media ratio
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.
Interactives
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.
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
Elements to include & Why they matter
Product title & price: Instantly communicate the product name and cost.
Description: Useful for sharing size, materials, shipping info, and care instructions.
✍️ See how to add description to your product.
3. Variant picker (Variants)
Pulls data directly from Shopify variant options. Learn more
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
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.
⭐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
👉 Want to add products to cart without reloading the page? Enable the extension 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!
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
Don’t use standard Buy buttons here (those require fixed product setup - more suitable for a section that links to one specific product/variant).
❌ 
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
⭐ 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
⭐ Explore our Build for success series
Last updated