In this guideline the following methods show you how to construct sample custom theme in Magento 2
- Build functional folders and file
- Theme setting
- verify your Magento 2 theme
Here, I will show you step by step tutorial with how to construct sample custom theme in magento 2
Build functional folders and file
To build a new theme you should prepare these files and folders with the following outline:
- Build a folder contains theme <vendor_theme>
- Construct a folder with name “Webnexs”
- Build a sample folder includes files and functional folder <theme>
Example: Construct a new folder inside folder “webnexs” and named it “sample”
- Build file theme<theme.xml>
Example: you can verify and copy the content in file “theme.xml” with the following code:
<!-- /** * 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>Webnexs Sample Theme</title> <parent>Magento/luma</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme>
- Build a registeration file theme <registration.php>
Example: you can verify and copy the content file “registration.php” with the following code:
<?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__ ); |
- Build composer for theme <composer.json>
Example: you can verify the following code:
{
"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" ]
}
}- Build <media> folder
Construct a file name with “media” and set inside it an image “preview.jpg”
- Build <web> folder
- Build css folder inside
- Build an image folder to place images
- In this folder we set a image”logo.png” inside
- Build “js” folder that include all js files
- Build a folder to connect layout theme <Magento_Theme>
- Construct folder<layout>
- Construct file layout<default.xml>
You can verify and copy the following code for the content file default.xml:
<?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 shape of all folder and files in theme
Webnexs FolderSample 1. Magento_Theme folder -Layout folder +File default.xml 2.Media folder -Image preview.jpg 3.Web folder -css folder -js folder -images folder +image logo.png 4.File composer_json 5.File registration.php 6.File theme.xml
Theme Setting
Step 1:
Permit to Administration menu follow the path:
- Content>theme-> verify if your theme has exhibit in the design panel
- Ensure that it’s definitely your theme was updated by the system displayed in the design panel.
Step 2:
Permit to administration menu follow the path:
- Store>configuration>design. Select your own config mode for your store. Here I select “store default view”
- Then navigate to Content Tab Design and selct your theme
- Save config
Step 3:
- Clear your cache
- Back out and ctrl+f5 to reload static files on your frontend home page and verify the changes on theme.
Step 4:
- If essential , when you see any picture that doesnot display on the home page :
- Deploy static file by the following command:
“php bin/magento setup:static-content:deploy”
Verify your Magento 2 theme
- Navigate homepage>product list>detail product to verify the display on the theme.
- Test with action add to cart and check out
Example: Home page
Here are some editing parts of template detail product:
- Vendor=> Magento => module-catalog => view => frontend => Copy all folders and file
- Layout
- template web
- requirejs-config.js
- Then build a folder Magento_catalog inside your theme and paste inside it
- Open a file Magento_catalog->templates->product->view-addto.phtml
Then add one more text example, the following are
<div class=”infor”>Hey, this is my theme.</div>
Then, Navigate Detail product page and reload, you can see the text in the “add to cart” area
The following steps I mentioned above are the shortest process for you to construct Construct Sample Custom Theme in Magento 2. With these guidelines, you can manage the Sample Theme in Magento 2 easily. All stores have a New Theme in Magento 2 with multiple elements.
Leave a Reply