- Create functional folder and file
- Theme settings
- 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″.
Contents
- 1 1.Create functional folder and file
- 1.1 1 – Create a folder contains theme <vendor_theme>
- 1.2 2 – Create a sample folder contains files and functional folders <theme>
- 1.3 3 – Create file theme <theme.xml>
- 1.4 4 – Create registration file theme <registration.php>
- 1.5 5 – Create composer for theme <composer.json>
- 1.6 6 – Create <media> folder
- 1.7 7 – Create <web> folder
- 1.8 8 – Create a folder to connect layout theme <Magento_Theme>
- 2 2.Theme settings:
- 3 3.Check your Magento 2 theme:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ --> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Magestore Sample Theme</title> <parent>Magento/luma</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme> |
4 – Create registration file theme <registration.php>
Example: You can check out and copy the Content in file “registration.php” with the code below:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Magestore/sample', __DIR__ ); |
5 – Create composer for theme <composer.json>
Example: You can check the code below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "name": "magento/sample-module-theme", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-luma": "~100.0", "magento/framework": "~100.0" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } |
6 – Create <media> folder
create folder with name “media” and place inside it an image “preview.jpg”
7 – Create <web> folder
- Create “css“ 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0"?> <!-- /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> </arguments> </referenceBlock> <remove name="report.bugs"/> </body> </page> |
- 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.
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
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
- 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.
And that is my simple method of creating a Custom Theme.
Wish you success with this tutorial.
In our Blog, we also write an article for who don’t have enough time to write a Magento 2 themes. Instead, they’ll want to choose a premium (and free) built by well-known brands in Magento field. Take a look if you’re one of them. And of course, please feel free to find more Magento 2 Tutorials by our Experts.