Step-By-Step Procedure To Develop Magento 2 Theme From Scratch

Key Takeaways

• What is Magento 2 theme development? Building the storefront look (layout, templates, locale files, and static assets like CSS, JavaScript, and images) that shoppers see when they visit your store.
• Where to start: Magento 2 ships with two themes, Luma (demo/reference) and Blank (starter). Most 2026 builds use Hyva (Tailwind CSS and Alpine.js) for faster performance instead.
• The 9-step process: create the theme directory → declare the theme (theme.xml) → add composer.json → register the theme (registration.php) → configure product image sizes (view.xml) → create static file directories → declare the logo → define layout blocks and containers → override layout files as needed.
• Golden rule: never modify Luma or Blank directly. Create a child theme that inherits from them, so upgrades don’t overwrite your work.
• Why build a custom theme? stronger security, faster load times, on-brand storefront, responsive across devices, and full compatibility with modern Magento 2.4.9 (PHP 8.4/8.5, GraphQL and REST APIs, headless deployment).

Themes are the face of your Magento store. They are the face of your site. Right storefronts that instantly connect customers to the store contribute to the conversion rates of the website.

Magento 2 by default offers 2 built-in themes when it comes to themes: Luma and Blank. Luma is the demonstration theme while Blank allows custom theme development. eCommerce businesses can use both of these settings for their store. In 2026, many merchants also use Hyva (a Tailwind CSS and Alpine.js theme built specifically for Magento 2) instead of Luma, because it delivers sub-1.2-second load times compared to 4+ seconds on Luma.

If you want to create a custom theme, with regard to your expectation, you can customize the designs. However, Magento always recommends avoiding alteration of the default setting as it may break the eCommerce website during version upgrades.

This tutorial walks through building a Luma-based custom theme step by step. If you are building a new store in 2026 and want faster performance out of the box, consider Hyva instead — the file structure is similar but the underlying stack is different.

What Is Magento 2 Theme Development?

Magento Theme is the look and feel of the website or eCommerce store. From the storefront to the admin panel it includes everything on display. The 4 major components that make up a theme are,

• Layout
• Templates
• Locale
• Skins
• Static files (CSS, JavaScript, images, and fonts) — this replaces the “Skins” concept from Magento 1

How Do You Develop a Magento 2 Theme from Scratch?

If you want to create a Magento 2 theme from scratch, below is the step-by-step process.

1. Create Theme Directory

In the Magento 2 root directory /app/design/frontend build a Magento 2 theme directory.

This directory will have the theme vendor.

Then generate a directory for the theme below your theme vendor.

2. Declare Theme

Generate a theme.xml file.

Or you can copy it from default themes — custom Magento theme development directory. Declare your theme app/design/frontend/mconnect/m2theme.

3. Theme into Composer Package

Pack default themes as a Composer.

Include composer.json file in your theme directory. By this, you distribute the theme as one composer package.

4. Register Your Magento 2 Theme

Include the registration.php file in your theme directory and register your theme in the system.

5. Construct Product Catalog Images

To configure other images and product catalogs, create an etc folder.

Copy the view.xml file to the parent or Blank Theme’s etc folder.

6. Create Directories (for Static Files & Folders)

Create directories for styles, JavaScript, fonts, and images. Each one must be stored in individual subdirectories of your theme.

7. Declare Theme Logo

Declare your theme’s logo. If the logo doesn’t follow the default naming convention, declare it by adding the default.xml file in your theme directory folder.

8. Layout Elements

Magento page design includes blocks and containers. So define these components for the right page structure.

9. Layout File Types & Conventions

Override theme layouts by adding the layout file in /app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml.

It will override mconnect/m2theme/Magento_Theme/layout/default.xml.

What Are the Advantages of Magento 2 Custom Theme Development?

• Improved security.
• Enhanced user experience
• Offers HTML and CSS support
• High Responsiveness of theme regardless of device, screen size, or operative platform.
• Built-in LESS processor (Luma). Hyva uses Tailwind CSS instead.
• Asynchronous module loading via RequireJS on Luma. Hyva replaces this with Alpine.js for a much lighter JavaScript bundle.
• Uses jQuery UI on Luma. Hyva does not require jQuery.
• Consumes Magento UI library for flexible rendering.
• Full compatibility with Magento 2.4.9 (May 2026), including PHP 8.4/8.5, GraphQL and REST APIs, and headless deployment options.

Final Thoughts on Magento 2 Theme Development

So, we have covered everything from what is Magento theme development, the process of developing a theme in Magento 2 and also looked over the benefits of Magento custom theme development.

It is always recommended to hire expert Magento developers for some outstanding themes and complex theme development.

CommerceShop has provided Magento development services since 2009 and has successfully handled numerous theme development projects. For exceptional insights and results, you can always reach our experts.

For scoping on a Luma customization, a Hyva migration, or a headless theme build, see our custom Magento development services. For a full platform overview, read our complete guide to Magento, or talk to our team for a scoped conversation on your build.

Frequently Asked Questions

What is a Magento 2 theme?

A Magento 2 theme is the collection of layout XML files, PHTML templates, locale strings, and static assets (CSS, JavaScript, images, and fonts) that controls how your storefront looks and behaves for shoppers. It sits in app/design/frontend/{Vendor}/{theme}/ in your Magento installation.

What is the difference between Luma and Hyva themes?

Luma is Magento 2’s default theme, built on jQuery, RequireJS, and LESS. Hyva is a third-party theme built on Tailwind CSS and Alpine.js that replaces most of Luma’s frontend stack. Hyva stores typically load in under 1.2 seconds versus 4+ seconds on Luma, which is why most new Magento 2 builds in 2026 use Hyva.

How long does it take to develop a custom Magento 2 theme?

A simple custom theme built by an experienced Magento developer takes 2 to 4 weeks. A complex theme with custom checkout, layout logic, or headless integration can take 8 to 16 weeks. Migration from Luma to Hyva usually takes 4 to 8 weeks depending on how many customizations need to be ported.

How much does Magento 2 theme development cost?

Custom Magento 2 theme development typically costs $5,000 to $30,000, depending on complexity, integrations, and whether you are building from Blank or customizing Luma or Hyva. Simple visual tweaks to an existing theme start around $2,000. Headless storefronts sit at the higher end, usually $30,000 to $100,000+.

Can I use a Magento 1 theme in Magento 2?

No. Magento 1 and Magento 2 have entirely different architectures. Magento 1 themes cannot be directly ported. The visual design can be recreated in Magento 2, but the underlying template files, layout structure, and static assets must be rebuilt from scratch.

Should I hire a Magento theme developer or build the theme myself?

Build it yourself if you have Magento-specific PHP experience, know layout XML, and are comfortable with dependency injection. Otherwise, hire a certified Magento developer. A general web developer typically needs several months to become productive with Magento’s specific patterns, which usually costs more than hiring an expert from day one. Talk to our Magento team for a scoping conversation.