Module: Commerce content modeling
30 of 38 Pages
Design section components
Editors use sections to control the horizontal and vertical layout of a page. Sections organize space into widget zones where editors place widgets. Think of sections as the scaffolding that holds content in place. Well-designed sections provide consistent spacing, margins, and responsive behavior without requiring editors to seek developer help.
From a design perspective, the section used for commerce pages will look very similar to a generic Page Builder section. You can find detailed guidance on section modeling in a dedicated the guide on modeling Page Builder sections material that talks about Single column or Multicolumn sections. We will not discuss the generic sections here.
Additional section types to consider
Depending on your project’s complexity, you may also need:
- Product grid section - Flexible card/tile grid with configurable columns per breakpoint (Dropdown - Desktop: 2–6, Tablet: 2–4, Mobile: 1–2), row and column gaps, card style (Dropdown - Elevated, Flat, Bordered). Use for product grids, pet listings, and testimonial displays.
- Accordion section - Collapsible content panels with properties for allowing multiple panels open, default panel state, icon style (Radio - Plus/minus, Chevron, Arrow), and border style. Use for FAQs, product specifications, and shipping information.
- Tab section - tabbed content organization with tab position (Dropdown - Top, Left, Right), tab style (Radio - Pills, Underline, Boxed), default active tab, and URL anchor support for deep linking. Use for product variations, category filtering, and multi-view content.
- Carousel section - sliding content panels with visible slide count (1–5), autoplay with configurable interval, navigation arrows, pagination dots, and infinite loop option. Use for featured products, testimonials, and image galleries. (Depending on the design approach, you can also store these properties on a dedicated Carousel widget.)