Magento2 Create storefront theme using bootstrap

Hi guys, today I am going to teach you about not only creating magento2 theme, but also using bootstrap with it. Before getting started I assume you have some basic understanding how bootstrap works to create your custom theme.

The steps that are required to create theme are listed below. Each step would be explain with an example.

1. Create a theme directory under app/design/frontend/<vendor_name>/<theme_name>
2. Declare your theme using theme.xml inside your theme directory
3. Make your theme a Composer package in order to distribute your theme as package
4. Add registration.php to register your theme in the system
5. Configure images
6. Create Media folder
7. Create directories for static files
8. Your theme directory structure after following steps above
9. Theme Logo
10. Declaring Theme Logo
11. Adding bootstrap less

So guys basically we need all above steps to follow to create our custom theme. I am going to explain each step in detail for you. You can also download source code from github link which is given at the end of this tutorial.

1. Create a theme directory:

   To create your theme you must create your theme directory with vendor_name and theme_name.

   We need to follow an example in order to understand it in better way. Now create directory :

   app/design/frontend/knowthemage/mytheme

2. Declare your theme:

   Now after creating theme directory you must create theme.xml under app/design/frontend/knowthemage/mytheme/

   theme.xml

    
   <?xml version="1.0" ?>
   <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
       <title>My Bootstrap Theme</title> <!-- your theme's name -->
       <parent>Magento/luma</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>
   
   

   Title is the title of your theme. If your theme inherits from any parent theme you would specify it.

3. Make your theme a Composer package:

   composer.json provides theme dependency information. To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server.

    
   {
     "name": "knowthemage/mytheme",
     "description": "My Custom bootstrap theme",
     "require": {
       "php": "~5.5.0|~5.6.0|~7.0.0",
       "magento/theme-frontend-luma": "~100.0",
       "magento/framework": "~100.0"
     },
     "type": "magento2-theme",
     "version": "1.0.0",
     "license": [
       "OSL-3.0",
       "AFL-3.0"
     ],
     "autoload": {
       "files": [
         "registration.php"
       ]
     }
   }
   
   

4. Add registration.php

   Add a registration.php inside app/design/frontend/knowthemage/mytheme/ directory in order to register your theme in Magento system.

    
   <?php
   \Magento\Framework\Component\ComponentRegistrar::register(
       \Magento\Framework\Component\ComponentRegistrar::THEME,
       'frontend/knowthemage/mytheme',
       __DIR__
   );
   

5. Configure images:

   Image configuration is required for a theme, but optional when inherited from parent theme. Image configuration and other properties for storefront are configured in view.xml file.

   If your product image sizes differ from your parent theme, you can use view.xml to configure image sizes to match your requirements. The file resides in etc folder of the theme.

   Image properties are configured in the scope of <images module="Magento_Catalog" < element.

   Create a file view.xml inside directory app/design/frontend/knowthemage/mytheme/etc.

   view.xml

    
   <?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="category_page_grid" type="small_image">
                   <width>240</width>
                   <height>300</height>
               </image>
               <image id="category_page_list" type="small_image">
                   <width>240</width>
                   <height>300</height>
               </image>
               <image id="product_thumbnail_image" type="thumbnail">
                   <width>75</width>
                   <height>75</height>
               </image>
           </images>
       </media>
   </view>
   

   After declaration of view.xml each specified image be resized according to the given configuration.

   We are configuring media images under module Magento_Catalog with image properties that are defined by ids with specified type of image. Where id is image identifier and unique in the scope of theme. In same way type type of the images with following options:

   • image corresponds to the Base Image role
   • small_image – corresponds to the Small Image role
   • swatch_image – corresponds to the Swatch Image role
   • swatch_thumb – corresponds to the Swatch Image role
   • thumbnail – corresponds to the Thumbnail Image role

6. Create Media folder:

   Now if we see our theme configuration file theme.xml, we would notice that we already defined a preview image for our theme. Since we are using parent theme it is not required to declare it on your theme unless you customize this preview image. So lets go ahead and customize our theme preview image. Create a new directory media inside your theme folder under app/design/frontend/knowthemage/mytheme/ and place image media/preview.png inside it. This image is your theme preview image and will be displayed on admin panel in theme section.

7. Create directories for static files

   Static directory plays very important role in magento theme. The folder web holds static content like js, css, htmltemplates, images

   app/design/frontend/knowthemage/mytheme/
   | ── web/
   │  ── css/
   │ │  ── source/ 
   │  ── fonts/
   │  ── images/
   │  ── js/
   

8. Theme Structure Now

   Your theme structure looks like now is:

   app/design/frontend/knowthemage/
    ── mytheme
   |  ── etc/
   | |  ── view.xml
   |  ── media/
   | |  ── preview.png
   |  ── web/
   │ |  ── css/
   │ │ |  ── source/ 
   │ |  ── fonts/
   │ |  ── images/
   │ |  ── js/
   |  ── composer.json
   |  ── registration.php
   |  ── theme.xml
   

9. Declaring Logo:

   The default name and format of a logo image is logo.svg. You can place directly this image without adding custom configuration, magento picks it up. The default size of image should be 300px X 300px.

   This svg is placed under static directory <theme_directory>/Magento_Theme/web/images/logo.svg

   To customize your logo go a head and create a layout file, default.xml, under new directories Magento_Theme/layout/:

   app/design/frontend/knowthemage/Magento_Theme/layout/default.xml

   And write below code inside the file

    
   <?xml version="1.0" ?>
   <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="logo">
           <arguments>
               <argument name="logo_file" xsi:type="string">images/logo.png</argument>
               <argument name="logo_img_width" xsi:type="number">220</argument>
               <argument name="logo_img_height" xsi:type="number">65</argument>
           </arguments>
       </referenceBlock>
   </page>
   
   

   With the reference to above code you are customizing the image logo along with its dimensions. Now in order to place your custom image you must create new directories, web/images, under app/design/frontend/knowthemage/ Go a head and create your directory and place logo.png inside it.

    app
     design
      frontend
       knowthemage
        mytheme
         web/
          images/
           logo.png
   

10. Adding bootstrap less

    Now next step is to download bootstrap source. To download, proceed to url https://getbootstrap.com/docs/3.3/getting-started/#download and choose Source Code. The source code will contain the less files along with other additional files.

    Now inside app/design/frontend/knowthemage/mytheme/web/ create directory including sub-directories: css/bootstrap/ and from downloaded archive place your less files inside less directory from it. Also extract font files inside app/design/frontend/knowthemage/mytheme/web/:

    Now most important task here is to RENAME all of your bootstrap files. All you have to do is to place _ (underscore) before the name of each bootstrap file except directories / sub-directories, and rename each import inside _bootstrap.less and each import respectively.

    Why underscore ( _ ) is necessary ? :

    It is magento standard and it is required for compilation. If you don’t specify it, sometimes compilation fails and results in exception.

    Now create another directory inside app/design/frontend/knowthemage/mytheme/web/ with name source, create file _module.less and place following code inside it:

     
    @import "../bootstrap/_bootstrap.less";
    

    This code will import the bootstrap entry file into the theme, which will be compiled during upgrade command.

    Finally our structure for ../web/css/ directory becomes:

     app
      design
       frontend
        knowthemage
         mytheme
          web/
           css/
            bootstrap/
             _alerts.less
             _badges.less
             _bootstrap.less
             _breadcrumbs.less
             _button-groups.less
             _buttons.less
             _carousel.less
             _close.less
             _code.less
             _component-animations.less
             _dropdowns.less
             _forms.less
             _glyphicons.less
             _grid.less
             _input-groups.less
             _jumbotron.less
             _labels.less
             _list-group.less
             _media.less
             _mixins.less
             _modals.less
             _navbar.less
             _navs.less
             _normalize.less
             _pager.less
             _pagination.less
             _panles.less
             _popovers.less
             _print.less
             _progress-bars.less
             _responsive-embed.less
             _responsive-utilities.less
             _scaffolding.less
             _tables.less
             _theme.less
             _thumbnails.less
             _tooltip.less
             _type.less
             _utilities.less
             _variables.less
             _wells.less
             mixins/
             .......{mixin respective files having _ before name}
            source/
             _module.less
    

    Now deploy the files using static content deployment command. Also activate your theme from admin panel to preview your changes.