Blog

Custom Branding Guidelines for Magento 2 designer



Magento theme prettifies and provides a visual design for the entire application area of Magento by using a mixture of layouts, custom templates, images or styles. Themes are arranged in accordance to customize and override layer resources. Magento theme is divided into two categories- Blank and Luma, which you can see after the installation of Magento 2. Through this stepwise guide, you can create the base of your Magento 2 theme and customize layout designs of every page.

  • Disable Cache
    Before beginning make sure to disable Magento cache. This avoids the trouble of clearing the cache time and again when you modify your theme. Follow the steps to disable your cache:
    Admin, System, Cache Management, all cache types, and then disable.
  • Developer Mode
    Developer mode reflects all changes that are made in real-time and enables you to rectify the errors which you have made while coding. To enable this mode, through SSH access you need to execute commands from the terminal. First, log in to your SSH account of Magento store and then to the root of the Magento directory and run the command.
  • Create Theme
    The steps mentioned below are needed to be followed to enable theme development:
  • Creation of theme directory
  • Insert a declaration for the theme
  • Also, add a file composing of json
  • Insert registration.php
  • Creating directories for JavaScript, CSS, fonts, and images
  • Setup the theme logo
  • Customize the theme layout
  • In Admin Panel configure the them

Now let us understand each step succinctly to get a clear picture of the whole process

  • Creation of Theme Directory
    To create the theme directory for Magento 2 development, go to: /app/design/frontend and then create a new directory by assigning a vendor name that you want for your theme package.
  • Declaration of the Theme created
    Once the directory structure of your theme has been established, it must be declared with the creation of theme.xml, which will consist of the parent theme name and the file theme name as well.
  • Composer package
    All the themes that are created on Magento 2 are distributed as Composer Packages and are registered on the server as a package. You will have to add a file composer.json to complete the step.
  • Registration.php must be added
    To register a theme on to the system, you must add a file with registration.php in your theme directory.
  • Structure directory for static files
    The theme package consists of various types of files including –fonts, styles, images, and JavaScript. Each one has a unique way to be stored in the sub-directory, which you must subsequently take care of.
  • Images must be Configured
    A view.xlm is a configuration file in which all the product images and several properties are configured. This process is necessary for a theme creation, but if the parent theme exists, you can skip the step. You can create an etc directory and copy the view.xml from that directory.

Bottom Line

In the end, there is one last step that you need to perform so that the theme that you have created shows up on the Magento storefront. You need to deploy one single command for the theme to commence successfully. You need to log in to your Magento Store SSH account and then take the root directory to run the following command:

php bin/magento setup:upgrade

Another command that you need to run so that your theme files are deployed:

php bin/magento setup:static:-content:dep

And, that is all! Your work will be successfully done and you are good to go check all the themes that you have designed on the Magento Store.