Skip to content
Commerce Blocks

Block table structure

A block tableA table in a document that begins with a block name row, followed by configuration rows. Edge Delivery uses the name row to map the table to a storefront block implementation. in your document is how you add any Commerce block or Content block to a page. You create it in Document Authoring as a simple table: the block name goes in the first row, and settings go in the rows below it.

This example uses the commerce-cart block and includes all three row types.

commerce-cart
Enable Item Quantity Updatetrue
Hide Headingfalse
Checkout URL/checkout
Optional: in some blocks, a merged full-width row is where the visible page content goes when it does not fit in a small value cell. Not every block uses this row.

Read the table from top to bottom:

  • The first row (full width, shaded) is the block nameThe first row in a block table. It usually contains a single `kebab-case` block identifier (for example, `commerce-cart` or `targeted-block`) that tells the system which block to render. row. It contains a single kebab-case name such as commerce-cart. The storefront uses this name to find and load the right block.
  • Rows with two cells are key-valueA two-column table row in a block table. The first cell is a setting name (a key) and the second cell is the value, such as `true`, `10`, or a text label. settings: a setting name in the left column and its value in the right. Most settings are optional and fall back to safe defaults. Each block’s reference page lists the available keys and which are required.
  • A row with one cell spanning the full width is a merged full-width rowA table row where one cell spans the full table width, so you can add rich page content in one large cell. Some blocks (like `targeted-block`) use this for inline content or layout when a separate fragment document is not used.. Some blocks use it to hold page content that doesn’t fit in a setting value. The italic row in the example shows this option.

How To

To add any Commerce block to a page, create a block table in Document Authoring (the web-based editor where you create and update storefront pages).

  1. Add a new table to the page.

  2. Set the first row to the block name in kebab-case, for example, commerce-cart.

  3. Add the key-value rows that the block’s reference page requires or recommends.

  4. Preview the page. The block should appear in the section where you placed the table.

  5. Publish when the page looks right.

For an end-to-end example that covers metadata, a cart block, and section styling, work through Your first page.