magento 2 theme development - atlassoftweb.com · themes overview component of magento application...
TRANSCRIPT
![Page 1: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/1.jpg)
By Nilesh MakwanaAtlas Softweb Pvt Ltd
Magento 2 Theme Development
![Page 2: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/2.jpg)
Topics
● Themes Overview● Create a New Storefront theme● Apply and Configure a Storefront theme● Magento theme structure● Working with Layouts in theme● Working with Templates in theme● Working with CSS in theme
![Page 3: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/3.jpg)
Themes Overview
![Page 4: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/4.jpg)
Themes overview
● Component of Magento application● Distributed as additional packages for Magento system similar to
other components.● Out-of-the-box Magento application provides two design themes:
1) Luma, as a demonstration theme 2) Blank, as a basis for custom theme creation.
![Page 5: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/5.jpg)
Create a New Storefront Theme
![Page 6: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/6.jpg)
Walkthrough:
Steps required to add a new theme in the Magento system are the following:
1. Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>.
2. Add a declaration file theme.xml 3. Add a composer.json file.4. Add registration.php.5. Create directories for CSS, JavaScript, images, and fonts.6. Configure your theme in the Admin panel.
![Page 7: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/7.jpg)
Create a theme directoryTo create the directory for your theme:
1. Go to <your magento install dir>/app/design/frontend.Create a new directory named according to your vendor name:/app/design/frontend/<Vendor>.
2. Under the <vendor> directory, create a directory named according to your theme.
app/design/frontend/├── <Vendor>/│ │ ├──...<theme>/│ │ │ ├── ...│ │ │ ├── ...
![Page 8: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/8.jpg)
Declare your themeAfter you create a directory for your theme, you must create theme.xml Add theme.xml file to your theme directory app/design/frontend/<Vendor>/<theme>.
![Page 9: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/9.jpg)
Make your theme a Composer packageTo distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server.
![Page 10: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/10.jpg)
Add registration.php
To register your theme in the system, add a registration.php file in your theme directory.
![Page 11: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/11.jpg)
Create directories for static files● Your theme will likely contain several
types of static files like Styles, Fonts, JavaScript, Images
● Each type should be stored in a separate sub-directory of web in your theme folder:
![Page 12: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/12.jpg)
Your theme directory structure now
![Page 13: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/13.jpg)
Apply and configure a storefront theme
![Page 14: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/14.jpg)
Configure your theme in the Admin panel● In Admin, go to CONTENT > Design > Configuration. It contains a
grid with the available configuration scopes. For example:
![Page 15: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/15.jpg)
Select your theme● On the Default Theme tab, in the Applied Theme drop-down, select
your newly created theme. And Click Save Configuration.
![Page 16: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/16.jpg)
Magento Theme Structure
![Page 17: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/17.jpg)
Magento Theme Structure
![Page 18: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/18.jpg)
Working With Layouts
![Page 19: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/19.jpg)
There are two possible ways to customize page layout in Magento:- Changing layout files- Altering templates.
Use these layout instructions to:- Move a page element to another parent element.- Add content.- Remove a page element.
Layout Customization
![Page 20: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/20.jpg)
1) Declaring theme logo
Common layout Tasks
![Page 21: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/21.jpg)
![Page 22: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/22.jpg)
2) Moving Elements with <move>
Common layout Tasks
![Page 23: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/23.jpg)
Before move
After move
![Page 24: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/24.jpg)
Working with Templates in Theme
![Page 25: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/25.jpg)
Let's say we want to customize product view page for add to cart button. We will copy - vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml
And paste same file to our theme directory - app/design/frontend/Atlas/mytheme/Magento_Catalog/templates/product/view/addtocart.phtml
And do necessary changes to extended template file.
Customize Using Templates
![Page 26: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/26.jpg)
Working with CSS in theme
![Page 27: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/27.jpg)
Include your CSS in default_head_blocks.xml of the Magento_Theme module.
Include Custom CSS file
![Page 28: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/28.jpg)
In your theme directory, create a web/css/source sub-directory.Create a _extend.less file there. The path to it looks like following:
Simplest way to extend parent styles
![Page 29: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/29.jpg)
Source 01
Source 02
Source:
![Page 30: Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application Distributed as additional packages for Magento system similar to other components](https://reader033.vdocument.in/reader033/viewer/2022042003/5e6e8391a739647ed559363e/html5/thumbnails/30.jpg)
Thank You!