DEV Community

Cover image for Here's an easy way to create a Magento 2 eCommerce custom theme
Mahesh Prajapati
Mahesh Prajapati

Posted on

Here's an easy way to create a Magento 2 eCommerce custom theme

#magneto #themes #frontend #coding

1. Understand Magento's Theme Structure

Magento themes are located in the directory:
app/design/frontend/<Vendor>/<ThemeName>

  • <Vendor>: Your company or brand name (e.g., MyCompany).
  • <ThemeName>: The name of your theme (e.g., MyTheme).

2. Create the Directory Structure

Navigate to the app/design/frontend/ directory.

Create your custom folders:

app/design/frontend/MyCompany/MyTheme
Enter fullscreen mode Exit fullscreen mode

Inside the MyTheme folder, create these subdirectories:

etc
web
templates
layouts
Enter fullscreen mode Exit fullscreen mode
  • etc: Configuration files.
  • web: Static assets (CSS, JavaScript, images).
  • templates: HTML and PHTML files.
  • layouts: XML layout files.

3. Create the theme.xml File

This file declares your theme. Place it inside the etc folder:

app/design/frontend/MyCompany/MyTheme/etc/theme.xml
Enter fullscreen mode Exit fullscreen mode

Example content:

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>MyCompany MyTheme</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>
Enter fullscreen mode Exit fullscreen mode

4. Register Your Theme

Create a registration.php file in the root of your theme directory:

app/design/frontend/MyCompany/MyTheme/registration.php
Enter fullscreen mode Exit fullscreen mode

Example content:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/MyCompany/MyTheme',
    __DIR__
);
Enter fullscreen mode Exit fullscreen mode

5. Add Static Assets

  • CSS: Create a custom stylesheet in web/css/styles.css.
  • JavaScript: Place your JS files in web/js/.
  • Images: Add images to web/images/.

6. Configure Layouts

Define layout changes using XML files in the layout folder.
Example: default.xml

app/design/frontend/MyCompany/MyTheme/layout/default.xml
Enter fullscreen mode Exit fullscreen mode

Example content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header">
            <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Magento_Theme::html/header.phtml"/>
        </referenceContainer>
    </body>
</page>
Enter fullscreen mode Exit fullscreen mode

7. Configure Your Theme in Admin Panel

  • Go to the Magento Admin Panel.
  • Navigate to Content > Design > Themes.
  • Your theme should appear here. Assign it as the default theme.

8. Test Your Theme

  • Clear caches: php bin/magento cache:clean.
  • Test your changes by visiting your store.

9. Customize as Needed

  • Modify PHTML templates for frontend changes.
  • Add widgets and blocks for dynamic content.

This step-by-step process should help you get started with a Magento custom theme. Let me know if you need detailed guidance on specific steps!

Top comments (0)

Read next

tatyanabayramova profile image

Today is the International Day of Persons with Disabilities

Tatyana Bayramova -

shieldstring profile image

Overcoming Monorepo Challenges to Enhance Performance and Productivity

Agbo, Daniel Onuoha -

prachi_sahu profile image

TanStack Table Explained: Everything You Need to Know

Prachi Sahu -

mohamedlaminef profile image

Vite 6: A Family Milestone and a Leap Toward Innovation ❤️

Mohamed Lamine -