Content and Commerce blocks

Content blocks and Commerce blocks are the two types of building blocks on every storefront page. Understanding what each one does helps you know which to use and where.

Content blocks

Content blocks are pre-built UI components for static page content — buttons, images, galleries, navigation, and text layouts. They come from Edge Delivery Services and the AEM block collection. You add a content block to a page with the same document table pattern you use for Commerce blocks.

For the full list and how to author them, see the Block Collection documentation and the content blocks tutorial .

Commerce blocks

Commerce blocks are content blocks that load a drop-in. A drop-in is an Adobe-built UI component that handles a specific Commerce job — product details, cart, checkout, account pages, and so on. When the page loads, the Commerce block hands off to the drop-in, which fetches live catalog and commerce data and renders the interactive experience.

Note

You can add commerce features to any content block by including a drop-in. A Commerce block is simply a content block that is wired to a specific drop-in.

How they work together on a page

A storefront page is a document that mixes both types. Commerce blocks handle the transactional areas — the product gallery, the cart, the checkout form. Content blocks handle everything else — hero images, marketing copy, breadcrumbs, and Product Recommendations widgets. You can add both to the same page using block tables in Document Authoring.