Magento 2.0 was released in November 2015 and it had various enhancements to overcome the issues that had emerged over a period of time in Magneto 1.x. One of the major enhancements was in themes.

Magento 2 migration involves four components – data, extensions, themes and customization.

In this article, we will describe how to create and implement your own Magento 2 theme. This is based on our experience developing a new project in Magento 2.

What Is a Theme?

A theme is a component of Magento application which provides a consistent look and feel (visual design) for entire application area (for example, storefront or Magento admin) using a combination of custom templates, layouts, styles or images.

Out-of-the-box Magento application provides two design themes: Luma, as a demonstration theme, and Blank as a basis for custom theme creation.

There are no restrictions on using the demonstration Luma theme for a live store, but if you want to customize the default design, you need to create a new theme.

We strongly recommend not to change the default Luma and Blank theme files, because if you do edit the default files, your changes can be overwritten by the new version of the default files during upgrades.

How to Create a Magento 2 Theme?

The following steps describe how to create New Magento 2 theme from the existing Magento Luma theme and its implementation.

  • Create a new Vendor folder inside app/design/frontend/NewVendorName (ex: DCKAP). The folder will be like this – app/design/frontend/DCKAP. 
  • Create theme folder inside your Vendor folder app/design/frontend/DCKAP/theme-new 
  • Next, navigate to vendor\magento\theme-frontend-luma 
  • Copy entire folder and files inside “theme-frontend-luma” into your theme folder (i.e.) app/design/frontend/DCKAP/theme-new/ 
  • Edit app/design/frontend/DCKAP/theme-new/registration.php file and change as following ‘frontend/Magento/luma’ to ‘frontend/DCKAP/new’. 
  • Next Edit app/design/frontend/DCKAP/theme-new/theme.xml file and change the title as per your identification.
  • Once done save and close the file. 
  • Finally, clear var/cache and var/page_cache before logging into Magento 2 Admin. 
  • Content -> design -> Configuration. 
  • Please Edit the store from the list if you want to change the theme.
  • Select your newly created theme “Dckap New”. Save the configuration. 

Theme_Image Magento

  • Refresh the frontend and you will be able to view your design from newly allocated theme. 
  • To make sure please view ‘Page Source’ which will display the CSS and js URL path as per your registration.php configuration file.

Hope the article helped you create a Magento 2 theme. If you have any issues/queries, please let us know through your comments.

References

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

10 Comments on "How to Create a Magento 2 Theme?"


Guest
olidev
1 year 6 months ago

When creating a theme in Magento 2, you also have to declare its logo. The process is really quick. You just have to create default.xml file in layout folder.

Iyappan
Author
1 year 5 months ago

Hi Olidev,
Thanks for your comments.
Yes, we can add logo from layout/default.xml. But in magento admin itself we have an option for adding a theme logo.
For adding logo from admin, navigate to
Admin Menu->Content->Design->Configuration->Select theme->Header->logo image.
Hope this is helpful.
If you have any comments/queries, please feel free to write to us.
Please subscribe to our blogs.
https://www.dckap.com/blog/creating-magento-2-theme/#mailmunch-optin-form
Thanks.

Guest
Bill
1 year 11 months ago

Hi, I have followed this article, and I love it, thank you! it’s exactly what I wanted to do. make a new theme based on Luma.

However, there’s a huge problem… I’ve re-installed and done this over and over and the following problem is the result of doing this, any idea how to fix?

http://magento.stackexchange.com/questions/148043/customer-account-navigation-block-fails-error-trying-to-register-new-customer

If I revert to luma or blank, the problem goes away… if I use the custom theme based on Luma, this error (in the link) is what happens!

admin
Admin
1 year 11 months ago

Hi Bill,

Thanks for following our blog and your comments.
I have passed this on to the author of the blog.
Will get back to you on this asap.

admin
Admin
1 year 11 months ago

Hi Bill,

We did a fresh Install of Magento 2.1.2 and we created a new theme based on Luma, we are able to successfully register.
Please let us know what version of Magento you are using, so that we can see if we can reproduce the error.
Thanks.

Guest
Bill
1 year 11 months ago

ver 2.1.2 – I did it three times (fresh start) all three times it’s that way.

admin
Admin
1 year 11 months ago

Hi Bill,

Just saw your below mail and replied to the same.

Hi! thanks for the reply, so very interesting… I have been copying the luma files from a github download. and it hasnt been working, I just downloaded from magentocommerce.com and it seems to work now…. testing further, but it looks like it works.

DCKAP Reply

Hi Bill,

Good to know that it is working for you now.
Please let us know if you face any issues. We will be glad to help.
Keep reading our blogs and send your comments.

Guest
Bill
1 year 11 months ago

Thanks for the update, so the problem is now fixed, The interesting thing is, if the Luma files were copied from the Github, this error happens every time, the customer block does not work.

If the Luma files are copied from the zip download from magentocommerce website… it works fine. (I was getting from github the whole time, not thinking it could have a problem such as this)

admin
Admin
1 year 11 months ago

Hi Bill,

Thanks. Good to know that the problem is fixed.
We have also noted down your comments and will add this to our future blog updates.
Keep reading our blogs and posting your comments.

Guest
Rosa F.
2 years 6 months ago

Thanks a lot for this post! It has been of great help.