Our brands

Magento Theme Customization Step by step Guide | Venustheme

magento theme customization step by step

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

Let’s start with the first step.

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

Moving on the next step.

II. Create a theme directory (Folders and Files)

In this stage, there are 8 smaller steps. Follow these steps below to create a theme directory.

Files and folders need to be prepared:
1. Folder contains theme <vendor_theme>
E.g. name “Venustheme”

custom magento 2 theme

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: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

custom magento 2 theme

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: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>

 

And now turning into the last stage.

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.

custom magento 2 theme

 

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

custom magento 2 theme

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/

Related Posts on Venustheme you may be interested in

Share this Post!

0 Comment

Leave a Comment

Your email address will not be published.