Finalize Custom Theme in Magento 2

by Fayyaz Khattak  April 18, 2016

In the first part of this theme development series, I overviewed the basics of Magento 2 theme development. In this final part, I talk in detail about how to configure image properties and finalize your Magento 2 theme.

Magento 2 Theme Customization

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

Declare Logo for Your Magento Theme

For declaring a theme logo, we need to declare 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

I used logo filename m2-logo.png and logo size 350 x 350 pixel. You can use your own logo file name and logo size.

Inheritance of Theme

Theme inheritance enables us to extend themes easily and minimize the maintenance efforts. You can utilize a current theme as a basis for customizations, or minor store design upgrades, like holiday decorations. Instead of duplicating broad 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 quite 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 utilizing 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:

  1. Server Side Compilation
  2. Server Side Compilation Using Grunt
  3. 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:

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.

Magento Theme Configuration

 

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 :

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 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 great flexibility in customization. I recommend you to not make these changes:

  1. Do not change block name or alias.
  2. 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. Your comments and suggestions would be highly appreciated by me.

Now that you’ve become accustomed to tweaking your theme as per your liking, comes the question of how your customized Magento store will perform. Only a highly optimized managed Magento hosting platform can improve your site loading time by as much as 100%. Launch your free trial on Cloudways today.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Fayyaz Khattak

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 m.fayyaz@cloudways.com

Stay Connected:

You Might Also Like...

  • Azi Baloch

    Would love to see a video of this series. Thanks man