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">
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">
<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>
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.
A parent theme is defined in the child theme using a theme.xml file as discussed in the previous part of this tutorial series.
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:
You can use this following code in your cw-theme.less file :
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:
These files override the following layouts:
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.
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.
Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at email@example.com
Convert visitors into buyers on your 100% faster Magento store.
Deploy your Magento stores on optimized Magento hosting servers.