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.
Access the PDP 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.
Remember to click Publish after making changes. Navigating away from the editor without publishing will discard all changes.
Edit the PDP Layout
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:
Reorder Elements
To change the order in which product information appears:
- Locate the PDP element list in the sidebar
- Click and hold the handle icon next to an element
- Drag it to its new position
- Release to drop it in place
This allows you to design layouts such as:
- Price at the top for conversion-focused layouts
- Brand name above product title
- Description above the variant selector
- Metafields grouped under Add to Cart
The editor preview updates instantly so you can see your changes immediately.
Some merchants prefer a shorter “buy box” on mobile. Use the mobile preview toggle to optimize the PDP for smaller screens.
Modify Design Settings
Clicking any PDP element opens up its settings, which may include:
- Padding
- Alignment
- Borders
- Color adjustments (if not overridden by global settings)
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.
Add/Remove Page Sections
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:
- Checked - metafield is visible on the PDP
- Unchecked - metafield is hidden from the PDP
This allows you to display only the information that matters most for each store.
Metafields can also be rearranged via drag-and-drop:
- Go to the Metafields block inside the PDP editor
- Use the handle icon next to a metafield to drag it up or down
- Drop it into your preferred order
This is especially useful for merchants with many metafields, allowing them to highlight the most important information first.
If you have not created any product metafields, then this section will appear blank. Please refer to our
Metafields support article to learn more.
Preview Your Changes
Use the controls in the top toolbar to view your PDP as customers would see it:
- Mobile View - preview the mobile layout
- Desktop View - preview the full PDP as shown on desktop
- Preview Mode - open a live preview outside of the editor
This ensures your PDP looks consistent and polished across all devices.
Publish Your Changes
Once your PDP layout is ready:
- Click Publish in the top right corner
- Your changes go live immediately
- Revisit the editor at any time to adjust the layout or metafields
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.
