Custom Magento 2 Theme Development
When developing a custom Magento 2 theme, a typical problem is misunderstanding the inheritance chain and layout XML. Clients bring design mockups in Figma, and we encounter errors like Block not found or incorrect element order. Once, a client lost two days due to an incorrectly specified parent theme in theme.xml — we had to rewrite all overrides. Let's break down how to build a theme that doesn't lag and is easy to maintain, with a focus on modern approaches like Hyva Themes.
Our engineers have 10+ years of experience with Magento and over 120 completed projects. We work with Luma, Blank, and Hyva. This allows us to choose the optimal stack for each project, whether it's a corporate portal or a high-load e-commerce store. Contact us to evaluate your project — we'll prepare a commercial proposal within 1–2 days.
Theme File Organization
A custom theme does not copy the base entirely. It overrides only the necessary files. The inheritance chain:
Magento/blank └── Magento/luma └── MyCompany/mytheme During rendering, Magento looks for templates first in the custom theme, then moves up the chain. This allows pinpoint changes without duplicating all code.
Example minimal structure:
app/design/frontend/MyCompany/mytheme/ ├── etc/ │ └── view.xml ├── registration.php ├── theme.xml └── web/ ├── css/ │ └── source/ │ ├── _theme.less │ └── _extend.less └── js/ └── theme.js theme.xml:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>MyCompany Theme</title> <parent>Magento/luma</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme> registration.php:
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/MyCompany/mytheme', __DIR__ ); How Layout XML Controls the Page?
Layout XML is the foundation of rendering. It determines which blocks and containers are on the page, their order, and templates. Without this file, you cannot change element positions. Detailed syntax is in the Magento documentation.
Types of layout files:
| Handle | Purpose |
|---|---|
default.xml |
Global changes |
catalog_product_view.xml |
Product page |
catalog_category_view.xml |
Category page |
checkout_cart_index.xml |
Cart |
Example — adding a warranty block to the product page:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="product.info.main"> <block class="MyCompany\Catalog\Block\Product\Warranty" name="product.warranty.info" template="MyCompany_Catalog::product/warranty.phtml" after="product.info.price"/> </referenceContainer> </body> </page> Why Hyva Instead of Luma?
Hyva Themes is a modern stack: Tailwind CSS + Alpine.js + server-side rendering. It replaces bulky RequireJS, KnockoutJS, and Less. Developing a Hyva theme is 2–3 times faster than Luma, and the result is Lighthouse 90+ out of the box. Loading time reduction can reach 30%, and average Lighthouse performance is 95. Hyva uses a commercial license, but it pays off through budget savings of up to 40% and reduced ROI time to 6 months.
Comparison of Luma and Hyva:
| Parameter | Luma/Blank | Hyva |
|---|---|---|
| Stack | RequireJS, KnockoutJS, Less | Alpine.js, Tailwind CSS |
| Development speed | 6–8 weeks for 10–20 pages | 3–5 weeks for same complexity |
| Performance | Requires optimization | Lighthouse 90+ out of the box |
| Learning curve | High (layout XML, Knockout) | Low (HTML+CSS+JS) |
| License cost | Free | Commercial (inquiry) |
Scope of Work for Custom Theme
- Theme structure: correct inheritance chain, registration.php, theme.xml.
- Layout XML: create and configure all necessary layout files for the store structure.
- PHTML templates: override module templates (Magento_Catalog, Magento_Checkout, etc.).
- Less/CSS: style customization via _theme.less and _extend.less, CSS generation using
grunt. - JavaScript: RequireJS configuration (or Alpine.js for Hyva), custom JS components.
- Image configuration: view.xml with sizes and cache optimization.
- Responsive layout: testing on mobile, tablet, and desktop.
- Third-party module integration: connect OneStepCheckout, Amasty, Mirasvit, etc.
- Core Web Vitals optimization: LCP, CLS, INP — achieve green scores.
- Documentation: theme structure description, deployment instructions.
- Training: session for client developers (1–2 hours online).
- Support: 2 weeks of post-release support for bug fixes and minor tweaks.
Work Process on a Theme
- Mockup analysis — study design prototypes, identify technical challenges. Often we find mismatches between the layout and Magento's capabilities at this stage.
- Structure planning — determine inheritance chain, layout files, and templates needed.
- Component development — create PHTML, Less, JS, view.xml configs. Each component tested individually.
- Plugin integration — connect OneStepCheckout, Amasty, Mirasvit. Check compatibility with the theme.
- Testing — verify on all page types, measure Core Web Vitals using Lighthouse and PageSpeed Insights.
-
Static content deployment —
bin/magento setup:static-content:deploy. - Release and support — handover theme to client, documentation, training.
Timeline and Cost
Development timeline: from 3 weeks (Hyva) to 8 weeks (Luma). Price calculated individually after mockup analysis. Free estimation — contact us.
Order theme development, and we'll select the optimal stack for your project.