Getting started

Create your first commerce page

Build a test category page with page metadata, a Commerce block, and section styling, then share a preview with your team. Make the edits in Experience Workspace’s Content view. Publishing is optional for this exercise.

Before you begin

Your team must already have a storefront connected to a Commerce catalog, with Experience Workspace enabled. Ask them for:

The DA.live link to your storefront’s content and access to edit and preview.
A folder where you can create a test page.
The exact urlPath value from a working category page in the storefront, with products from the connected Commerce catalog.
A teammate who can review your preview and confirm whether the page should be published.

How-to: Create a category page

Create a new document

Open the DA.live content link from your team and sign in if prompted.
In the content browser, open the folder your team provided for the test page.
Check that the folder does not already contain a document named dresses. If it does, choose another unused name for your test page.
Use the plus icon at the end of the breadcrumbs to create a document with your chosen name.
Open the new document in Experience Workspace and select Content at the top of the editor.

Use Content view for the table edits below. The Experience Workspace editing guide explains the editor’s formatting controls.

For each example below, select and copy the entire table, including its name row, and paste it into an empty paragraph in Content view. Use normal paste rather than paste as plain text to preserve the table structure. Each table has two columns and a single cell spanning both columns in its first row. Keep an empty paragraph between tables so that they remain separate.

Add page metadata

Page metadata supplies information such as the browser tab title and the page description used by search engines. For this exercise, use a table at the top of your document. See all page metadata options for other settings.

Create a metadata table at the top of your document:

metadata
Title	Dresses
Description	Shop women’s dresses in the latest styles, from casual to formal.

Replace Dresses and the description with text that matches your category. These values describe the page, while the urlPath value in the next table selects its products.

Add the Product List Page block

Commerce blocks are pre-built components that add shopping functionality to your pages (like product listings, carts, and checkout). You add them using tables where the table name identifies the block and the rows configure its behavior. (See all commerce blocks for the complete list.)

Create a table with the Product List Page block and the category it should display:

product-list-page
urlPath	women/dresses

Replace women/dresses with the exact urlPath value your team provided. The block passes this value directly to the catalog’s categoryPath filter, so do not add a leading slash or a storefront domain. The test document’s name and folder determine its page URL. They do not select the category. A path that does not match your catalog can return no products.

Add section metadata

Section metadata controls the visual styling of page sections (like background colors and layouts). You add a section metadata table after the content you want to style. (See all section metadata styles for layout options.)

Below the Product List Page block, add a section metadata table:

section-metadata
Style	light

This applies a light background to the category listing section.

Preview your page

Select the Send icon in Experience Workspace’s menu bar.
Select Preview from the dropdown.
Select Update to open the preview in a new browser tab.

Check your preview, then copy the preview URL and send it to your teammate for review.

Complete page structure

Your document contains three tables in this order:

metadata table (Title, Description)
product-list-page block table (urlPath)
section-metadata table (Style: light)

Check your preview

Your first page is ready for review when:

The preview opens and the browser tab shows the title you entered.
The expected products appear from the category your team provided.
The content and layout look correct, and the preview URL is ready to share.

Publish only when approved

You can finish this exercise with a preview. Publishing makes the page public and requires publishing permissions. Follow your team’s approval process before continuing.

Select the Send icon in Experience Workspace’s menu bar.
Select Preview & Publish from the dropdown.
Select Update to open the published page in a new browser tab.

If you don’t have publishing access, send the approved preview URL to the person your team has authorized to publish. For more about the controls, see Publishing content .

Troubleshooting

Problem	What to do
Can’t open the site or document	Ask the teammate who provided your DA.live link to confirm the location and your editing access.
Can’t find Content view	Open the document in Experience Workspace and select Content at the top of the editor. If your project uses a different editor, check the visual editing overview with your team.
Block not appearing	Check that the block name is `product-list-page` (kebab-case).
Page shows no products	Check that `urlPath` exactly matches the value from the working category page, without an added leading slash or storefront domain. Ask the teammate who supplied it to confirm that the category contains products visible in this storefront.
Page shows the wrong products	Check that `urlPath` has a value and matches the category your team provided. If it is empty, the block runs a search rather than selecting a category.
Changes not visible	Repeat Preview your page, then reload the preview tab. If needed, hard refresh with Cmd+Shift+R on Mac or Ctrl+Shift+R on Windows.
Can’t publish	Ask your team’s authorized publisher to publish the approved preview. Publishing is not required to complete this exercise.