How to make a magento theme
MaartenWhen it comes to maintaining a uniform design and vibe throughout the store, Magento 2 themes are key. You can increase the visual attractiveness of sections like the Magento 2 admin panel and storefront by combining custom templates, designs, styles, or image creation.
After successfully installing Magento 2, you will notice two Magento themes by default: Luma and Blank. Luma is a demo theme, while Blank is a starting point for bespoke Magento theme development.
Using the Luma theme for your live store in Magento 2 is completely unrestricted. However, Magento strongly advises against changing or editing the default Luma and Blank theme files if you wish to tweak the default design or develop your own theme. What’s to stop you? Because changes or updates to the default files during Magento 2 upgrades may be overridden by the latest version of the default files.
I’ll cover the fundamentals of frontend custom Magento 2 theme development for novices in this Magento 2 theme development series. You can use this to refresh your knowledge of basic topics if you are an advanced Magento developer.
Let’s get this party started.
Before you start working on your own Magento 2 theme, make sure you meet the following requirements:
You’ve worked with Magento before and have some development experience.
You have a basic understanding of Magento 2.
Magento 2 is up and running on your localhost, and you have access to both the frontend and backend.
If you don’t already have Magento 2, Cloudways, a Magento hosting partner, will help you get it up and running quickly. In just a few clicks, you can launch your Magento 2 store and begin building it from the ground up.
Do you need Magento 2 themes created by a pro for your store?
For the job, hire a Magstack Expert.
Magento 2 Theme Development Directory Structure
You must build the directory structure for modifying the Magento theme, styles, and template files after adding the complete theme declaration and registration. You can see how your theme directory should appear in the image below. I’ve created my own vendor and directory.
/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.xmlThe web folder will be created, which will contain our theme’s CSS, JavaScript, fonts, and graphics. These files belong here if Magento 2 doesn’t have a skin folder. With the view.xml file, we’ve created a view.xml file in the etc directory. We set the picture size and other options for the Magento 2 Catalog.
Create a Theme Directory as the first step.
Go to your Magento 2 root directory>/app/design/frontend to create a directory for your Magento 2 theme.
Create a new directory named after your theme vendor: /app/design/frontend/Cloudways under the frontend directory (I choose Magstack as my theme vendor name). Create a directory for your Magento 2 theme in your theme vendor directory: /app/design/frontend/Magstack/m2-theme.
Following the creation of this framework, you must declare your Magento 2 theme so that Magento is aware of its existence. In the Magento 2 backend, you can make your theme the default theme.
Step 2: Choose a Magento 2 theme.
Create the theme.xml file in app/design/frontend/Magstack/m2-theme/theme.xml and paste the following code in it:
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaL
<title>m2-theme</title> \s<parent>
Magento/Luma
</parent> \s<media>
<preview image>
media/m2-theme-image.jpg</preview image> \s</media> \s</theme>
Put the name of your theme in the title> tag. The parent theme can be specified in the parent> tag for fallback purposes. The Luma theme is what I’m using.
In the preview image> tag, I declare a theme image. This is a preview thumbnail image that appears in the Magento 2 admin on our theme page. App/design/frontend/Magstack/m2-theme/media/m2-theme-image.jpg is the thumbnail image.
Make sure you’ve got this thumbnail in the right spot. When you access your theme page through Magento 2 admin, you will receive an error if this file is not in the correct location.
Step 3: Create a Composer Package for your Magento 2 theme.
To register the package on a packaging server, place a composer.json file in your theme directory: app/design/frontend/Magstack/m2-theme/composer.json. Theme dependency information includes a link to this file. https://packagist.org/ is Magento’s default public packaging server. Use the following code to get started:
“require”: “php”: “5.6|7.0|7.1|7.2|7.3|7.4”, “Magstack/m2-theme”: “100.0.*”, “magento/framework”: “100.0.*”, “type”: “magento2-theme”, “version”: “100.0.1”, “licence”: [ “OSL-3.0”, “AFL-3.0” ], “autoload”: “files”: [ “Registration.
Step 4: Register Your Custom Magento 2 Theme Development Using Registration.php
To register your theme with the Magento system, create a registration.php file in your theme directory: app/design/frontend/Magstack/m2-theme/registration.php and include the following code:
<?php \s/* \s Magento is the owner of the copyright. * All rights are reserved. Details about the licencing can be found in COPYING.txt.
*/ \s\Magento\Framework\Component\ComponentMagento theme navigation
Registrar::register(MagentoFrameworkComponentComponentRegistrar::THEME, 'frontend/Magstack/m2-theme', _DIR_ );
Step 5: In Admin, Apply and Configure Magento 2 Custom Theme
Everything is in place for you to activate your theme and apply it to your store after you’ve added it to the file system. Go to Content > Design > Themes in the Magento 2 backend. Ensure that your theme is included in this list.
When your theme appears in this list, go to Stores > Configuration > Design and choose your newly generated theme from the options displayed below.
Theme choosing for Magento
After you’ve chosen your theme, clear the cache by clicking the “Save Config” button.
Configure Image Properties in Your Theme
You’ll need view.xml to configure catalog image sizes and other pictures. If the product image sizes of your custom Magento theme development varies from the parent theme sizes, this file is necessary for the theme. All storefront product image sizes are configured in the view.xml file.
For example, you can choose a size of 350 by 350 pixels for the category grid view product photos. Copy the view.xml file from your parent theme’s etc directory to your theme’s etc directory. The following is an example of the corresponding configuration:
… image id=”category page grid” type=”small image”> width>350/width> height>350/height> /image>… id=”category page grid” type=”small image”>… id=”category page grid” type=”small image”>… id=”category page grid” type=”small
…
Step 7: Create a Logo for Your Magento Custom Theme
Create Magento Theme/layout directories and add the following code to a default.xml file to declare a theme logo. /app/design/frontend/Magstack/m2-theme/Magento Theme/layout/default.xml is the location of the default.xml file.
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page configuration.xsd"> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page configurationarguments> argument name="logo file" xsi:type="string"> block name="logo"> arguments> argument name="logo file" xsi:type="string"> argument name="logo file"images/m2-logo.png
/argument> argumen name="logo img width" xsi:type="number">argumen name="logo img width" xsi:type="number">argumen name="logo img width" xsi
350
/argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument> /argument
</argument> \s</arguments> \s</referenceBlock> \s</body> \s</page>I used the m2-logo.png logo with a 350 by 350 pixel size. You are free to use your own logo file name and size.
Step 8: Theme Inheritance
Theme inheritance allows us to easily extend themes while reducing maintenance time. You can use a current theme as a starting point for bespoke Magento theme creation or simple store design changes such as seasonal decorations. You can include overriding and extending files instead of duplicating massive theme files and adjusting what you need to change.
In Magento 2, the level of theme inheritance is unrestricted. Theme inheritance in Magento is based on the fallback technique, which is the same as in Magento 1. If a view file isn’t discovered in your custom Magento theme, the Magento system will look for it in the default theme’s module files or library.
For static files like CSS, fonts, pictures, and JavaScript, as well as other theme files, the fallback approach is completely different.
As previously explained in this tutorial series, a parent theme is defined in the child theme using a theme.xml file.
Step 9: Styling the Theme
Model view controller architecture is used in Magento 2 applications. The most important item we’ll look at here is styling, which generally entails altering CSS or LESS in this case. Because Magento 2 is built with LESS, we’ll begin by changing the Magento 2 theme with this language.
Before we start customizing the theme, you need be aware of the following three approaches for styling the website:
Compilation on the server
Compilation on the server Client-Side Compilation with Grunt
In this tutorial, I utilized client-side compilation, although the result is the same in all three techniques. Before you begin, uncomment the following line in your.htaccess file:
MAGE MODE developer SetEnv
Then, via the Magento 2 admin panel, we need to change the LESS compilation mode to client-side. Go to Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow type > Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow type.
Type of Magento theme flow
Save the configuration by clicking the Save Config button.
When we reload the web browser in this mode, we don’t need to run Grunt to generate our CSS. It will be handled by the Magento system. Now we can make modifications to our own files and observe the changes in the frontend in the following directory: /app/design/frontend/Magstack/m2-theme/web/css/source/cw-theme.less
In your cw-theme.less file, add the following code:
0px!important; 0px!important; 0px!important; 0px!important; 0px!important; 0px!important; 0px!important; 0px
background-color: #fff;.page-wrapper
colour: blue;.cwcustom-class
You can add your theme-specific styles to this file, save it, and then refresh your browser. You’ll notice that there are no styles when the browser first loads if client-side compilation is enabled. This is due to the fact that Magento is compiling LESS at the time. After a few seconds, the styles will appear, ideally with your unique styles.
Step 10 Theme Layout Override
You must place the layout file with the same name in the following folder to override the theme layout: /app/design/frontend/Magento/luma/Magento Theme/layout/default.xml
The following layouts are overridden by these files: /Magstack/m2-theme/Magento Theme/layout/default.xml
Always use the directory name page layout instead of the layout when overriding page layout files.
The layout overriding method allows for a great deal of customisation. I advise you to avoid making the following changes:
Change neither the block name nor the alias.
The parent handle’s page type should not be changed.
Commonly Asked Questions
What Exactly Is A Magento Theme?
A Magento theme is a collection of files that contribute to the style and feel of an online store, including CSS, HTML, PHP, XML, and pictures. The Magento application comes with two themes: Luma for demo purposes and Blank for custom theme building.
What is the location of Magento’s default themes?
The Magento theme is primarily found in app/design/frontend/__.
Built-in Magento themes can be found in the vendor/magento/theme-frontend directory.
What is the Extension of Magento Template Files by Default?
A: The default setting The PHTML extension is used to save Magento template files, which contain all view-related logic and block classes.
What are my options for changing the Magento theme?
The quickest way to update the Magento theme using the admin panel is as follows.
Go to the Admin Panel and log in.
Select Content > Design > Configuration from the drop-down menu.
To change the theme, click Edit.
Select the desired theme from the Applied Theme dropdown menu.
Save your changes by clicking Save Configuration.