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

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!

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay