Create Magento 2 custom Theme step by step process. In Magento 2 has by default Luma and Blank themes – that you can see after installing Magento 2 successfully. Magento 2 default demonstration theme is Luma theme, and Blank is basis for custom theme creation.
We can create custom theme by call parent Luma or Blank theme. In this article I will discus create new theme by Luma parent theme.
Theme Folder and Files structure
To create a theme directory for your Magento 2, you need to go: app/design/frontend directory. Under frontend directory, create a new directory according to your theme vendor name: app/design/frontend/Extendfeature directory, I have choose Extendfeature for my theme vendor name under your theme vendor directory, create a directory for your Magento 2 theme: app/design/frontend/Extendfeature/ultimate I have choose ultimate for my theme name directory.
After creating files and folder structure, we need to declare name/title your Magento 2 theme, So that Magento knows it exists and we can set your theme as the current store theme in your Magento 2 backend.
Declare your Magento 2 theme
Now you need to create the theme.xml file under app/design/frontend/Extendfeature/ultimate/ directory and use the code below:
In <title> tag enter 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 preview image.
Make Your Theme a Composer package
PHP dependency management tool is composer. it allows declare the libraries your project depends on and composer will manage install/update them for you and distribute theme as a package, we need to add a composer.json file to the theme directory.
Register your Magento 2 Custom theme
Add registration.php to register your Magento 2 Custom theme in your theme directory: app/design/frontend/Extendfeature/ultimate/registration.php and add the following content in your registration.php file.
Creating web static files, folders
Here are the structure
Configure storefront images size
Copy the view.xml file from the vendor/magento/theme-frontend-luma/etc directory of an existing theme (for example, from the Luma theme) to your theme app/design/frontend/Extendfeature/ultimate/etc directory. And let update the image configuration for storefront catalog product grid and others template page.
Configure Magento 2 Custom Theme via Admin panel
Run following commands and check your newly created theme is working.
After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your magento store. Login into Magento 2 admin panel, then go to Content > Design > Themes. And make your sure your theme title appears on this list.
Theme Configuration, When you can see your theme in this list, go to Content > Design > Configuration, select your newly created theme from those shown in the image below. After change your theme, click on “Save Config” button.
Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE