Content and Commerce blocks

Content blocks and Commerce blocks are the two types of blocks you add to a 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 layouts and page sections, such as cards, columns, accordions, carousels, headers, and footers. 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. Plain text, images, and links that you write directly on the page are default content, not blocks.

For the full list and how to author them, see the Block Collection documentation and the content blocks tutorial . For why the set of available blocks and variations is fixed rather than something you design freely, see How a page comes together.

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 transfers control 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 drop-in.

How they work together on a page

A storefront page is a document that mixes both types. Commerce blocks handle the shopping areas, such as the product gallery, the cart, the checkout form, and Product Recommendations. Content blocks handle layouts and marketing content, such as hero images and cards. You can add both to the same page using block tables in Document Authoring.