Adobe Commerce Architect Master study materials
Adobe Commerce Architect Master study resources

Adobe Commerce Architect Master: Frontend and Storefront Architecture

Adobe Commerce Architect Master · Work through your exam, one topic at a time.

All guide sections

Frontend and Storefront Architecture

Frontend questions test the theme and layout system versus headless storefronts. Know the layout XML system: default.xml, page-specific layout handles, containers and blocks, and the merge order across modules and themes. Know UI components for admin and storefront grids and forms, and the Knockout-based rendering in admin. For the Luma theme, understand requirejs-config.js, LESS compilation, and static content deployment per locale.

Traps: assuming layout XML changes take effect without cache flush, confusing block cache with FPC, and forgetting that a theme's web/css/source/_extend.less is the supported customization point rather than editing vendor LESS. Also know that PWA Studio and headless storefronts bypass much of the layout system and consume GraphQL instead; questions may ask which layer to customize when the storefront is headless.

Worked example

Requirement: "Add a promotional banner to the category page only." Create a layout file catalog_category_view.xml in your theme, add a block inside the category.products container or a new container, and reference a template. Do not edit default.xml, which would apply site-wide. Flush the layout cache and static content. If the storefront is headless, this layout work does not apply; instead add the banner via a CMS block exposed through GraphQL or a custom resolver.

Rule of thumb: scope layout changes to the narrowest handle, and confirm whether the storefront is themed Luma or headless before choosing a customization layer.