Here are the methods that you’re going to comply with this Magento 2 theme – Create sample Custom Theme in M2:
  1. Create functional folder and file
  2. Theme settings
  3. Check your Magento 2 theme

There may have a few problems with update & creating theme in Magento 2. To prevent all of that, I would like to show you a complete step-to-step tutorial with how to deal with Magento 2 theme.
In this post, I will show you first with ” How to create sample of Custom Theme in Magento 2 ”

1.Create functional folder and file

To create a new theme, you should prepare these files and folders with structure like this:

1 Create a folder contains theme <vendor_theme>
2 Create a sample folder contains files and functional folders <theme>
3 Create file theme <theme.xml>
4 Create registration file theme <registration.php>
5 Create composer for theme <composer.json>
6 Create <media> folder
7 Create <web> folder
8 Create a folder to connect layout theme <Magento_Theme>

1 – Create a folder contains theme <vendor_theme>

Example: create a folder with name ” Magestore “

 

2 – Create a sample folder contains files and functional folders <theme>

=> create new folder inside folder “Magestore” and named it “Sample”

 

3 – Create file theme <theme.xml>

Example: You can check out and copy the Content in file “theme.xml” with the code below:

 

4 – Create registration file theme <registration.php>

Example: You can check out and copy the Content in file “registration.php” with the code below:

 

5 – Create composer for theme <composer.json>

Example: You can check the code below

 

6 – Create <media> folder

create folder with name “media” and place inside it an image “preview.jpg”

 

7 – Create <web> folder

  • Createcss folder inside
  • Create an image folder to place images
    • In this folder we place an image “logo.png” inside => it’s the Logo of theme
  • Create “js” folder that contains all js files

8 – Create a folder to connect layout theme <Magento_Theme>

  • Create folder <layout>
  • Create file layout <default.xml>

You can check and copy the code below for the content of file default.xml

  • The structure for all folders and files in theme
1, Magestore Folder

1.1 Sample folder

1.1.1  Magento_Theme folder

                                        – Layout folder

                                                + File default.xml

1.1.2  Media folder

                                       – Image preview.jpg

1.1.3  Web folder

                                      – css folder

                                      – js folder

                                      – images folder

+ Image logo.png

1.1.4 File composer.json

1.1.5 File registration.php

1.1.6 File theme.xml

2.Theme settings:

1 – Step 1 :

  • You need to access to Administration Menu follow the path:
  • Content => Themes => check if your theme has appeared in the Design panel
  • Please make sure that it’s definitely your theme was updated by the system and displayed in design panel.

magento 2 theme

2 – Step 2 :

Access to Administration Menu follow the path:

  • Store => Configuration => Design => Choose your own Config mode for your store. In this tutorial, I choose “store default view”
  • After that, go to Content tab design and choose your theme
  • Save config

magento 2 theme

3 – Step 3:

  • You need to refresh your cache  (clear cache)
  • Back out and press Ctrl + F5 to reload static files on your frontend home page and check  the changes on theme

4  – Step 4 :

If necessary, when you see any picture that doesn’t display on the home page:

– Deploy again the static file by the command:

“php bin/magento setup:static-content:deploy” 

3.Check your Magento 2 theme:

  • Go to Home page, Products list, Detail product to check the display of the theme

=> Test with action Add to cart and Check out

Example: Home Page

magento 2 theme

  • Let me show you with editing some parts of template detail product:
A Vendor => Magento => module-catalog => view => frontend => Copy all folders and file
B Next, create a folder Magento_Catalog inside your theme and paste inside it
C Open file Magento_Catalog => templates => product => view => addto.phtml

a) Vendor => Magento => module-catalog => view => frontend => Copy all folders and file:

  • layout
  • template
  • web
  • requirejs-config.js

b) Next, create a folder Magento_Catalog inside your theme and paste inside it

c) Open file Magento_Catalog => templates => product => view => addto.phtml

then add 1 more text as example below:
<div class=”infor”>Hey, this is my theme.</div>

And then, go to Detail product page and Reload, you can see that text in the Add to cart” area.

magento 2 theme
And that is my simple method of creating a Custom Theme.
Wish you success with this tutorial.
In case you want to fully experience its new awesome features, please try the Magento 2 Demo here. And of course, please feel free to find more Magento 2 Tutorials by our Experts.

We also contribute great content of Magento Download for FREE (all versions)

DON'T MISS THE CHANCE!

magento download

How to Create New Theme in Magento 2 (Part 1)

Leave a Reply

Your email address will not be published. Required fields are marked *