BLOG . Adobe Commerce . Magento

A custom Magento theme design is tailored to your online store, reflecting your unique business requirements, brand identity, and user experience objectives. Unlike purchased themes available from various marketplaces, which can be customized but are not exclusive to any particular store, a custom theme offers greater design flexibility and personalization. This strategy can enhance customization options and ensure long-term cost efficiency compared to using a pre-made theme.

In this guide, we will walk you through all the steps of creating and using custom Magento themes. You will also learn about the perks and best practices for creating custom theme designs that make your ecommerce store stand out. 

Creating A Custom Magento Theme From Scratch

Magento has empowered businesses to impart seamless customer experience and ensure store competitiveness in the global market. This is especially possible by opting for custom Magento theme designs. 

Here is a step-by-step tutorial to create a custom theme with Magento for your online store: 

Step 1: Create A Theme Directory 

The first step in the custom Magento theme development process is to create a theme directory. The directory is a file structure containing all the required assets and files for your custom theme. 

Go to the frontend directory in the root directory. Then create a directory with the vendor name of your new theme. For example, here we choose the theme vendor name Klizer so the path will be:

/app/design/frontend/<YourVendor>/

Now, create another directory with your Magento theme name, the Klizer directory. For example, here we are using the name m2-theme. It will look like 

/app/design/frontend/<YourVendor>/<YourThemeName>

After creating the theme folder, it is time to move to the next step the declaration of the theme.

Step 2: Declaration Of Your Theme

Create the theme.xml file using the following file code from the snippet.

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>YourThemeTitle</title>
  <parent>Magento/Luma</parent>
  <media>
     <preview_image>media/preview.png</preview_image>
  </media>
</theme>  

Here, use the vendor and theme name in the title tag. Change it according to your custom name. We are using the Luma theme as a parent theme. Magento will look for all the unfound static and template files in the parent theme. Change the name in the parent tag according to your custom preference.

You can even declare any images and other media files in the media tag. In the above example, the preview.jpg image is declared in the media tag and the preview image is present in the media directory. The complete path of the image will be app/design/frontend/Klizer/m2-theme/media/preview.jpg

Remove the media tags if there is no image to declare then you can remove the media tags.

Read Also: Magento Website Development 

Step 3: Add Composer Package To Your Custom Theme 

The next step is to add the composer.json file to your theme to convert it into a package. The complete path to add the file will be:

app/design/frontend/Klizer/m2-theme/composer.json.

{
  "name": "<YourVendor>/<YourThemeName>",
  "description": "A custom Magento 2 theme.",
  "type": "magento2-theme",
  "version": "1.0.0",
  "license": ["OSL-3.0", "AFL-3.0"],
  "require": {
    "php": "^7.2 || ^8.0",
    "magento/framework": "^101.0 || ^102.0"
  },
  "autoload": {
    "files": ["registration.php"]
  }
}

This step will allow you to manage all the dependencies easily and simplify the distribution and installation process and it’s not compulsory. 

Step 4: Register your theme in Magento

Add the registration.php file to your theme directory to register your theme in Magento. The complete path will be app/design/frontend/Klizer/m2-theme/registration.php.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<YourVendor>/<YourThemeName>',
    __DIR__
);

Step 5: Configure Your Custom Theme 

After completing all the above steps successfully,  activate your theme and apply it to your live store. Go to the backend of Magento2 and look for the Content tab. Here you have to look for your custom theme name in the list under the “Themes” section. There will be default themes like the Luma theme and Blank Theme in the list.

Once you’ve added your theme to the file system, everything is in place for you to activate your theme and apply it to your store. Go to the Magento 2 backend, Content → Design → Themes. Make sure your theme appears on this list.

When you see your theme in this list, go to Stores → Configuration → Design and select your newly created theme. After selecting your theme, click the “Save Config” button, as shown below.

Click on the “Save Config” option and then look for the System tab. Go to “Cache Management” and click on the “Flush Magento Cache” to complete the process successfully.

Step 6: Configure The Properties Of The Image

The next step is to configure the image sizes of the catalog and all the other images in your custom theme. You will need the view.xml file to configure everything. 

It is necessary as the unique design contains product image sizes that are different from the sizes in the parent theme.  The view.xml configuration file will help you configure all the product image sizes.

For example, you can specify the size of the product catalog grid view as a square by adjusting the height and width to 300 pixels. The configuration will look like the following code:

<images module="Magento_Catalog">
   <image id="category_page_list" type="small_image">
      <width>240</width>
      <height>300</height>
      <constrain>true</constrain>
      <aspect_ratio>false</aspect_ratio>
      <frame>false</frame>
      <transparency>false</transparency>
      <background>ffffff00</background>
   </image>
</images>

Step 7: Create The Directories For Static Files

There are several static files in your theme like style, font, java scripts, and images. Create subdirectories for each file type in the web directory in the theme folder. The folder structure of your custom theme will look like the following structure:

/app/design/frontend/<YourVendor>/<YourThemeName>
    ├── media
    │   └── m2-theme-image.jpg
    ├── web
    │   ├── css
    │   │   ├── source
    │   │   ├── fonts
    │   │   ├── images
    │   │   └── js
    │   └── etc
    │       └── view.xml
    └── Magento_Theme
        └── layout
            └── default.xml

Step 8: Declaration Of Theme Logo In Your Own Theme

Create Magento_Theme and layout directories in the theme directory. The complete path will be /app/design/frontend/Klizer/m2-theme/Magento_Theme/layout.

Modify the code of default.xml and add it to the layout directory. The complete path will be: 

/app/design/frontend/Klizer/m2-theme/Magento_Theme/layout/default.xml

Add your theme logo name and image file in the default.xml file. Try adjusting its height and width according to your custom needs. The default format is SVG but you can use different file formats like JPG, PNG, etc., to declare your logo.

Step 9: Inheritance Of The Theme

The theme inheritance will allow you to extend the existing theme quickly and minimize your maintenance efforts. Consider using the current theme as a base for custom Magento theme development or complete minor upgrades to your web store like festival decoration, holiday sales, etc. Extend the files of existing themes rather than copying and modifying large themes and XML files.

The latest version of Magento comes with an inheritance feature based on a fallback mechanism. If a view file is not found in the extended default theme directories of your custom theme, the system will search through the default module themes.

Extending the default theme like Luma and Black is a good strategy rather than directly changing the Luma and Blank theme files. The updates can override the changes in these files. It is best to apply a new theme using the default theme as the parent and then go through the custom Magento theme customization process.

Step 10: Perform Changes In Theme Style Using LESS 

LESS is a preprocessor like CSS that you can use to modify the design elements in your custom theme according to your project needs.

You can change the background color, margin, padding, and other elements in the blocks of the Less file to give a unique appearance and enhance the overall user experience. Create a LESS file and place its source subdirectory under the CSS subdirectory.

The complete path for the custom.less file will be:

 app/design/frontend/Klizer/m2-theme/web/css/source/cw-theme.less

Step 11: Add Basic Theme Layout Elements To Your Custom Theme 

Add the common containers like header, footer, etc., to your custom theme for your new Magento store. Create template files for all the elements and them to the default.xml file of your custom theme.

Step 12: Override The Theme Layout

You have to put the layout file with the same name in the following path:

/app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml

To override the page layout files, use page_layout as the directory name instead of layout.

Read Also: Top 10 Magento Ecommerce Agencies 

Benefits of Using a Custom Theme Design for Your Business 

Improved Branding

• The top advantage of using custom templates rather than a simple Magento theme is developing a unique look for your digital solution. 
• With a custom theme, you have full control over the theme layouts, elements, and other items to grow your brand identity in the market.

Better Website Performance

• The custom themes are optimized for better Magento performance optimization of your online store so it loads faster and offers a smooth browsing experience to all your customers. 
• This will further lead to increased customer satisfaction which will further lead to higher conversions.

Third Party Tool Integration

• The custom themes are compatible with several third-party extensions that allow you to update the functionality of your store without any unnecessary hassle. 
• Some common third-party extensions are payment gateways, shipping providers, social media integrations, etc. 
• With these extensions, developers can easily adapt to new changes that will arise as your business grows with time.

Enhanced SEO Capabilities

• The custom development allows the Magento developers to optimize the theme of your online store for SEO. With proper Magento SEO, your store will enjoy improved ranking and visibility on popular search engines.

Top 3 Tips For Customizing The Magento Theme

Create A Responsive Website

A responsive website is the key to attracting more customers and boosting the conversion rate. 

Use all the best responsive design practices like flexible images, media queries, fluid grids, etc., to enhance the base layout and create a unique online presence for your store.

Customize All The Elements

Customizing the elements like product pages, product descriptions, header, footer and any other elements on your website will give a unique appearance to your online store. Address the customer issues by offering custom design and functionality to retain them in the longer run for better growth.

Pick elements from a combination of custom templates and add them to your online store to further enhance its capabilities and increase customer satisfaction.

Conduct Robust Testing

Once the theme is ready, it is important to conduct robust testing to screen all the issues and bugs. If there are issues related to any procedure or element, then create a bug report to address everything. Test the design on multiple devices and browsers to ensure that it is working properly.

With proper testing and debugging, Ensure that the online store is working as intended for your customers.

Partner With Magento Theme Development Company

With over 18 years of experience with open-source Magento technology, the proficient developers at Klizer have the right tools to create custom solutions for your brand. The theme will revolve around your brand’s custom needs and improve your digital presence.

Contact our in-house team for detailed information on our services and answers to all your questions. We are fully equipped to handle your Magento project and offer result-oriented solutions.

FAQs

What is the duration of ongoing support and maintenance provided by Klizer after project completion?

For Magento Fixed Bid or Project-based arrangements, we provide a complimentary 30-day support period post-launch, exclusively for bug fixes; no new features are developed during this time. 

Clients can opt for additional support through a Time and Material (T&M) model, with a minimum of 100 hours of support valid for at least 60 days. Moreover, we offer retainer engagements tailored to the client’s needs, providing ongoing support where developers are fully dedicated to the project. 

Hourly rates for support are $95, while retainer pricing is customized based on individual requirements, which can be discussed further during a call.

What’s the default Magento theme?

Easy Steps to Configure Magento’s Default Theme:

Magento comes with two default themes: Luma, which is more demonstrative, and Blank, which is a foundation for custom themes. Applying the default Magento theme is simple and ideal for beginners. Users can customize the Blank theme to create a unique and personalized online store.

How do I customize the Magento 2 theme?

Configure the theme in the Magento admin panel.

To apply the theme, navigate to Admin->Content->Design->Configuration. On your store view, click Edit, and a page with design configuration will appear on the Default Theme tab. In the Applied Theme drop-down, select your newly created theme and click Save Configurations.

What is the distinction between Magento themes and modules?

While a module is entirely code-based and extends the platform’s behavior, a theme alters its appearance, and a language package is used to translate text in your Magento 2 app.

How do Magento themes work?

A theme is a Magento application component that creates a consistent look and feel (visual design) for entire application areas through the use of custom templates, layouts, styles, or images. Themes are intended to override or customize view layer resources that were initially provided by modules or libraries.