Magento Theme Development

A theme governs how elements and the complete website are presented to the user. The Magento Theme Development process is said to be the most essential factor that is widely used for maintaining a consistent design and tone format across the entire store. With this theme development you can improve the visibility of your brand and storefront by combining various custom templates, designs, styles, or images available with the Magento 2 management board.

But first, let's go over the fundamentals.

What Exactly Is a Magento Theme?

Magento Theme Development Services are said to be the collection of layouts that together provide the real design for your pages. The theme is a component of your store in Magento 2.

What Is the Distinction Between Default and Custom Themes?

Magento 2 is an excellent platform which comes with two amazing default themes: Luma and Blank themes.

Luma serves as a demo theme where you may get an idea of how a Magento site works by incorporating various ready-made Luma and Blank themes. It also helps you to truly stand out, about how to build your own customized design.

Here is a list of the nine stages you must do to magento theme customization.

  1. Developing a Magento theme folder
  2. Declare your theme
  3. Install the Composer package
  4. the registration.php file
  5. Making static files and folders
  6. Create catalogue product images
  7. Designate Theme Logo
  8. Basic design elements
  9. Types and norms of layout files

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

    
        
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:no NamespaceSchemaLocation="../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">

        
  <title>Magecaptain Simple</title>

        
  <parent>Magento/blank</parent>

        
</theme>

Theme structure

Theme Folder structure:

app/design/frontend/Magecaptain/

├── simple/

│   ├── etc/

│   │   ├── view.xml

│   ├── web/

│   │   ├── images

│   │   │   ├── logo.svg

│   ├── registration.php

│   ├── theme.xml

│   ├── composer.json

<Vendor> is theme vendor. e.g: Magecaptain

<theme> is theme name. e.g: simple

Ok, let’s go

1. Developing a Magento theme folder

For creating a magento 2 theme folder first :

  •         Go to app/design/frontend
  •         And create a vendor folder app/design/frontend/<vendor> e.g: app/design/frontend/Magecaptain
  •         Then build a theme folder app/design/frontend/<vendor>/<theme> e.g: app/design/frontend/Magecaptain/simple

app/design/frontend/

├── Magecaptain/

│   │   ├──simple/

│   │   │   ├── ...

│   │   │   ├── …

2. Declare your theme

Now we have a file folder app/design/frontend/Magecaptain/simple , now make a file named theme.xml that describe the basic facts about theme such as: Name, parent theme, showing image.

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

        
  <title>Magecaptain Simple</title> <!-- your theme's name -->

        
  <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->

        
  <media>

        
      <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->

        
  </media>

        
</theme>

3. Composer package

Composer is another outstanding tool for writing in PHP. It lets you to announce the archives your plan depends on and it will manage (install/update) them for you.

In order to allocate your magento 2 theme customization as a package, add a composer.json file to the theme manual and then register the package on the packaging server.

composer.json example:

    
        
{

        
"name": "magecaptain/simple",

        
"description": "N/A",

        
"require": {

        
     "php": "~5.5.0|~5.6.0|~7.0.0",

        
     "magento/theme-frontend-blank": "100.0.*",

        
     "magento/framework": "100.0.*"

        
},

        
"type": "magento2-theme",

        
"version": "100.0.1",

        
"license": [

        
     "OSL-3.0",

        
     "AFL-3.0"

        
],

        
"autoload": {

        
     "files": [

        
         "registration.php"

        
     ]

        
}

        
}
Magento theme development
Are you searching for a company which designs and develops a Magento 2 theme development?
Get a quote now

4. registration.php file

Now you can easily add the next content to register the theme to your Magento 2

    
        
<?php

        
/**

        
* Copyright © 2015 Magento. All rights reserved.

        
* See COPYING.txt for license details.

        
*/

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

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

        
'frontend/Magecaptain/simple',

        
__DIR__

        
);

You should change Magecaptain, simple to your vendor, theme name.

5. Creating static files, folders

There are many static files in a design, such as javascript, CSS, pictures, and fonts. They are kept in different folders on the theme package's site.

The structure is as follows:

app/design/<area>/Magecaptain/simple/

├── web/

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

Tips

When developing a Magento 2 theme or extension, if you alter any files in the app/design/area>/Magecaptain/simple/web folder, you must also update the static folders pub/static and var/view preprocessed. Otherwise, there is no change on the frontend.

6. Set up catalogue product images

There is a file called etc/view.xml in the theme structure I explained above. This file is a configuration file. This file is necessary for the Magento 2 theme but optional if it is present in the parent theme.

Create a folder etc and a file view.xml in app/design/area>/Magecaptain/simple/. You can copy the view.xml file to the parent theme, for example, Blank theme app/design/frontend/Magento/blank/etc/view.xml.

Let's go ahead and edit the image setup for the catalogue product grid page.

    
        
<image id="category_page_grid" type="small_image">

        
<width>250</width>

        
<height>250</height>

        
</image>

Image properties in view.xml are configured in the element scope:

<images module="Magento_Catalog">

...

<images/>

Image properties are defined for each image type via the id and type attributes of the image> element:

    
        
<images module="Magento_Catalog">

        
            <image id="unique_image_id" type="image_type">

        
            <width>100</width> <!-- Image width in px -->

        
        <height>100</height> <!-- Image height in px -->

        
            </image>

        
<images/>

7. Declare Theme Logo

Theme dir>/web/images/logo.svg is the default file format in Magento 2, but you can modify it in your theme to other file formats like png or jpg, but you must declare it.

The logo should be 300x300px in size, and you should open the file theme dir>/Magento Theme/layout/default.xml.

    
        
<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/custom_logo.png</argument>

        
             <argument name="logo_img_width" xsi:type="number">300</argument>

        
                <argument name="logo_img_height" xsi:type="number">300</argument>

        
         </arguments>

        
     </referenceBlock>

        
</body>

        
</page>

8. Basic layout elements

The essential elements of Magento page design are blocks and containers.

A container exists just to assign content structure to a page. A container contains no additional content other than the content of included elements. Containers include the header, left column, main column, and footer.

9. Layout files types and conventions

Module and theme layout files

The following phrases are used to differentiate between layouts given by various application components:

  • Module-provided base layouts: Layout files. Traditional location:
  • Files for page settings and generic layout: <module dir>/view/frontend/layout
  • Files for page layout: module dir>/view/frontend/page layout
  • Theme layouts: Theme-provided layout files. Traditional location:
  • Files for page configuration and generic layout: theme dir>/Namespace> Module>/layout
  • Files for page layout: theme dir>/Namespace> Module>/page layout
Magento theme development
Would you like to design and develop a Magento 2 theme development?
Get a quote now

Create a theme extending file

Rather than duplicating significant page layout or page settings code and then editing what you want to change, the Magento system merely involves the production of an expanded layout file with the needed changes.

Do the following include an extending page configuration or generic layout file?

FINAL WORD

The post discusses some of the most important things that will assist you in building a Magento 2 theme from the ground up. So, by adhering to the aforementioned guidelines, you may quickly build the theme. The article also covers some of the fundamental distinctions that will aid you in better understanding Magento.