Wednesday, July 15, 2020
Home > Beginners of Magento 2 > Create Custom Theme in Magento 2

Create Custom Theme in Magento 2

Magento Theme

We are introducing with you to create custom theme in Magento 2.

For the sake of compatibility, upgradability, and easy maintenance, do not modify the out of the box Magento themes. To customize the design of your Magento store, create a new custom theme.

Let’s show you to create a new custom theme based on the new Magento “Blank” theme.

The high-level steps required to add a new theme in the Magento system are the following:

  • Create a directory for the theme under app/design/frontend/vendor_name/theme_name
  • Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.
  • Add a composer.json file.
  • Add registration.php.
  • Create directories for CSS, JavaScript, images, and fonts.
  • Configure your theme in the Admin panel.

Create a theme directory:

To create the directory for your theme:

  • Go to Vendor/theme/app/design/frontend.
  • Create a new directory named according to your vendor name: /app/design/frontend/.
  • Under the vendor directory, create a directory named according to your theme.
    ├── Vendor/
    │ │ ├──…theme/
    │ │ ├── …
    │ │ │ ├── …

Vendor is theme vendor. e.g: Ketan
theme is theme name. e.g: default

├── default/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json

After creating a directory for your custom theme, you must create theme.xml.
Optionally, you can specify the parent theme name (if you want theme inherits from one).

So your app/design/frontend/Ketan/default/theme.xml file should look something like this:

If you do not have a preview image for your theme, remove the media node:

If you want to change the theme information in theme.xml and if already theme registered in your store then you need to reload the Magento Admin page.

Composer package:

Magento default themes are distributed as Composer packages. Composer is a tool for dependency management. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

The composer.json file provides theme dependency information. Refer to a current theme.xml file for the correct dependencies and their versions. If your parent theme is something other than Magento/blank, you may need additional modules in the “require” section.

Example of a theme composer.json file:

Add registration.php file:

To register your theme in the system, add a registration.php file in your theme directory with the following content:

Where Ketan is your vendor name and default is the theme code.

In Magento 2, theme development, when you update any files in app/design/frontend/Ketan/default/web folder, you have to static folders which located at pub/static and var/view_preprocessed Otherwise, you still there is no change in frontend.

Configure catalog product images:

Product image sizes and other properties used on the storefront are configured in a view.xml configuration file. It is required for a theme, but is optional if exists in the parent theme.

Go to app/design/area/Ketan/default/ and create a folder etc and file view.xml You can copy the view.xml file in parent theme such as Blank theme app/design/frontend/Magento/blank/etc/view.xml

Ok, let update the image configuration for catalog product grid page.

In view.xml, image properties are configured in the scope of element:

Declaring Theme Logo:

In Magento 2 default, it uses theme_dir/web/images/logo.svg, in your theme, you can change to different file format such as png, jpg but you have to declare it.

Logo size should be sized 300x300px and you open file theme_dir/Magento_Theme/layout/default.xml

Declaring the logo size is optional.

Creating static content:

In a design, there are many static files such as javascript, css, images and fonts. They are stored in separate folders in web of theme package.

Here are the structure

├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

Basic layout elements:

The basic components of Magento page design are blocks and containers.

A container maintain to assigning content structure to a page. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer.

Layout files configurations:
Page configuration layout files: theme_dir/Namespace_Module/layout
Page layout files: theme_dir/Namespace_Module/page_layout

Click here to know about Magento

Hope you enjoying this theme customization 🙂

Spread the love

Leave a Reply

Your email address will not be published.