How to Build a New Theme from Scratch in Magento 2

Nowadays, society is more competitive and convenience-focused. No one likes to roam the streets to purchase products!!

Even though, their preference lies in shopping from their homes conveniently.  Hence, it accelerates the usage of eCommerce platforms for both buyers and businesses.

Saying that- eCommerce has turned out to be the only business model for almost all vendors. Also, it is because of the reason that they earned high revenue, growth, and ROI with the same.

Considering it to the core; we all know that starting an online business requires a platform that does not hurt the business profits. To date, technology has given us many platforms- all differentiate with their features and functionalities.  

But, the question here is – which platform is appropriate for your business?

After thorough research, the one platform which is flexible enough to fit into your business needs is none other than Magento  2. Since its new version some time back, it came as a helping hand for many online businesses. Indeed,  Magento 2 accumulates a user-friendly approach, framework improvements, streamlined approach to common admin tasks, Magento marketplace, so on. 

Any eCommerce website requires a compelling and mesmerizing theme to delight the customers or visitors.  The theme, generally, is the non-neglected element of the online store.  So, holding that, it is prevalent that you should make a theme that can give you an immeasurable amount of visitors to your website that is likely to convert into customers. 

Hence, if you are using Magento 2 and want to create a theme from a scratch then this article is for you!! Stay with us and keep on reading!! 

What is a Magento 2 Theme?

Basically, the theme is a segment of the Magento application that offers a harmonious visual look (feel and design) for the complete Magento Application area (Magento Admin or storefront).Indeed, UI considers layouts, custom templates, images, and styles, etc. The themes customizes or overrides the view layer of the libraries or modules initially. 

The Magento 2 theme combines:

• Template: It includes PHTML file and XHTML markups. It is an essential part of the PHP tags to create logic for visual presentation.
• Layout: Layout holds an integration of the general XML files that describes the block structure for many pages.  Certainly, it controls the page encoding and META info. It is present on the: app/design/frontend/your_interface/your_theme/layout/
• Skins: It is an integration of the block-oriented JavaScript, image files, and CSS files to complement XHTML.
• Locale: It is the general folder of documents with several copies of translated content. 

Benefits of Magento 2 Theme

The Magento 2 theme offers many advantages, some of the prevalent are:

• Support for CSS.r and HTML. 
• Built-in LESS processor.
• An asynchronous module for upload without manual coding but using Require JS. 
• jQuery UI.
• Magento UI library for a resilient rendering of UI.

Build your online store with custom Magento theme.Hire us Now!!

Create a New Magento 2 Theme from Scratch: Steps To Follow

In this section, the critical steps are defined that you have to follow in the process of creating the Magento 2 theme.  Generally, it encompasses the Magento theme declaration, registration, implementing it in the admin panel, building directories for CSS, JavaScript, images and fonts, theme logo definition, etc. At the end of this article, you can build a new theme without any issues that could further be used as the template for other themes. 

Step 1: Magento Theme Directory

The location of the Magento 2 themes is in the /app/design/frontend folder. At the initial stage, it is essential to build a Vendor folder and then add the theme folder into it.

For example: /app/design/frontend/Magentofx/abc.

Here, Magentofx is the vendor and abc is the theme folder. The developers must keep in mind that the name of the folder should begin with capital letters.

Step 2: Declaration of Magento Theme 

For defining the Magento theme, you must create a theme.xml file in the theme root folder with the below credentials:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

   <title>Air</title>

   <parent>Magento/luma</parent>

   <media>

  <preview_image>media/air.jpg</preview_image>

   </media>

</theme>

The subject name is described in the title tag. However, the parent theme is described in the parent tag.  Every template file and the unfound static file are obtained from the parent theme.  Regardless, as in the screenshot above, the “luma” theme is connected with the Magento 2. Although, the blank/Magento theme is taken as the parent theme for luma. 

It is the basic theme, hence, there is no existence of parent theme.  With the comparison of Magento 1,  there are no restrictions on the inheritance and quantity levels. With this in mind, the thumbnail is described to show a theme in the Admin part and in the preview_image tag.

Step 3: Registration of Magento Theme 

In detail, for registering the theme in the system, from the theme folder, you can generate a registration.php file with below details:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

‘frontend/<Vendor>/<theme>’,

__DIR__

);

In this scenario, there will be:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

‘frontend/Belvg/air’,

__DIR__

);

Step 4: Including Composer.json file

It is not certain, but, you can make a composer.json file for spreading the theme as the composer package.

Like, here, you can consider composer.json file from “luma” theme:

{

“name”: “magento/theme-frontend-luma”,

“description”: “N/A”,

“require”: {

“php”: “~5.6.5|7.0.2|7.0.4|~7.0.6”,

“magento/theme-frontend-blank”: “100.1.*”,

“magento/framework”: “100.1.*”

},

“type”: “magento2-theme”,

“version”: “100.1.6”,

“license”: [

“OSL-3.0”,

“AFL-3.0”

],

“autoload”: {

“files”: [

“registration.php”

]

}

}

Step 5: Using Theme in the Admin Panel

Likewise, move to the section Content-> Design-> Themes and assure that the established theme is on the list:

Also, if there is an appropriate theme on the list, then, to choose that, you can move to Content->Design->Configuration. After that, choose the Edit for the web store or website that you can like to apply to the theme. Choose the theme and Save Settings.

Step 6: Making Directories for JavaScript, CSS, fonts, and Images

Make the folder for the theme static file. The structure has to be:

Particularly, when everything relevant to images, fonts, JS folder, and CSS is clear, then, there is even now a query of source folder and its usage.

Magento 2 has LESS and the CSS preprocessor that solves the complex CSS files management. Particularly, for describing the store styles, the LESS and CSS stylesheets can be used.

And, if the theme is from the Magento conventional Luma and Blank theme, then you can cancel the default LESS files.

Like, you can make a  _theme. less file with necessary variables revoke in Magento User Interface.  Henceforth, you can get the default values for those variables that could be reversed in the/lib/web/css/source/lib/variables/ folder in source files. Overall, the module styles can be used in the widgets and module.less file and it can be used in the  _widgets.less file. 

With this in mind, for less improvements, you can create _extend. less file easily. Here, we are going to change the _theme.less file. Check out the below structure:

Step 7: Definition of Theme logo 

The logo.svg in the Magento 2 is located in <theme_dir>/web/images by default. By default, the logo format is SVG. For using your own logo, you should abide by the below points:

If the logo is .svg, then, you must rename it as logo.svg and place it in <theme_dir> /web/images.

If the logo has a different format, then, it must get declared. And, for declaring the logo declaration, you must add a file. <theme>/Magento_Theme/layout/default.xml.

Here, the parent theme layout is extended. In addition, the data on the logo must be included in the layout. Like, the logo.png logo having size 70×40 must be listed as:

<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>

<body>

<referenceBlock name=”logo”>

<arguments>

<argument name=”logo_file” xsi:type=”string”>images/logo.png</argument>

<argument name=”logo_img_width” xsi:type=”number”>70</argument>

<argument name=”logo_img_height” xsi:type=”number”>40</argument>

</arguments>

</referenceBlock>

</body>

</page>

Step 8: Image Configuration

Definitely, it is only valuable in the Magento 2 platform. Uniquely, the configuration of the product images, like, the background color, cutting, proportions, and size is defined in the <theme>/etc/view.xml file. Usually, the file is needed, and if it fails to get inherited from the Magento 2 default blank and luma themes, then it is essential to copy it from the default theme.

Considering, on the main page, the products are shown using the widget. Now, change the image size from 240×300 to 200х200.

<?xml version=”1.0″?>

<view xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/view.xsd”>

<media>

<images module=”Magento_Catalog”>

…

<image id=”new_products_content_widget_grid” type=”small_image”>

<width>200</width>

<height>200</height>

</image>

…

</media>

…

</view>

new_products_content_widget_grid is different in the Magento 2 theme. Indeed, type small_image corresponds to the Small Image Role in the admin part. Usually, the authorized values are image, swatch_image, small_image, thumbnail, and swatch_thumb.

Usually, every image got cached when the item got saved. This is because, after size modification, the command php bin/Magento catalog:images: resize gets executed for the regeneration of images. Therefore, we got the same “Luma” different image size and logo.

Step 9: Considering LESS for Editing Styles

Certainly, before editing the styles and after creating the theme, you must know what LESS compilation mode gets used. Magento has two available modes:

• server-side compilation mode;
• client-side (confirmed for theme development).

Even, the client compilation could be used in the development mode because every performed change can be checked in the minute. Also,  the browser got compiled each time while picking the style file. The var/view_preprocessed and contents pub/static folder should be removed manually while server compilation. Moreover, the optimization of all these operations can be done using Grunt.   Continually, it traces every single change in the file, eliminates specific folders, and collects LESS automatically.

Simply, you can change the compilation type in the Admin Panel by navigating to Stores->Configuration -> Advanced -> Developer -> Front End Development Workflow -> Workflow type:

Caution!

Identically, in the developer and default mode, there are Client-side LESS compilation settings:

bin/Magento deploy:mode:set default

bin/Magento deploy:mode:set developer

In the firt place, there is only server-side LESS compilation in the production mode:

bin/Magento deploy:mode:set production

Considerably, use the server compilation which is recognized as default here. In the file _theme.less, the background color and fonts will get adjusted.

@panel__background-color: darken(@page__background-color, 20%)

@text__color: #fff

@font-family__base: ‘Arial’, sans-serif

Even, the server-side compilation mode is applied here, then, after modifications, the directories contents /pub/static/frontend/Belvg/air/en_US и var/view_preprocessed will be removed.

Let’s have a look at the changes:

As a matter of fact,  it could be noticed that the Magento 2 template structure is quite different, from the previous Magento 1 version. Even, the structure has improved a lot, the theme files become structured and logical that makes the searching more convenient.

Step 10: Translations Summary

For CSV files storage in the Magento 1.9.x, the formulation of local folder is in the theme folder. Then, the language folder is built, then ru_RU, and within it, there is a creation of file translate.csv. Also, this all has changed in the Magento 2. In the theme root, the i18n folder is created. And, in this folder, a file with translation is created, e.x. da_DK.csv. Like; /app/design/frontend/Belvg/air/i18n/da_DK.csv

In addition, for creating the translation file in the folder, you should use the i18n tool. Again,the execution of the commands is in the Magento 2 home directory.

php bin/Magento i18n:collect-phrases –output=”app/design/frontend/Belvg/air/i18n/da_DK.csv” app/design/frontend/Belvg/air

Even, every line is integrated into the directory, then, the directory files are made:

app/design/frontend/Belvg/air/i18n/da_DK .csv. The translation file has a similar format as in Magento 1.

Now, create the localization file with the default theme “luma” and execute a command: php bin/Magento i18n:collect-phrases –output=”app/design/frontend/Belvg/air/i18n/da_DK.csv” app/design/frontend/Magento/luma

 

Check out the result below:

Step 11: Overriding and Extending Layout

In the same token, the layout in some themes can be overridden or extended in the Magento 2. Let’s improve the layout:

Particularly, for not copying the common layouts or page layouts from the default theme, you must describe the extending layout. For customizing the layout described in:

<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml you have to integrate a layout file with a similar name in the custom theme, same as below:

<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

Markedly, for including an extending layout file page place the file in the below location:

<theme_dir>

|__/<Namespace>_<Module>

|__/layout

|–<layout1>.xml

|–<layout2>.xml

Let’s override a layout:

Generally, the layouts could be overridden by making a folder override/base in the theme module folder:

<theme_dir>

|__/<Namespace_Module>

|__/layout

|__/override

|__/base

|–<layout1>.xml

|–<layout2>.xml

Also, these files nullify the below layouts:

<module_dir>/view/frontend/layout/<layout1>.xml

<module_dir>/view/frontend/layout/<layout2>.xml

Likewise, the parent theme layouts could be alter as well by making a folder override/base in the theme module folder:

<theme_dir>

|__/<Namespace_Module>

|__/layout

|__/override

|__/theme

|__/<Parent_Vendor>

|__/<parent_theme>

|–<layout1>.xml

|–<layout2>.xml

Certainly, all these files controls the below layouts:

<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml

<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml

Step 12: Modules Templates

Now, there is a storage of templates in the below locations:

Module templates: <module_dir>/view/frontend/templates/<path_to_templates>

Theme templates: <theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>

Moreover, the templates adjacent to layout can only get an override.

Hence, in case, if you require to nullify a template for a search page that is based in the directory. 

\app\code\Magento\CatalogSearch\view\frontend\templates\result.phtml, the path to templates will be as below:\app\design\frontend\Belvg\air\Magento_CatalogSearch\templates\result.phtml

Step 13: Theme Extraction

If the theme holds the Composer package, then, it could be eliminated with the command:

Magento theme:uninstall [–backup-code] [-c|–clear-static-content] {theme path} … {theme path}

Here, the {theme path} is the relativistic path to the theme, beginning with the area name.

–The backup code supports the Magento 2 codebase as defined in the paragraphs that support.

–clear-static-content cleans generated static view files, that are required to provide static view files to show accurately.

Exclusively, if the theme is not the Composer package then you must implement the below steps to kill the theme:

• Kill a theme app/design/frontend/(Vendor) folder;
• contents var/view_preprocessed;
• Contents of pub/static/frontend/;
• Open Magento 2 database, get theme table and raise a subject name line;
• Discard cache with a command php bin/Magento cache: flush.

Step 14: Structure of Magento Theme

Particularly, the Magento theme structure directory appears like below:

<theme_dir>/

├── <Vendor>_<Module>/

│ ├── web/

│ │ ├── css/

│ │ │ ├── source/

│ ├── layout/

│ │ ├── override/

│ ├── templates/

├── etc/

├── i18n/

├── media/

├── web/

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

├── composer.json

├── registration.php

├── theme.xml

Step 15: Apply and Configure Magento 2 Theme in Admin

In general, after adding the Magento 2 theme to the file system, all is set for activating the theme.  And then, use it to the storefront. Even, you can move to the Magento 2 backend, then visit the content->Design->Themes. Then,  assure that the theme is on the list.

Notably, when you have seen the theme on the list, then, you should navigate to stores->configuration>->design. To clarify, it allows you to select the newly made theme easily.  Then, after the theme selection, choose the “Save Configuration” button. And, further, clear the cache.

Frequently Asked Questions (FAQs)

Q1. What is the approximate cost of the Magento 2 theme development service?

Ans. The approximate cost of the project is given after examining the project’s needs. Particularly, the project requirement is collected first, and then, the development process starts.  Here, the time frame and the best cost are provided for the customers. 

Q2. Which project model is followed for the conversion service?

Ans. Generally, our Magento 2 development team works on an hourly, part-time, or full-time basis.  Even, many pricing models are followed according to the customers’ requirements.

Q3. What is the general Magento Support and Maintenance Policy?

Ans. In particular, the Magento support and maintenance policy services are provided after web development. Truly, you can accelerate this limited period by choosing the paid services.

Q4. Does the customer have the final say in the design layout and other perspectives of the project?

Ans. Certainly!! Our support and maintenance team communicates to you on the theme development process.  Even, every step will be approved by you, and we will also put forward our own opinions.

Q5. How much of my website is secure?

Ans. Our Magento 2 developers assure that every required security measures are performed with the recent Magento 2 version in the website development phase.  With addition to, you can choose the regular maintenance packaged given by us for receiving security updates. Correspondingly, can make the website safe and updated from some vulnerability.

Q6. Which business type are you dealing with?

Ans. At Magentofx, we work with several businesses that need theme design and developing projects on Magento for beginners and existing companies.  Precisely, there are clients from many business industries, like,  food, technology, apparel,  camps, health & beauty, travel, arts, finance, fairtrade, etc.

Have a Project in mind. Let’s talk

Concluding Remarks

Now, as you have seen that the Magento 2 is distinct from Magento 1. Significantly, an improvement is there in the theme structure and now, there is  a storage in the theme files concurrently to make the searching process easier. 

Although, the revised structure is not the essential point. There is an addition of asynchronous modules with the Require JS.

Its implementation is without including scripts in the head section. Rather than the usage of prototype library, jQuery/ jQuery User Interface. Rather, there is a usage of LESS than CSS that increases production rate while developing styles. Additionally, the themes can be created as the composer packages.

Undoubtedly, Magentofx has experienced and proficient developers that can develop theme development projects. Also, you can hire us to have the services for better results with prompt turnarounds. 

We hope you liked this article. If you have any queries and suggestions, then let us know in the comment section below. Or also, if you have some suggestions, then, share that as well.

Thanks for reading!!