Magento 2 Frontend Development

Before writing code

Fetch live docs:

1. Web-search site:developer.adobe.com commerce frontend-core for frontend development guide
2. Fetch https://developer.adobe.com/commerce/frontend-core/guide/css/preprocess for CSS/LESS docs
3. Web-search site:developer.adobe.com commerce frontend-core guide layouts for layout XML reference
4. Web-search site:developer.adobe.com commerce frontend-core guide templates for template guide

Layout XML

How Layouts Work

Layout files map to route handles and define the page structure:

• Containers — structural wrappers (header, content, footer)
• Blocks — content-rendering units tied to PHP classes and templates
• Handle naming: <route>_<controller>_<action>.xml (e.g., catalog_product_view.xml)
• default.xml — applies to all pages