In the first part of this theme development series, I overviewed the basics of Magento 2 Theme Development. In this final part, I will discuss how to configure image properties and finalise your Magento 2 theme.
Configure Image Properties in Your Theme
For configuration of catalog image sizes and other images, you need view.xml. This file is required for the theme if the product image sizes of your custom theme are different from the parent theme sizes. The view.xml file configures all storefront product image sizes. For example, you make the category grid view product images by specifying the size of 350 x 350 pixels. Copy the view.xml file from the etc directory of your parent theme to your theme’s etc directory and here is how the corresponding configuration would look like:
... Â Â Â <image id="category_page_grid" type="small_image"> Â Â Â Â Â Â Â <width>350</width> Â Â Â Â Â Â Â <height>350</height> Â Â Â </image> ...
Declare Logo for Your Magento Theme
For declaring a theme logo, we need to declare the logo in our theme. We will create Magento_Theme/layout directories and add the following code to a default.xml file. The default.xml file path is /app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout/default.xml.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/m2-logo.png</argument> <argument name="logo_img_width" xsi:type="number">350</argument> <argument name="logo_img_height" xsi:type="number">350</argument> </arguments> </referenceBlock> </body> </page>
I used logo filename m2-logo.png and logo size 350 x 350 pixels. You can use your own logo file name and logo size.
Inheritance of Theme
Theme inheritance enables us to extend themes easily and minimise the maintenance efforts. You can utilise a current theme as a basis for customisations, or minor store design upgrades, like holiday decorations. Instead of duplicating large theme files and modifying what you need to change, you can include overriding and extending files.
Theme inheritance level is not limited in Magento 2. In Magento, Theme inheritance is based on fallback mechanism, same as in Magento 1 which guarantees that if a view file is not found in your custom theme, the Magento system searches in the default themes module files or library.
The fallback mechanism is entirely different for static files like CSS, Fonts, Images and JavaScript and other theme files.
A parent theme is defined in the child theme using a theme.xml file as discussed in the previous part of this tutorial series.
Theme Styling
Model view controller architecture pattern is used in Magento 2 application. So the main thing we’re going to look at is styling, mostly editing the CSS or LESS in this instance. As you’re most likely mindful at this point, Magento 2 is manufactured utilising LESS, so this is what we are going to use and start editing the Magento 2 theme.
There are three different methods to style the website that you should know before we begin styling the theme:
- Server Side Compilation
- Server Side Compilation Using Grunt
- Client Side Compilation
I used the client side compilation in this article, but the outcome is the same in all three methods. Before the start, uncomment a line in your .htaccess file which is shown below:
SetEnv MAGE_MODE developer
After this, we need to change the LESS compilation mode to client-side from Magento 2 admin. Under Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow type.
Click on Save Config button.
In this mode, we don’t need Grunt running to compile our CSS when we refresh the web browser. The Magento system will take care of it. Now we are ready to make changes to our LESS files and see the frontend change. In the following directory:
/app/design/frontend/Cloudways/m2-theme/web/css/source/cw-theme.less
You can use this following code in your cw-theme.less file :
body {
 margin: 0px!important;
 padding: 0px!important;
}
.page-wrapper {
 background-color: #fff;
}
.cwcustom-class {
 color: blue;
}
In this file, you can add your theme specific styles, save the file and then reload your browser. With client-side compilation on, you’ll notice that when the browser first loads there are no styles. This is because Magento is compiling the LESS. Give it a few seconds, and you’ll see the styles kick in, hopefully with your custom styles.
Override Theme Layout
For overriding theme layout, you need to put layout file with the same name in the following location:
/app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml
These files override the following layouts:
/Cloudways/m2-theme/Magento_Theme/layout/default.xml
Note: For overriding page layout files, always use your directory name page_layout instead of layout.
The layout overriding mechanism provides excellent flexibility in customisation. I recommend you not to make these changes:
- Do not change block name or alias.
- Do not change the page type parent handle.
Conclusion
With this part, this short Magento 2 custom theme series is done. In this series, I focused on the most important things required in a basic custom theme. I hope with this tutorial series you learned and understood how you should start building your Magento 2 theme. I would highly appreciate your comments and suggestions.
Now that you’ve become accustomed to tweaking your theme as per your liking, comes the question of how your customised Magento store will perform. Only a highly optimised managed Magento hosting platform can improve your site loading time by as much as 100%. Launch your free trial on Cloudways today.
Abdur Rahman
Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]
