Magento 2 Theme Development - atlassoftweb.com · Themes overview Component of Magento application...

By Nilesh MakwanaAtlas Softweb Pvt Ltd

Magento 2 Theme Development

Topics

● Themes Overview● Create a New Storefront theme● Apply and Configure a Storefront theme● Magento theme structure● Working with Layouts in theme● Working with Templates in theme● Working with CSS in theme

Themes Overview

Themes overview

● Component of Magento application● Distributed as additional packages for Magento system similar to

other components.● Out-of-the-box Magento application provides two design themes:

1) Luma, as a demonstration theme 2) Blank, as a basis for custom theme creation.

Create a New Storefront Theme

Walkthrough:

Steps required to add a new theme in the Magento system are the following:

1. Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>.

2. Add a declaration file theme.xml 3. Add a composer.json file.4. Add registration.php.5. Create directories for CSS, JavaScript, images, and fonts.6. Configure your theme in the Admin panel.

Create a theme directoryTo create the directory for your theme:

1. Go to <your magento install dir>/app/design/frontend.Create a new directory named according to your vendor name:/app/design/frontend/<Vendor>.

2. Under the <vendor> directory, create a directory named according to your theme.

app/design/frontend/├── <Vendor>/│ │ ├──...<theme>/│ │ │ ├── ...│ │ │ ├── ...

Declare your themeAfter you create a directory for your theme, you must create theme.xml Add theme.xml file to your theme directory app/design/frontend/<Vendor>/<theme>.

Make your theme a Composer packageTo distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server.

Add registration.php

To register your theme in the system, add a registration.php file in your theme directory.

Create directories for static files● Your theme will likely contain several

types of static files like Styles, Fonts, JavaScript, Images

● Each type should be stored in a separate sub-directory of web in your theme folder:

Your theme directory structure now

Apply and configure a storefront theme

Configure your theme in the Admin panel● In Admin, go to CONTENT > Design > Configuration. It contains a

grid with the available configuration scopes. For example:

Select your theme● On the Default Theme tab, in the Applied Theme drop-down, select

your newly created theme. And Click Save Configuration.

Magento Theme Structure

Magento Theme Structure

Working With Layouts

There are two possible ways to customize page layout in Magento:- Changing layout files- Altering templates.

Use these layout instructions to:- Move a page element to another parent element.- Add content.- Remove a page element.

Layout Customization

1) Declaring theme logo

Common layout Tasks

2) Moving Elements with <move>

Common layout Tasks

Before move

After move

Working with Templates in Theme

Let's say we want to customize product view page for add to cart button. We will copy - vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml

And paste same file to our theme directory - app/design/frontend/Atlas/mytheme/Magento_Catalog/templates/product/view/addtocart.phtml

And do necessary changes to extended template file.

Customize Using Templates

Working with CSS in theme

Include your CSS in default_head_blocks.xml of the Magento_Theme module.

Include Custom CSS file

In your theme directory, create a web/css/source sub-directory.Create a _extend.less file there. The path to it looks like following:

Simplest way to extend parent styles

Source 01

Source 02

Source:

Thank You!