This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

A Guide To Magento 2 Theme Development (Part 1)

Updated on  23rd July

5 Min Read
Reading Time: 5 minutes

The theme is a component of Magento 2 which gives a consistent look and feel to your whole store. It provides an improved look to areas like Magento 2 Admin and Storefront by utilizing a combination of custom templates, designs, styles or images development.

By default, there are 2 Magento themes – Luma and Blank – that you can see after installing Magento 2 successfully. Luma is a demonstration theme, and Blank is a basis for custom theme creation.

In Magento 2, there are no restrictions on using the Luma theme for your live store. However, if you want to customize the default design or if you need to create your own theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files. Many people ask why Magento does not allow to change or edit Luma and Blank theme files? The answer is: when you change or edit the default files, your changes can be overwritten by the latest version of the default files during your Magento 2 upgrades.

This Magento 2 theme development series is for beginners, and I am going to cover the basic of frontend Magento 2 custom theme development. If you are an advanced Magento developer, this may not be of much help to you.

  1. Requirements for Magento 2 Theme Development
  2. Create Theme Directory
  3. Declare your Magento 2 theme
  4. Directory Structure in Magento 2 Theme Development
  5. Apply and Configure theme in Magento 2 Admin

Let’s start.

Cloudways Magento Hosting For Developers

Requirements for Theme Development

Before developing your own theme for Magento 2, make sure these requirements are fulfilled:

  • You have a little bit of Magento coding experience
  • You have some knowledge of Magento 2
  • Magento 2 is installed on your local host and running smoothly, and you have access to the frontend & backend.
    • If you don’t yet have Magento 2 running, then you can easily have it thanks to Cloudways Managed Magento Hosting. Launch your Magento 2 store in a matter of a few clicks and start creating your store from scratch.

Create Theme Directory

To create a directory for your Magento 2 theme, you need to go: <your Magento 2 root directory>/app/design/frontend. Under frontend directory, create a new directory according to your theme vendor name: /app/design/frontend/Cloudways (I choose Cloudways for my theme vendor name) under your theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/Cloudways/m2-theme.

After creating this structure, you need to declare your Magento 2 theme so that Magento system knows it exists and you can set your theme as a current theme in your Magento 2 backend.

Declare your Magento 2 theme

Now you need to create the theme.xml file under app/design/frontend/Cloudways/m2-theme/theme.xml and use the code below:

In <title> tag insert the name of your theme, and in the <parent> tag you can specify parent theme for fallback purposes. I am using the Luma theme.

In the <preview_image> tag I declare a theme image. This is a thumbnail image which shows in the Magento 2 admin on our theme page so we can see a preview of what our theme looks like. Thumbnail image is located in app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg. Make sure you have this thumbnail in the correct location. If you don’t have this file in the correct location, you will get an error when you visit your theme page in Magento 2 admin.

Make Your Magento 2 Theme a Composer package

Add a composer.json file in your theme directory: app/design/frontend/Cloudways/m2-theme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information. Magento default public packaging server is https://packagist.org/. Use this following code:

Add registration.php to register your Magento 2 Custom theme

To register your theme in the Magento system, you need to create registration.php file in your theme directory: app/design/frontend/Cloudways/m2-theme/registration.php and use the following code in your registration.php:

Directory Structure in Magento 2 Theme Development

After complete theme declaration and registration, you need to create the directory structure for your theme layout, styles and template files. Below, you can see how your theme directory should look like. I am using my own Vendor and directory name.

/app/design/frontend/Cloudways/m2-theme/theme.xml

/app/design/frontend/Cloudways/m2-theme/registration.php

/app/design/frontend/Cloudways/m2-theme/composer.json

/app/design/frontend/Cloudways/m2-theme/media

/app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg

/app/design/frontend/Cloudways/m2-theme/web

/app/design/frontend/Cloudways/m2-theme/web/css

/app/design/frontend/Cloudways/m2-theme/web/css/source

/app/design/frontend/Cloudways/m2-theme/web/css/fonts

/app/design/frontend/Cloudways/m2-theme/web/css/images

/app/design/frontend/Cloudways/m2-theme/web/css/js

/app/design/frontend/Cloudways/m2-theme/etc

/app/design/frontend/Cloudways/m2-theme/etc/view.xml

/app/design/frontend/Cloudways/m2-theme/Magento_Theme

/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout

/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout/default.xml

The web folder will be created where our theme’s CSS, js, fonts and images is located. If Magento 2 doesn’t have a skin folder, these files go in here.

We have created view.xml file under the etc directory, with the view.xml file. We configure the Magento 2 Catalog images size and other things.

Apply and Configure Magento 2 Custom Theme in Admin

After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your store. Go to Magento 2 backend, then go to Content > Design > Themes. And make your sure your theme appears on this list.

Magento Theme Setting

When you can see your theme in this list, go to Stores > Configuration > Design, select your newly created theme from those shown in the image below.

Magento Design Configuration

  • After you select your theme, click on the “Save Config” button.
  • Clear the cache.

Note: This is the first of this Magento 2 theme development series. I hope now you have a working Magento 2 custom theme which you’ve configured and created by yourself. In this first part of this series, I have covered the basics of Magento 2 theme development. In the next part Finalize Magento 2 Custom Theme Development, I am going to include the following:

  • Configuring images
  • Declaring logo
  • Configuring image properties
  • Styling and Editing & Overriding templates
  • Locate layouts, templates, and styles

Keep looking out for this space for my upcoming posts in the series of Magento 2 theme development. If you have any issues in this tutorial, then please feel free to let me know via the comments section below.

Share your opinion in the comment section. COMMENT NOW

Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.