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 titled “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 titled “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
Section titled “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
Section titled “How to use section metadata”Create or open your document
Section titled “Create or open your document”Open the document containing your commerce block in the Document Authoring tool or the Universal Editor.
Add the Section Metadata table
Section titled “Add the Section Metadata table”Below your commerce block, add a new table with exactly two columns.
Set the table header
Section titled “Set the table header”In the first row, merge both cells and enter: section-metadata
Add style properties
Section titled “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
Section titled “Save and publish”Save your document. The metadata applies when you publish the page.
Example
Section titled “Example”Apply a light background to highlight a section:
| section-metadata | |
| Style | light |
Available section metadata properties
Section titled “Available section metadata properties”Style property
Section titled “Style property”Use the Style property to apply a light gray background to your sections:
light— Applies light gray backgroundhighlight— Applies light gray background
Both values produce the same visual effect and help distinguish sections from the rest of the page.
Custom properties
Section titled “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.