If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Custom Theme Development In Magento 2

In the first part of this theme development series I explained the functioning of Magento folder structure work for themes. Now, this is the last part of the series and in this part, I am going to depict how to make the theme pages and give shape to the entire theme with styling.

Configure Image Properties in Your Theme

For configuration of catalog image sizes and other images, you need view.xml. This file is required for the theme if the product image sizes of your custom theme are different from the parent theme sizes. The view.xml file configures all storefront product image sizes. For example, you make the category grid view product images by specifying size of 350 x 350 pixels. Copy the view.xml file from the etc. directory of your parent theme to your theme’s etc directory and here is how the corresponding configuration would look like:

For the sake of compatibility, upgradability, and easy maintenance, do not modify the out of the box Magento themes. To customize the design of your Magento store, create a new custom theme.
Set your Magento application to the developer mode. The application mode influences the way static files are cached by Magento. The recommendations about theme development we provide in this chapter are developer/default-mode specific.

Create a theme directory

To create the directory for your theme:

Go to <your Magento install dir>/app/design/frontend.

Create a new directory named according to your vendor name: /app/design/frontend/<Vendor>.

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

The folder name conventionally matches naming used in the theme’s code: any alphanumeric set of characters, as the vendor sees fit, is acceptable. This convention is merely a recommendation, so nothing prevents naming this directory in another way.Declare your theme

After you create a directory for your theme, you must create theme.xml containing at least the theme name and the parent theme name (if the theme inherits from one). Optionally you can specify where the theme preview image is stored.

For illustration, see the registration.php file of the Magento Luma theme.Configure images

Product image sizes and other properties used on the storefront are configured in a view.xml configuration file. It is required for a theme, but is optional if exists in the parent theme.

If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, add view.xml using the following steps:

Log in to your Magento server as a user with permissions to create directories and files in the Magento installation directory. (Typically, this is the the Magento file system owner.)

Create the etc directory in your theme folder

Copy view.xml from the etc directory of an existing theme (for example, from the Blank theme) to your theme’s etc directory.

Configure all storefront product image sizes in view.xml. For example, you can make the category grid view product images square by specifying a size of 250 x 250 pixels, here is how the corresponding configuration would look like:

In the .../<theme>/web/images you store the general theme related static files. For example, a theme logo is stored in ...<theme>/web/images. It is likely that your theme will also contain module-specific files, which are stored in the corresponding sub-directories, like .../<theme>/<Namespace_Module>/web/css and similar. Managing the module-specific theme files is discussed in the following sections of this Guide.

During theme development, when you change any files stored here, you need to clear pub/static and var/view_preprocessed directories, and then reload the pages. Otherwise the old versions of files are displayed on the storefront.Your theme directory structure now

In the Magento application, the default format and name of a logo image is logo.svg. When you put a logo.svg image in the conventional location, which is <theme_dir>/web/images directory, it is automatically recognized as theme logo. It is displayed in your store page header once the theme is applied.

In your custom theme, you can use a logo file with a different name and format, but you might need to declare it.

The necessity of declaration depends on whether your theme has a parent theme and its logo image. The following cases are possible:

Your theme does not have a parent theme:
if your logo image name and format is default, logo.svg, there is no need to declare it;
if your logo image name or format is not default, you need to declare it in layout.
Your theme has a parent theme:
if your theme logo image has the same name and format as the parent's theme logo, there is no need to declare it;
if your logo image has different name or format, declare it in layout.
Declaring theme logo

To declare a theme logo, add an extending <theme_dir>/Magento_Theme/layout/default.xml layout.

For example, if your logo file is my_logo.png sized 300x300px, you need to declare it as follows:

Custom Theme Development In Magento 2
Use Custom JavaScript in Magento 2
Configure JavaScript resources in Magento 2
Create Your Custom Theme In Magento 2 (Part-1)
Display product prices in the catalog with and without tax in Magento
Design magento to increase conversion rate!
How to change logo in magento?
How to edit footer links in magento?
How to turn on template path hints in magento?
Magento Design and Content Overview

With more than 22 multi-concept layouts, graceful styles for blog, portfolio, store locator page, Adella promises to transform your site into a dynamic and optimized shopping experience.
After installing the template, you get a great Promo Banner, Super Mega Menu as well as dozens of modern extensions & awesome features to capture the attention of visitors
As a store admin, you will get Frontend Builder to have full permissions to configure/update your online Magento store theme as you want without any coding experiences required

A theme is the most important part of any online store. If the theme of your store is not up to the mark and fails to create an attractive outlook, there’s a fairly high chance, that your customers won’t incline towards coming back. To create a custom theme in Magento 2, follow these steps:

As we know, Magento comes with a default theme. Hence, the most important step in any Magento customization is design changes (both CSS and HTML Changes). Also, Minor text add/edits, layout changes, and other changes are usually required.

The Magento system consists of layout XML files, CSS files, and PHTML files. In a specific PHP application, we have HTML/PHP and CSS files where we create/edit the design/layout of the website. But in case of Magento, we have .PHTML files to do the job HTML files.

Hence, Magento follows MVC architecture and .PHTML file do the job of VIEW.

The abnormal state steps required to include another topic in the Magento framework are the accompanying: Create an index for the topic under application/structure/frontend/<your_vendor_name>/<your_theme_name> . Include an assertion document theme.xml and alternatively make and so forth index and make a record named view.xml to the topic catalog.

Magento Expert Forum is not affiliated with or endorsed by the Magento Ecommerce Project. This forum is set up to share magento skills together. If you have any question or project request, please Contact Us