Skip to content
Adobe Commerce Storefront
Quick start

Section Metadata

Section metadata controls the styling and layout of sections containing your commerce blocks. Add a Section Metadata table to your document to apply visual styling to an entire section.

What is section metadata?

Section metadata is a special table that styles the section wrapping your content. Block configuration controls the behavior of individual blocks, while section metadata controls the visual presentation of the section container.

Section vs. Block

  • Section — The container that wraps one or more blocks on your page
  • Block — The individual commerce functionality (cart, checkout, product details) See Commerce blocks.
  • Section Metadata — Styling applied to the section container
  • Block Configuration — Settings specific to the block’s functionality

Section vs. Page metadata

Both can be used on the same page but serve different purposes.

  • Section metadata — Controls section styling and visual presentation (covered on this page)
  • Page metadata — Controls SEO, caching, social sharing, and page structure. See the Page metadata guide.

How to use section metadata

Create or open your document

Open the document containing your commerce block in the Document Authoring tool or Visual Editor.

Add the Section Metadata table

Below your commerce block, add a new table with exactly two columns.

Set the table header

In the first row, merge both cells and enter: section-metadata

Add style properties

In subsequent rows, add your desired properties:

  • First column: Property name (e.g., Style)
  • Second column: Property value (e.g., highlight)

Save and publish

Save your document. The metadata applies when you publish the page.

Example

Apply a light background to highlight a section:

section-metadata
Stylelight

Available section metadata properties

Style property

Use the Style property to apply a light gray background to your sections:

  • light — Applies light gray background
  • highlight — Applies light gray background

Both values produce the same visual effect and help distinguish sections from the rest of the page.

Custom properties

You can add custom properties if your developer has configured them for your site. Common examples include Theme, Background Color, or Analytics Section.