Create your first commerce page
Create a complete commerce page in minutes by building a category page. This hands-on tutorial introduces you to the three essential building blocks—page metadata, commerce blocks, and section styling—by using them to build a real page.
Tutorial: Create a category page
Section titled “Tutorial: Create a category page”Create a new document
Section titled “Create a new document”In the Document Authoring tool, create a new document named dresses.
Add page metadata
Section titled “Add page metadata”Page metadata controls page-level settings like the browser tab title, SEO rules, and caching behavior. You configure it using a special table at the top of your document. (See all page metadata options for advanced configuration.)
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. |
| Cache Control | max-age=3600 |
These settings give the page a clear title and description for search results, and let it stay cached since a category listing doesn’t change on every request.
Add the Product List Page block
Section titled “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 |
This tells the block which category from your catalog to show on this page. Replace /women/dresses with a real category path from your own catalog — the block still renders with the placeholder path, but shows zero results if it doesn’t match a category you actually have.
Add section metadata
Section titled “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 and publish
Section titled “Preview and publish”Preview your page to verify everything looks correct, then publish it to make it live.
Complete page structure
Section titled “Complete page structure”Your document contains three tables in this order:
- metadata table (Title, Description, Cache Control)
- product-list-page block table (urlPath)
- section-metadata table (Style: light)
Troubleshooting
Section titled “Troubleshooting”Block not appearing? Verify the block name is product-list-page (kebab-case).
Page loads but shows zero results? Check that urlPath matches a real category path in your catalog — the block renders normally either way, but has nothing to display if the path doesn’t match.
Changes not visible? Wait a moment for cache to clear, then hard refresh the page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows).