[Webinar] SpiraTest - Setting New Standards in Quality Assurance
How to Create Theme in Magento 2 - Part 2: Configure and Customize Theme Elements
1. The second part of:
HOW TO
CREATE THEME IN
MAGENTO 2 A publication of
2. Continuing part 1, part 2 of “How to create theme in Magento 2” will guide you
through steps by steps to configure and fundamental elements when creating theme.
Part 2
3. Continuing part 1, part 2 of “How to create theme in Magento 2” will guide you
through steps by steps to configure and fundamental elements when creating theme.
Part 2
See part 1 of this
tutorial here
5. - Create a theme folder in design folder as the structure below:
-app/design/<area>/<vendorName>/<newTheme>/
Example: /app/design/frontend/Magento/magestore
- Declare theme:
Create a file theme.xml in Magestore theme folder that you’ve just created and
declare information including: theme, version, parent theme (if it is a inherited
theme)
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"xsi:noNamespaceSchemaLocation="../../../../../lib/int
ernal/Magento/Framework/Config/etc/theme.xsd">
<title>Magestore Theme</title> <media>
<preview_image>media/preview.jpg</preview_image> </media>
</theme>
6. - Create a photo to preview for the new theme: magestore.png
We have a photo file as follows:
/app/design/frontend/Magento/magestore/media/theme/preview/magestore.png
Otherwise, there will be an error alert for not finding photos.
7. - Create a file composer.json in the theme folder
8. - In backend, go to Content > Design > Themes to see the new theme
9. - Configure Images (Optional)
In the file view.xml, the size of product photos in frontend will be configured.
In the new theme folder, the new folder <etc> is just created
app/design/<area>/<vendorName>/<newTheme>/etc/
10. - Configure Images (Optional)
In the file view.xml, the size of product photos in frontend will be configured.
In the new theme folder, the new folder <etc> is just created
app/design/<area>/<vendorName>/<newTheme>/etc/
Read this blog post with
detailed example
11. - Create an image folder:
+ In the theme, there are some static folders need to be added to the
image folder
+ Create folder <web> and folder <image> in the folder <web>
App/design/<area>/<vendorName>/<newTheme>web/images/
12. Example: /app/design/frontend/Magento/magestore/web/images/
Add a logo image to the theme:
Go to: app/design/<area>/<vendorName>/<newTheme>web/images/
Example: /app/design/frontend/Magento/magestore/web/images/
Copy the image with the name logo.png to the folder:
Example: logo.png
13. Magento will automatically set file logo.gif as the logo image. If you don’t want it
automatically, then create the following file:
Find and copy the file /Magento_Theme/layout/default.xml in the default theme
to the folderapp/design/<area>/<vendorName>/<newTheme>/
There will be the following path:
/app/design/frontend/Magento/magestore/Magento_Theme/layout/default.xml
Add this code to the file:
<referenceBlock name="logo"> <arguments>
<argument name="logo_file"
xsi:type="string">images/logo.png</argum
ent> </arguments> </referenceBlock>
16. - Go to Configuration then use the theme you just created:
Go to Store > Configuration > Design in Design Theme, choose the new theme:
17. Then Save Configuration.
So we have finished creating a new theme folder structure, the following part will
be steps to customize your own theme. Let’s move!
19. In order to customize CSS , copy files that are inherited from parent theme or
from the default theme to your theme folder.
Example: Go to theme folder /app/design/frontend/Magento/blank, copy the
folder web/css
Customize CSS:
20. In order to customize CSS , copy files that are inherited from parent theme or
from the default theme to your theme folder.
Example: Go to theme folder /app/design/frontend/Magento/blank, copy the
folder web/css
Customize CSS:
Paste the theme folder
21. Go to the folder /lib/web/css/source/lib copy the file lib.css then go to lib
folder in Magestore theme
22. In the folder app/design/frontend/Magento/magestore/web/css/ , open the
file style.less, then edit code as follows:
23. After that, create a file mytheme.less in the source folder:
We have a file path:
app/design/frontend/Magento/magestore/web/css/source/mytheme.less
Insert the following code (code in LESS language)
24. After deleting static folder and <var cache> folder
/pub/static/frontend/Magento/magestore
/var
Refresh your browser and we have background web color:
25. Customize template module:
You can also customize any module’s html, for example, if you want to customize
frontend of module Magento_Catalog, go to the
folder app/code/Magento/Catalog/view/frontend/ of the module, copy folders: layout,
templages, web to your new theme, place them in folder Magento_catalog with the same
name as the module’s name, as below:
26. Let me take an example of customizing a html containing the text “Buy this product now”
under the button “Add to Cart”
29. Thank youVisit Magestore Blog to
check the full version of
this tutorial & update
latest tutorials about
Magento 2
Magestore Blog: How to
Create theme in Magento 2