How to Create New Magento 2 Themes

Tue-Jan-2023
2

Creating a new Magento 2 theme can be a complex process, but here is a step-by-step tutorial to help you get started:

  1. Choose a base theme: Magento 2 comes with two base themes: Luma and Blank. Luma is a pre-built theme that can be customized to fit your needs, while Blank is an empty shell that requires a complete build from scratch. Choose the theme that best fits your requirements.
  2. Create a new theme folder: Create a new folder in your Magento 2 installation’s app/design/frontend directory. Name the folder after your new theme.
  3. Create theme.xml file: In your new theme folder, create a new file called theme.xml. This file will define your theme’s basic settings and properties. Here is a sample theme.xml file:
xml
<?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 Name</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.png</preview_image>
</media>
</theme>

In the above example, replace “Your Theme Name” with your own theme’s name, and “media/preview.png” with the path to your theme’s preview image.

  1. Create registration.php file: In your new theme folder, create a new file called registration.php. This file will register your theme with Magento 2. Here is a sample registration.php file:
php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/YourCompanyName/YourThemeName',
__DIR__
);

In the above example, replace “YourCompanyName” with your own company name, and “YourThemeName” with your own theme’s name.

  1. Copy over base files: Copy over the necessary files from your base theme (Luma or Blank) into your new theme folder. This will include files like default.xml, styles-m.css, and styles-l.css.
  2. Customize your theme: Customize your theme by modifying the copied files in your new theme folder. You can modify CSS, HTML, and JavaScript files to change the look and functionality of your theme.
  3. Create custom templates: If you need to create custom templates for your theme, create a new folder called Magento_Theme in your theme folder, and create a new templates folder within that. You can then create custom templates and modify the existing ones as needed.
  4. Activate your theme: Once you have completed customizing your theme, activate it by going to your Magento 2 backend, navigating to Content > Design > Configuration, selecting your store view, and choosing your new theme from the dropdown list.

With these steps, you should now have a new Magento 2 theme that you can customize to fit your needs.