Continuing the first part, part 2 of "How to create theme in Magento 2" will provide you steps by steps guide and fundamental customization 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

4. 2. Configure and
create a theme folder

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>

14. And the result will be:

15. And the result will be:

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!

18. 3. Fundamental
customization
elements

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”

27. Go to
app/design/frontend/Magento/magestore/Magento_Catalog/templates/product/view/a
ddto.phtml:31, edit as follows:

28. Yay, we’re done studying!
blog.magestore.com

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