docs/user/storefront/product-details-page.mdx
A well-designed Product Details Page (PDP) plays an essential role in helping customers understand your products and complete their purchase with confidence.
Spree gives you full visual control over how product information is presented by adding a flexible drag-and-drop layout editor, enhanced metafield management, and complete control over the visibility and order of core product elements - all without writing a single line of code.
This guide shows you how to customize the PDP using the Spree theme editor.
To begin customizing the Product Details Page, first navigate to Storefront → Themes.
Open your active theme (i.e., the one marked Live).
In the page selector (top left), choose Product Details Page.
The editor preview and sidebar will update to show all PDP-specific sections and settings.
<Warning>Remember to click Publish after making changes. Navigating away from the editor without publishing will discard all changes.</Warning>
The PDP layout can be controlled entirely through the sidebar, where each element is displayed as its own draggable block.
From here, you can customize the PDP in a number of ways:
To change the order in which product information appears:
This allows you to design layouts such as:
The editor preview updates instantly so you can see your changes immediately.
<Note>Some merchants prefer a shorter “buy box” on mobile. Use the mobile preview toggle to optimize the PDP for smaller screens.</Note>
Clicking any PDP element opens up its settings, which may include:
These settings vary depending on the selected block, similar to other pages in the theme editor.
Just like other customizable pages in the theme editor, you can insert page sections above or below the PDP’s main content area.
To add more page sections, click Add Section in the sidebar, and choose from the list of available page sections (such as Image Banner, Featured Taxon, etc.).
The section will be added to the PDP layout, where you can edit and rearrange it like any other section.
These sections allow you to enrich the PDP with supplementary content, such as promotional banners, brand messaging, or custom visuals.
The Metafields block is fully configurable and can display any additional product data you’ve added - such as ingredients, materials, certifications, allergens, origin, care instructions, and more.
Each metafield appears in the sidebar with a simple checkbox:
This allows you to display only the information that matters most for each store.
Metafields can also be rearranged via drag-and-drop:
This is especially useful for merchants with many metafields, allowing them to highlight the most important information first.
<Note>If you have not created any product metafields, then this section will appear blank. Please refer to our <u>Metafields</u> support article to learn more.</Note>
Use the controls in the top toolbar to view your PDP as customers would see it:
This ensures your PDP looks consistent and polished across all devices.
Once your PDP layout is ready:
<Note>If you feel like you’ve made a complete mess of the layout, and would like to revert it back to its original configuration, simply exit the theme editor without clicking Publish and your changes will be discarded.</Note>