dev-resources.site

for different kinds of informations.

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

Published at

12/18/2024

Categories

4 categories in total

Author

15 person written this

maheshprajapati

open

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

Inside the MyTheme folder, create these subdirectories:

etc
web
templates
layouts

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

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>

4. Register Your Theme

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

app/design/frontend/MyCompany/MyTheme/registration.php

Example content:

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

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/MyCompany/MyTheme',
    __DIR__
);

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

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>

7. Configure Your Theme in Admin Panel