Name: venustheme.jpg Views: 10 Size: 105.5 KB

View Detail


Before we start, I’d like to say that to customized Magento theme is never easy, especially for Magento 2 beginner. As the process relates to a lot of code knowledge, you should follow the guide about Magento Theme Customization step by step to reach the best customization.

My tutorial is divided into 3 main parts as follow:

  • What should be prepared to customize a theme?
  • Create a theme directory (folder and file)
  • Configure theme in Magento 2 admin



I. What should be prepared to Customized Magento Theme?
The answer is a local host containing Magento 2 with accessible frontend and backend. You can get a Magento host from Magento providers such as Cloudways here

II. Create a theme directory (Folders and Files)
Files and folders need to be prepared:

1. Folder contains theme <vendor_theme>
E.g. name “Venustheme”

Name: 1.jpg Views: 10 Size: 17.4 KB

2. Sample folder contains files and functional folders <theme>
Inside “Venustheme”, create a new one name “Sample”

3. File theme <theme.xml>

<!--
/**
* 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:framewo rk:Config/etc/theme.xsd">
<title>Your Theme Name</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

4. Registration file theme <registration.php>

<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

\Magento\Framework\Component\ComponentRegistrar::r egister(
\Magento\Framework\Component\ComponentRegistrar::T HEME,
'frontend/Venustheme/your_theme_name',
__DIR__
);

5. Composer <composer.json>

{
"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. Media <media> folder

Place an image name “preview.jpg”

7. Web <web> folder

Inside web folder:
– Create “css” folder
– Create image folder to place images: logo, homepage, product detail, product blog, etc.
– Create a “js” folder to keep all js files in

Name: mediaweb.jpg Views: 8 Size: 58.8 KB

8. Folder to connect layout theme <Magento_Theme>

– Create “layout” folder
– Create file layout <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:framewo rk: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>

III. Set up theme
1. Admin Panel > Content > Themes

Make sure that the Sample theme is already updated and shown in the system

2. Admin Panel > Content > Configuration (under Design)

In the table, you will see a table of design configuration, click on edit button in the last column.

Name: edit-1-e1499414424238.jpg Views: 8 Size: 32.6 KB

Then, choose your theme at the content tab and save config.

Name: choose-theme-e1499414541364.jpg Views: 8 Size: 41.4 KB

3. Clear Cache to reload static files (Ctrl + F5) and see change on theme in the frontend.

This is all my tutorial about Magento theme Customization Step by step. In case you have any requirement that needs my developer support, please feel free to contact us via:

Email: [email protected]

Venustheme Customization Service: http://www.venustheme.com/magento-cu...ation-service/

View more threads in the same category: