magento theme customization step by step

•

Magento Theme Customization Step by Step Guide | Venustheme

In this tutorial, I gonna show you the guide ” Magento Theme Customization Step by step” on Venustheme.

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”

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

3. File theme <theme.xml>

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework: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::register( \Magento\Framework\Component\ComponentRegistrar::THEME, '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

8. Folder to connect layout theme <Magento_Theme>

– Create “layout” folder
– Create file layout <default.xml>

<?xml version="1.0"?>  <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>

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.

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

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: venustheme@gmail.com

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

VIEW DETAIL