Preview a product

Preview a product’s images, price, options, and purchasing controls while editing the shared product-page document in Document Authoring.

Before you begin

• Your content project must contain the /products/default document and its product-details block.
• Choose an existing product’s stock keeping unit (SKU) from your catalog. Find it under Catalog > Products in Admin, or ask your developer.

Caution

The /products/default document is shared by product pages. Changes to its layout affect all product pages that use this template, not just the product you preview.

Preview the shared template

1. Open /products/default in Document Authoring.

2. Add or update the defaultSku row in the product-details table with the SKU you chose.

   product-details
   defaultSku	HOODIE-001

   Replace HOODIE-001 with your product’s SKU. The first row is the block name; merge its cells in the document.

3. Select the split-screen icon in the right sidebar to open the inline live-preview pane.

4. Confirm that the pane displays the product you chose, including its image, price, and available options.

Note

Use the inline live-preview pane for /products/default. Opening that template path in a normal browser tab does not supply a product SKU. The defaultSku row is for the editor preview; real product pages normally get their SKU from the URL.

Check a real product page

1. Open a category or search-results page on your storefront and select the product you want to check.
2. Confirm that the resulting URL follows /products/<url-key>/<sku>, such as /products/cool-hoodie/HOODIE-001. The URL key and SKU must belong to a real product in your catalog.
3. Confirm that the product page loads the expected catalog data in a normal browser tab.

If the editor preview is empty, check that the defaultSku value exists in the catalog available to your storefront. See Product Details for the block’s role and Add supporting content to product pages for changing the shared layout.