How to Create New Theme from Scratch in Magento 2?

Please fill this form, We'll reply within 24 Hrs.


Please leave this field empty.

Create Magento 2 Theme from Scratch

What is Magento 2 Theme?

Magento developers know that a theme is a combination of:

  • Layout – It is a bunch of basic XML files that define the structure of block for different pages. It also controls the META info and page encoding. It located in app/design/frontend/your_interface/your_theme/layout/
  • Templates – They are PHTML files with XHTML markups and essential PHP tags to develop logic for visual presentation
  • Locale – It is simple document folder with copies of content translations
  • Skins – It is combo of block-specific JavaScript and CSS file as well as image files to complement XHTML

Advantages of Magento 2 Theme

The theme is providing certain benefits for Magento 2 like CMS such as:

  • It offers support for HTML and CSS.
  • It has built-in LESS processor.
  • It provides an asynchronous module to upload using Require JS without manual coding.
  • It uses jQuery UI.
  • It consumes Magento UI library for a flexible rendering of UI.

Essential Steps to Create Magento 2 Theme from the Scratch

We are going to create a sample theme from scratch in Magento 2. The steps for creation of new theme from scratch in Magento 2 would be:

  • Creation of Magento 2 theme folder
  • Declaration of theme
  • Developing composer package to distribute it
  • Register the theme
  • Creating statistic files and folders
  • Configuring catalog product images
  • Declaring theme logo
  • Defining basic layout elements
  • Broadcasting layout file types and conventions

Files and Folder Structure

We need to create functional folder and files by following given steps below:

  1. Create a folder consist of theme <vendor_theme> – create a folder with name “Mconnect” as vendor_theme
  2. Develop a sample folder with files and functional folders <theme> – Develop a new folder inside the ‘Mconnect’ folder and name it ‘Sample’
  3. Define file theme <theme.xml>
  4. Create registration file theme <registration.php>
  5. Develop composer for theme <composer.json>
  6. Define <media> folder
  7. Create <web> folder
  8. Develop a folder to connect layout theme <Magento_Theme>

The resulting structure of all given folders and files in the theme would be:

  • Mconnect Folder
  • Sample folder
  • Magento_Theme folder
    • Layout folder
    • + File default.xml
  • Media folder
    • Image preview.jpg
  • Web folder
    • css folder
    • js folder
    • images folder
    • + Image logo.png
  •  File composer.json
  • File registration.php
  • File theme.xml

Configuration of Magento 2 Theme

You must activate it in settings after theme creation in the file system. You should follow the given steps for theme settings:

  1. You have to navigate to Administration Menu > Content > Themes
  2. Check that your theme should appear in the Design panel
  3. Navigate to Administration Menu > Store > Configuration > Design
  4. Choose own configuration mode like “store default view” and go to Content tab design and select the theme. Save configuration.
  5. You have to clear cache by pressing Ctrl + F5 to reload static files and check the changes on the theme

Checking Magento 2 Theme

Navigate to Homepage or category page (Products list) and Product Detail page to test the theme display. You also can test the theme with actions like – Add to cart and Check out.

Conclusion:

We have discussed the main components of the Magento 2 theme in this post. We also have talked about the structure of files and folders in Magento 2 directory for theme creation.

It is advisable to use the Magento developers or team of experienced and expert Magento developers to create outstanding and complex Magento 2 theme for you.

M-Connect Media is enjoying the presence of talented Magento 2 theme developers with prior experiences in many theme development projects. You can employ the team for the best results with quick turnarounds.

Contact us for more information regarding Magento Theme Development and Integration Services by our offshore development center.

Mconnect Part Finder Magento 2
Mconnect Product Part Finder Extension

Leave a Reply

Your email address will not be published. Required fields are marked *

Please fill this form, We'll reply within 24 Hrs.


Please leave this field empty.

Please fill this form, Mr.Yogesh will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Darshit will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Jayesh will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Jiten will reply by email asap.


Free eGuide

Ultimate Guide on Magento 2 Shipping Methods

Shipping Methods also play a very vital role in an eCommerce store, to make it a success.
DOWNLOAD NOW