Your first page
Create a complete commerce page in minutes by building a shopping cart 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 cart page
Create a new document
In the Document Authoring tool, create a new document named cart.
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 | Shopping Cart |
| Robots | noindex, nofollow |
| Cache Control | no-store |
These settings prevent search engines from indexing the cart and ensure the page is never cached (since cart contents change frequently).
Add the Commerce Cart block
Commerce blocks are pre-built components that add shopping functionality to your pages (like carts, product lists, 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 Commerce Cart block and essential configuration:
| commerce-cart | |
| Max Items | 10 |
| Enable Estimate Shipping | true |
| Checkout Url | /checkout |
This configuration limits the cart display to 10 items, enables shipping estimation, and provides a checkout link.
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 Commerce Cart block, add a section metadata table:
| section-metadata | |
| Style | light |
This applies a light background to distinguish the cart section from other page content.
Preview and publish
Preview your page to verify everything looks correct, then publish it to make it live.
Complete page structure
Your document contains three tables in this order:
- metadata table (Title, Robots, Cache Control)
- commerce-cart block table (Max Items, Enable Estimate Shipping, Checkout Url)
- section-metadata table (Style: light)
Troubleshooting
Block not appearing? Verify the block name is commerce-cart (kebab-case) and configuration keys match exactly.
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).