How to Construct Sample Custom Theme in Magento 2

In this guideline the following methods show you how to construct sample custom theme in Magento 2

  1. Build functional folders and file
  2. Theme setting
  3. 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:

  1. Build a folder contains theme <vendor_theme>
  • Construct a folder with name “Webnexs”
  1. Build a sample folder includes files and functional folder <theme>

Example: Construct a new folder inside folder “webnexs” and named it “sample”

  1. 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>
  1. 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__

);

 

  1. 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" ]

    }

}
  1. Build <media> folder

Construct a file name with “media” and set inside it an image “preview.jpg”

  1. 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
  1. 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.

magento 2 theme

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

magento 2 theme

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

 magento 2 theme

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.

Last Update: April 9, 2018  

February 9, 2018   161   Nandini R    Theme    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/construct-sample-custom-theme-magento-2
Twitter
LinkedIn