Foxify App
Foxify App
FoxstudioAdd and edit elements

Product details

5 min read

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
image
  1. Drag it onto the canvas
  2. The element includes some essential components you need
image
  1. 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
image

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.

image

👀 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.

image

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.

image

Product information

image

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.
image

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
    image
    • 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.
  • 👉 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
image

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

Product card

Previous Page

Password form

Next Page

ON THIS PAGE

How to add the Product details element to your pageBefore you customize your Product detailsHow to edit your Product detailsProduct mediaProduct information

Was this helpful?