From Scratch to Finish: How to Develop a Magento 2 Theme

About The Author

image

Manish Joy

Tech geek. Self Motivated. Love to code, learn new technologies and skills.

If you like what I do please

Support me on Ko-fi

Adobe Certified Professional—Adobe Commerce Developer

Adobe Certified Professional—Adobe Commerce Developer

Creating a custom theme in Magento 2 allows you to tailor the appearance and layout of your eCommerce store to match your brand identity. This guide will walk you through the process of creating a Magento 2 theme from scratch, including directory structure, essential files, and customization tips.

Why Create a Custom Magento 2 Theme?

  1. Brand Identity: Reflect your brand’s unique look and feel.
  2. User Experience: Improve the user interface and navigation.
  3. Flexibility: Customize layouts and styles to meet specific business needs.

Step-by-Step Guide to Creating a Magento 2 Theme:

Step 1: Set Up the Theme Directory

Create the directory structure for your theme under app/design/frontend:

app/design/frontend/Vendor/theme_name

Step 2: Create Theme Configuration Files

  1. theme.xml: Create the theme.xml file in app/design/frontend/Vendor/theme_name:

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

  2. registration.php: Create the registration.php file in app/design/frontend/Vendor/theme_name:

     <?php
 \Magento\Framework\Component\ComponentRegistrar::register(
     \Magento\Framework\Component\ComponentRegistrar::THEME,
     'frontend/Vendor/theme_name',
     __DIR__
 );

  3. composer.json: Create the composer.json file in app/design/frontend/Vendor/theme_name:

     {
     "name": "vendor/theme-name",
     "description": "Your theme description",
     "require": {
         "php": "~7.4.0||~8.0.0",
         "magento/framework": "103.0.*"
     },
     "type": "magento2-theme",
     "version": "1.0.0",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
     ],
     "autoload": {
         "files": [
             "registration.php"
         ]
     }
 }

Step 3: Add Static Files and Assets

Create the directories for static files:

app/design/frontend/Vendor/theme_name/web/css
app/design/frontend/Vendor/theme_name/web/js
app/design/frontend/Vendor/theme_name/web/images

Add Stylesheets

  1. styles.css: Create a custom stylesheet in web/css:

     body {
     background-color: #f8f8f8;
 }

  2. requirejs-config.js: If needed, create the requirejs-config.js file in web:

     var config = {
     map: {
         '*': {
             'yourScript': 'Vendor_theme_name/js/your-script'
         }
     }
 };

Step 4: Define Layouts and Templates

Create the directories for layout and template files:

app/design/frontend/Vendor/theme_name/Magento_Theme/layout
app/design/frontend/Vendor/theme_name/Magento_Theme/templates

Modify Layouts

  1. default.xml: Create or modify the default.xml layout file in layout:

     <?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.container">
             <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Magento_Theme::custom.phtml" />
         </referenceContainer>
     </body>
 </page>

Add Templates

  1. custom.phtml: Create a custom template file in templates:

     <h1><?= __('Welcome to Your Custom Theme!') ?></h1>
 <p><?= __('This is a custom block added to the header.') ?></p>

Step 5: Customize Theme View Files

You can override core view files by copying them from the base theme to your custom theme and modifying them as needed. For example, to customize the footer, copy the footer.phtml file:

app/design/frontend/Vendor/theme_name/Magento_Theme/templates/html/footer.phtml

Make your changes in the copied footer.phtml file to customize the footer layout and content.

Step 6: Activate Your Theme

  1. Enable the theme: Log in to the Magento admin panel and navigate to Content > Design > Configuration.
  2. Edit the configuration for your store view: Set your custom theme as the applied theme.
  3. Flush the cache: Clear the Magento cache to see your changes.

Conclusion: Creating a custom Magento 2 theme allows you to have complete control over the look and feel of your eCommerce store. By following this step-by-step guide, you can set up a new theme, add custom styles and templates, and activate it in your Magento 2 installation. This flexibility enables you to create a unique shopping experience that aligns with your brand and business goals.

Updated:

About Author

Manish Joy

Tech geek. Self Motivated. Love to code, learn new technologies and skills.

You may also like