Using Content and Commerce blocks
Content and Commerce blocks are foundational, pre-built UI components that serve as the building blocks of your storefront. They are defined using tables in the content and decorated by your custom code during page rendering. Drop-ins are dynamic, commerce-specific front-end components that can be integrated within a Block.
These blocks provide a modular approach to building storefronts, allowing you to quickly assemble pages using proven components while maintaining the flexibility to customize their appearance and behavior. As key components of the Commerce Storefront ecosystem, they work seamlessly with Edge Delivery Services for optimal performance and can be easily managed through the Document Authoring tool.
What are Content and Commerce blocks?
Blocks are a foundational concept for adding form and function to page sections within the Commerce Storefront.
Content Blocks
Content Blocks are pre-built content components used to build the static storefront content. These components help you create engaging, structured content for your pages without requiring custom development for common UI patterns. Content blocks include:
- Buttons and call-to-action elements
- Images and media galleries
- Lists and navigation elements
- Links and social media components
- Text formatting and layout components
- And many more foundational content elements
Commerce Blocks
Commerce Blocks are pre-built commerce components used to build the storefront’s dynamic commerce-related pages. These components handle the interactive, transaction-focused elements of your storefront that connect directly with your commerce backend. Commerce blocks include:
- Product details pages (PDP)
- Shopping cart functionality
- Checkout processes
- Product listing pages (PLP)
- Search and filtering components
- User account management
- And other commerce-specific features
Drop-ins Integration
Drop-ins are dynamic, commerce-specific front-end components that can be integrated within a Block. They provide the interactive functionality that powers your commerce experience, working seamlessly with both Content and Commerce blocks to deliver a cohesive storefront experience.
How to use Content and Commerce blocks
Content and Commerce blocks are designed to be intuitive and developer-friendly. You can implement them using simple table structures in your content, which are then enhanced with interactive functionality through drop-ins and custom styling.
The blocks integrate naturally with the broader Commerce Storefront ecosystem:
- Document Authoring (DA.live): Create and manage block content through the CMS interface
- Visual Editor: Edit blocks in real-time with immediate live preview
- Edge Delivery Services: Ensure fast, reliable delivery of block content globally
- Product Visuals: Access and manage media assets used within blocks
Information about the blocks and how to implement them is well-documented in the following resources and within the Block Collection documentation. Links to both are provided below.