Product Details

The Product Details block renders the page that shoppers see when they view a single product: the image gallery, price, options, add-to-cart button, and more. Most shopper sessions go through the product page before a purchase, so it is one of the most important Commerce blocks on your site. Your storefront already includes this block, so you do not need to add it from scratch.

What shoppers see

Product names, prices, images, and descriptions all come from your catalog, so you do not create or edit them here. Code controls the layout and what appears in each region, not the block table in Document Authoring.

A typical product page on a Commerce storefront.

How To

Preview a product

This is the task you’ll use most often. The document at /products/default is a template for every product page on your storefront, so changes you make there apply to all product URLs. Sample pages already include a defaultSku row. Set it to a SKU in your catalog and open the inline live-preview pane to see real product data while you edit.

Confirm the document at /products/default exists

Open /products/default in your content folder in Document Authoring. If the document is missing or empty, you cannot preview the product page.

1. In Document AuthoringThe tooling for creating storefront pages as documents in Google Docs, SharePoint, or DA.live without writing code. Tables in documents define the blocks that appear on each page., open the document at /products/default.

2. Add or update the product-details table with a defaultSku row that points to a SKU in your catalog.

   To find a SKU, go to Catalog → Products in Admin, or ask your integrator.

   product-details
   defaultSku	HOODIE-001

3. Click the split-screen icon on the right sidebar to open the inline live-preview pane.

   The PDP renders using the SKU in the defaultSku row.

Use the inline live-preview pane, not the paper-plane button

The paper-plane (Publish or Preview) button does not work at /products/default. It opens the page without a product SKU, so the block redirects to /notfound. This is expected for a template path. Use the inline live-preview pane instead, which reads the defaultSku row from the block table.

The defaultSku row applies only at /products/default in the inline live-preview pane. On real product URLs, the SKU comes from the URL, so you do not need to keep defaultSku in sync with catalog changes.

How To

View a real product page

To confirm that a real product page renders (not just the preview at /products/default):

1. Find a product’s URL key and SKU in Catalog → Products in Admin, or open a category or search results page on your storefront and click any product.

2. Open the product URL, which follows the pattern /products/<url-key>/<sku> (for example, /products/cool-hoodie/HOODIE-001).

3. Confirm the product page loads with live catalog data.

Note

A real product URL works in a normal browser tab and through the Publish to Preview button, because the SKU comes from the URL. The /products/default document is the exception: it needs the inline live-preview pane instead, as described in Preview a product.

How To

Feature a product on a marketing page

To highlight one product on a custom page (for example, a landing page for a campaign):

1. Create your marketing page in Document Authoring at the path you want, for example, /campaigns/new-arrivals.

2. Add the product-details block to the page. The block renders the product UI (gallery, price, options, and so on). You do not need any rows inside the block table. A header-only table is enough:

   product-details

3. Add a sku row to your metadata table, or create one as shown here:

   metadata
   sku	HOODIE-001

   If your page already has a metadata table, add a new sku row to it. You do not need a second table. For page metadata and its other properties, see Page metadata.

4. Click the paper plane button, then click the Preview button to preview the page

   The block reads the sku from page metadata and renders that product in a new tab.

Caution

Use this pattern sparingly. Every product already has its own page at /products/<url-key>/<sku>. Adding a second hand-built page for the same product means you have to keep both in sync when the catalog changes. Prefer linking from your campaign page to the product’s existing URL whenever you can.

How To

Add companion blocks to a product page

Your storefront comes with several blocks already set up at /products/default. Each block is a separate table in the document, and the page renders them in the order they appear. That means you can add a banner, a carousel, or a Product Recommendations block by inserting a new table at the right spot.

1. In Document Authoring, open the document at /products/default.

2. Click above the product-details table and insert a new table for the carousel. Each row below the header is one slide. Add your campaign image in the left cell and a caption in the right:

   carousel
   image	Slide 1
   image	Slide 2

3. Open the inline live-preview pane to confirm the carousel appears above the product details.

When you save, the carousel table sits above your product-details table. Shoppers see the carousel first, then scroll down to the product details. The same principle applies to any other companion block: add it where you want it to appear, and the page renders it there.