Our Blog Posts

Step by Step Guide on Magento 2 Theme Development & Customization

Step by step guide on Magento 2 theme development & customization

What is a Magento theme?

A theme is a component of Magento application which provides a consistent look and feel (visual design) for entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles or images.

Themes are designed to override or customize view layer resources, provided initially by modules or libraries.

In this guide we will help you to create a simple Magento 2 theme which can be useful as a base to create your own custom Magento 2 visual experience and easily customize design layout of all pages.

What_is_a_Magento_theme

Follow below step by step guide for Magento 2 theme development & customization

Disable Cache

Before you start, Please make sure that your Magento cache is disabled so that you don’t need to clear the cache every time you make changes in the theme. This will save you a lot of time in development process

To disable cache, go to Admin → System → Cache Management → select all cache types and disable them

Developer Mode

Ensure that your Magento store is in developer mode so that all changes are reflected in real time and you can view any errors you come across while doing coding.

Ti enable the developer mode, you would need to run commands from terminal using SSH access. Login to your Magento store SSH account and go to Magento root directory and run below command:

Create theme

Here are the list of steps you need to follow for theme development:

    1. Create a directory for the theme

    2. Add a declaration for theme

    3. Add a composer.json file

    4. Add registration.php

    5. Create directories for CSS, JavaScript, images, and fonts

    6. Setup theme logo

    7. Customize theme layout

    8. Configure your theme in the Admin panel

    Let’s understand each step in detail

    Create a directory containing theme

    Go to: /app/design/frontend And create a new directory with the vendor name you want for theme package,

    For example i have used name Mageice here : /app/design/frontend/MageIce

    Now in your vendor directory, create your theme directory, for example – Icecube: /app/design/frontend/MageIce/Icecube/

    Declare your theme

    Once you have created directory structure of your theme, now we have to declare that theme by creating theme.xml file which contains theme name and the parent theme name if it’s inherited from another and if you like you can also specify theme preview image

    Composer package

    Magento 2 themes are distributed as Composer packages so it will be registered as a Package on server. Add a file composer.json which is optional

    Adding registration.php

    Now to register your theme in the system, add a file registration.php in your theme directory with the below content:

    Creating directory structure for Static files

    Theme package consists of many types of files: styles, fonts, JavaScript and images. Each one have to be stored in its own sub-directory of web in theme directory:

    Configure images

    Product image sizes and other properties used on theme are configured in a view.xml which is a configuration file. It is required for a theme, but is optional if exists in the parent theme. Create the etc directory as above and copy view.xml from the etc directory of an existing theme.

    Declaring Theme Logo

    In the Magento application, the default format and name of a logo image is logo.svg. You can use a logo file with a different name and format, but you might need to declare it. You have to create a file default.xml in your theme’s layout directory and below code if you theme_logo.png is in size of 300×300:

    Customize Theme Layout

    Once your basic theme structure is created, now you can customize or override any layout and setup new design layout for your new theme.The layouts for different application components can be distinguished by below:

    • Base layouts: Layout files of modules
      • Page configuration and generic layout files: Magento_Catalog/view/frontend/layout

      • Page layout files: Magento_Catalog/view/frontend/page_layout

    • Theme layouts: Layout files of themes.
      • Page configuration and generic layout files: app/design/frontend/mageice/icecube/Magento_Catalog/layout

      • Page layout files: app/design/frontend/mageice/icecube/Magento_Catalog/page_layout

    Create a theme extending file

    Instead of using complete page layout file of Magento and modifying its code, you can just create a file which extends layout with changes you want. So if you want to customize layout of Magento_Catalog/view/frontend/layout/catalog_product_view.xml, you can add a layout file with same name in your custom theme: app/design/frontend/mageice/icecube/Magento_Catalog/layout/catalog_product_view.xml

    Configure the theme in Magento admin panel

    Next step is to apply the custom theme you created from Magento Admin so it’s available on your front site. To apply theme go to Admin->Content->Design->Configuration



    Configure_the_theme_in_Magento_admin_panel

    Click Edit on your store view and a page with design configuration will open and on Default Theme tab, in the Applied Theme drop-down, select your newly created theme and Click Save Configuration.

    Final Deployment

    Last but not the least, we have to run one command to deploy the files we have created for theme so that it’s visible on Magento store front.

    Login to your Magento store SSH account and go to Magento root directory and run below command:

    And after that you have to run another command to deploy the theme files.

    That’s all, If you have any further questions about magento 2 theme development or if need any help from our expert magento 2 developers, contact us now for free consultation

    Share

Want To Double
Your Website Sales?
DMCA.com Protection Status