magento 2 theme development - atlassoftweb.com · themes overview component of magento application...
TRANSCRIPT
By Nilesh MakwanaAtlas Softweb Pvt Ltd
Magento 2 Theme Development
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
Themes Overview
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.
Create a New Storefront Theme
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.
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>/│ │ │ ├── ...│ │ │ ├── ...
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>.
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.
Add registration.php
To register your theme in the system, add a registration.php file in your theme directory.
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:
Your theme directory structure now
Apply and configure a storefront theme
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:
Select your theme● On the Default Theme tab, in the Applied Theme drop-down, select
your newly created theme. And Click Save Configuration.
Magento Theme Structure
Magento Theme Structure
Working With Layouts
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
1) Declaring theme logo
Common layout Tasks
2) Moving Elements with <move>
Common layout Tasks
Before move
After move
Working with Templates in Theme
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
Working with CSS in theme
Include your CSS in default_head_blocks.xml of the Magento_Theme module.
Include Custom CSS file
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
Source 01
Source 02
Source:
Thank You!