Skip to main content
Blog General

How to Create a Magento 2 Theme?

Iyappan Perumal
May 3, 2016 |

Want to develop a custom theme for your Magento store? Get it done from out Magento development team. Talk to us!

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 vendormagentotheme-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

Iyappan Perumal

As the Head of Product for DCKAP Integrator, an ERP Integration Platform for distributors - Iyappan leads the product vision, strategy, and execution for delivering scalable, secure, and user-friendly integration solutions for small to mid-size distributors. With over a decade of experience in building eCommerce stores prior to kick-starting his product journey, he knows the ins & outs of scaling & managing the storefronts. Out of curiosity, he started figuring out solutions to streamline the front-end and back-end operations that help distributors run an effective & profitable distribution business. And ended up launching Cloras (now DCKAP Integrator) in 2017. Today, hundreds of distributors across different verticals use DCKAP Integrator to connect & automate their backend operations. He loves documenting his observations and learnings, while staying up-to-date with the goings on of the industry.

More posts by Iyappan Perumal