How to Create New Theme from Scratch in Magento 2?

Talk to Experts Need expert help? Don’t hesitate to talk.

You can do direct email atinfo@mconnectmedia.com

WE'RE HERE FOR YOU

We would love to hear about your Magento project, challenge, or opportunity. We'll respond within 24 hours!

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.

Need Magento expert help?

We provide result-driven solutions to expand the competency level and productivity.

Instant Help CenterAvailable!

Monday to FridayResponse promised within 24 hours!

Call Us

+1 319 804-8627

Mconnect Part Finder Magento 2
Mconnect Product Part Finder Extension

Load Comments

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

  • Worried for deadlines? Our Magento Experts are effortlessly Working from Home.
  • Check out our Magento Developer Hiring Packages for Agency as well as individuals.
View Packages

Talk to Experts Need expert help? Don’t hesitate to talk.

You can do direct email atinfo@mconnectmedia.com

WE'RE HERE FOR YOU

We would love to hear about your Magento project, challenge, or opportunity. We'll respond within 24 hours!

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


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


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


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


Do you know Magento 1 support will end in June 2020?
Magento 1 to Magento 2 Migration Service Error
So, Don't take the risk

Make a move & Migrate to Magento 2

  • Magento 1 to Magento 2 Migration Service - Zero Downtime

    Zero Downtime

  • Magento 1 to Magento 2 Migration Service - Timely Delivery

    Timely Delivery

  • Magento 1 to Magento 2 Migration Service - Stores Upgraded

    36+ Stores Upgraded

  • Magento 1 to Magento 2 Migration Service - Zero Data Loss

    Zero Data Loss

  • Magento 1 to Magento 2 Migration Service - Magento Developers

    Certified Magento Developers

  • Magento 1 to Magento 2 Migration Service - After Support

    60 Days After Support

How much it Cost?