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

1. Drag it onto the canvas

2. The element includes some essential components you need

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.

Product template

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. If you do, all products using this template will show the same product. Instead, keep it as previewing only.

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.

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 information

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.

Media layout option	Example
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

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.

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

Product page 🔥