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