Skip to main content

Documentation Index

Fetch the complete documentation index at: https://spreecommerce.org/docs/llms.txt

Use this file to discover all available pages before exploring further.

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. Themes dashboard in Spree Commerce Open your active theme (i.e., the one marked Live). The Spree Commerce theme editor In the page selector (top left), choose Product Details Page. Customize the product details page in Spree The editor preview and sidebar will update to show all PDP-specific sections and settings. Spree Theme editor PDP preview
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. Drag and drop PDP elements in Spree From here, you can customize the PDP in a number of ways:

​
Reorder Elements

Reordering PDP elements via drag and drop in Spree To change the order in which product information appears:
  1. Locate the PDP element list in the sidebar
  2. Click and hold the handle icon next to an element
  3. Drag it to its new position
  4. 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

Modifying PDP design settings in Spree 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

Adding page sections to the PDP in Spree 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.

​
Manage Product Metafields

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.

​
Show or Hide Metafields

Displaying metafields on PDP in Spree Commerce 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.

​
Reorder Metafields

Reordering metafields on the PDP in Spree Commerce Metafields can also be rearranged via drag-and-drop:
  1. Go to the Metafields block inside the PDP editor
  2. Use the handle icon next to a metafield to drag it up or down
  3. 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

Mobile preview of the PDP in Spree Commerce 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

Publishing chnages to a live storefront in Spree Commerce 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.