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.
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. If you do, all products using this template will show the same product. Instead, keep it as previewing only.
How to edit your Product details
Product media
The Product media section displays your product visuals and is crucial for customer engagement.

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 Product Options 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
Was this helpful?