This document provides an overview of Magento 2 theming, covering essential topics such as theme creation, structure, configuration, and customization. It outlines the prerequisites for modifying themes, details the directory structure for themes and modules, and explains how to apply and configure them through the admin interface. The document also delves into layout modifications, template customizations, and CSS integration within the Magento framework.

1. This is
Magento 2 Theming
KSS (Knowledge sharing session) by Suman KC

2. I am Suman KC
Magento developer
www.linkedin.com/in/sumankc
www.sumankc.com
Hello!

3. Topics
◉Introduction
◉Themes
◉Layout
◉Templates
◉CSS

4. Introduction
Magento & Magento 2 intro leading to theming
aspects
1

5. ◉eCommerce platform
◉Huge
◉Unique
◉Poor documentation
◉Edition(Community & enterprise)
Magento in general

6. 14K+ Files & 5K+ Folders
That’s a lot of files & directory
109MBand that's before you add themes, modules and all your image libraries
300+ tablesProduct & category alone has 50+ tables relations
Magento1.9.2

7. Magento views are separated into
Magento views
LayoutsBlocks Templates

8. Themes
Creation, Structure, Configuration & Inheritance
2

9. 1. Prerequisites
◉ Not modify out of box Magento themes
[Compatibility,upgradability & easy maintenance]
◉ Set magento application to developer mode
[mode influences the way static files are cached]
Creating a theme

10. app/design/frontend/<Vendor>/
├── <theme>/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json
Theme directory structure

11. <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
TypicalMagentotheme
directory

12. Apply a theme
1. In Admin, go to Stores > Configuration > Design.
2. In the Store View drop-down field, select the store view where you
want to apply the theme.
3. On the Design Theme tab, select your newly created theme in the
Design Theme drop-down.
4. Click Save Config.
5. If caching is enabled, clear the cache.
6. To see your changes applied, reload the store front pages.
Configure a theme (admin section)

13. The properties of product images used on the storefront are stored in
the view.xml configuration file.
<theme_dir>/etc/view.xml
Image properties are configured for each image type defined by the id
and type attributes of the <image> element:
<images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">...</image>
<images/>
Configure image properties

14. ◉ Set a parent theme
◉ Override view.xml file
◉ Override static assets
Theme inheritance
◉ Override templates
◉ Extend Layouts
◉ Override Layouts

15. ◉ Current theme static files: <theme_dir>/web/
◉ Ancestor’s static files, recursively, until a theme with no parent is
reached: <parent_theme_dir>/web/
Module context
◉ Current theme module static files
<theme_dir>/<Namespace>_<Module>/web/
◉ Ancestor themes module static files, recursively, until a theme with
no ancestor is reached:
<parent_theme_dir>/<Namespace>_<Module>/web/
Override static assets

16. Fallback schema
◉ Current theme templates:
<theme_dir>/<Namespace>_<Module>/templates
◉ Ancestors themes templates, recursively, until a theme with no
ancestor is reached:
<parent_theme_dir>/<Namespace>_<Module>/templates
◉ Module templates: <module_dir>/view/frontend/templates
Override templates

17. The system collects layout files in the following order
◉ Current theme layouts: <theme_dir>/<Vendor>_<Module>/layout/
◉ Ancestors themes <parent_theme_dir>/<Vendor>_<Module>/layout/
◉ Module templates: <module_dir>/view/frontend/templates
◉ Module layouts for the frontend area:
<module_dir>/view/frontend/layout/
◉ Module layouts for the base area: <module_dir>/view/base/layout/
Extend Layouts

18. To override the instructions from an ancestor theme layout file:
● Create a layout file with the same name in the
<theme_dir>/<Vendor>_<Module>/layout/override/theme/<Vendor>/
<ancestor_theme> directory.
*Though overriding layouts is not recommended, it is still possible, and might
be a solution for certain customization tasks.
Overriding Layouts

19. Layout
Instruction, extending, overriding and Customizations
3

20. ◉NO local.xml file - to modify, make a new xml
file with same name
◉All attributes & definitions from origianl
module will be inherited
◉move action - great feature of new XML
◉Structural & content blocks to containers &
blocks
Layouts

21. ◉ Common layout instructions to customize layout
Layout instructions
◉<block>
◉<container>
◉<before> & <after>
◉<action>
◉<referenceBlock>
and
<referenceContainer
>
◉<move>
◉<remove>
◉<update>
◉<argument>

22. ◉ Container is a structure without content which holds other
blocks and containers
◉ You can specify HTML attributes...
◉ When extending, we have referenceBlock &
referenceContainer
Containers and blocks

23. ◉ Updates in <referenceBlock> & <referenceContainer> are
applied to the corresponding <block> or <container>.
◉ Eg. if you make a reference by <referenceBlock name=”right”>,
you are targeting the block <block name=”right”>
◉ Attributes = remove & display, values = true/false
◉ <referenceBlock name="block.name" remove="true" />
<referenceBlock> & <referenceContainer>

24. ◉ <move> helps moving elements to other location without the
need to unset or removing from one place
<move element="name.of.an.element" destination="name.of.destination.element"
as="new_alias" after="name.of.element.after"
before="name.of.element.before"/>
◉ <remove> to remove static resource linked in a page <head
and to remove blocks & containers
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<move> & <remove>

25. Extend a layout

26. Overriding layouts

27. Overriding layouts (from parent theme)

28. 1. Set page layout
<page layout="2columns-left" xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
...
</page>
2. Include/remove static resources
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<css src="css/ie-9.css" ie_condition="IE 9" />
<remove src="my-js.js"
Layout Customization examples

29. 3. Create a container - Reference a container
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div"
htmlClass="some-container" />
<referenceContainer name="header.panel">
<block class="MagentoFrameworkView…”>....</block>
4. Create a block - Reference block
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.sku"
template="product/view/attribute.phtml" after="product.info.type">
<arguments>...</arguments>
</block>
<referenceBlock name="logo">...</referenceBlock>
Layout Customization examples

30. Templates
Basic concepts, customizations & overriding
4

31. ◉ Template hint - to locate template(store> config > advanced > developer
> debug > enable template)
◉ Copy template to your theme following convention
◉ Make required changes
For eg. form inside
<Magento_Review_module_dir>/view/frontend/templates/form.phtml
app/design/frontend/OrangeCo/orange/Magento_Review/templates
Template customization walkthrough

32. ◉ Templates are usually initiated in layout files.
◉ Each layout block has an associated template.
◉ The template is specified in the template attribute of the layout
instruction. For example, from
<Magento_Catalog_module_dir>/view/frontend/layout/catalog_category_view.xml
:
<block class="MagentoCatalogBlockCategoryView" name="category.image"
template="Magento_Catalog::category/image.phtml"/>
Template initiation

33. Templates are stored in the following locations:
● Module templates:
<module_dir>/view/frontend/templates/<path_to_templates>
● Theme templates:
<theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>
Conventional template location

34. Customize email templates using theme
◉ Template fallback is supported for email templates
◉ For eg, to override the New Order email template, create a template
named order_new.html in the <theme_dir>/Magento_Sales/email
◉ Customize using Magento Admin
◉ In the Magento Admin, navigate to MARKETING > Communications > Email
Templates
◉ Click Add New Template.
Customizing email templates

35. CSS
Include, preprocessor & Magento UI Library
5

36. In the Magento application, CSS files are included in layout files.
◉ Include css in
<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml
◉ <page xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
<head>
<css src="css/styles-m.css" />
◉ Module-specific styles - /<Namespace>_<Module>/web/css
◉ web/css - styles-m.less, styles-l.less, _styles.less
Include CSS

37. how stylesheets are preprocessed and compiled to CSS
◉ Server-side LESS compilation
default compilation mode, only option for production mode, Compilation
performed server, using the LESS PHP library.
◉ Client-side LESS compilation
When your application is not in the production mode, you can set Magento
to compile .less files in a browse
Backend : Stores > Configuration > ADVANCED > Developer [Store View drop-down field,
select Default Config.] Front-end development workflow, in the Workflow type
Preprocessor (LESS)

38. The Magento UI library is a flexible LESS-based frontend library designed
to assist Magento theme developers
● actions-toolbar
● breadcrumbs
● buttons
● drop-downs
● Forms.. And so on
Magento UI Library

39. You can find the Magento UI library under lib/web/css.
Magento UI Library location

40. Any questions ?
Appreciate your participation !!
Thanks!

41. ◉ Magento 2 frontend developers guide
◉ Sessiondigital & Inchoo articles
Credit
◉Presentation template by SlidesCarnival
◉Prepared slides using Google Slides
Frontend Demo: https://iwdagency.com/magento2/
Backend Demo: https://iwdagency.com/magento2/admin/
User: demo
Pass: demo123
Reference