Book a Free Audit
Book a Free Audit

Share

Magento 2 theme customization is essential for creating a unique and engaging online store that sets your e-commerce business apart. A well-designed theme enhances aesthetics, improves user experience, and boosts conversions.

With Magento 2 powering 1.2% of all websites on the internet, mastering theme customization can give your e-commerce business a competitive edge.

This guide will cover everything you need to know about creating and using custom Magento themes, from a step-by-step tutorial and custom theme development benefits to following best practices for implementation and collaborating with a Magento development agency.

Things You’ll Need for Custom Theme Development in Magento 2 

To create a custom theme in Magento 2, ensure you have the following:

  • A Working Magento 2 Installation: Ensure Magento 2 is installed and running on your server.
  • Basic Knowledge of PHP, HTML, CSS, JS, and XML: Understanding these technologies is crucial for customizations.
  • Familiarity with Magento 2 ’s File Structure: Knowing where Magento 2  stores its files and how they are organized will make the process smoother.

Proper preparation can save you time and prevent issues during Magento store development. It ensures you have all the necessary tools and knowledge, reducing the chances of errors.

Steps to Customize Your Magento Theme

Customizing a Magento 2  theme involves several steps. Here’s a detailed guide to help you through the process.

Step 1: Create Theme Directory

The first step is to create a directory and relevant subdirectories for your custom theme. This directory will contain all the files and theme folders.

Location: app/design/frontend/<Vendor>/<Theme>

  • <Vendor> is your namespace, which is typically your company name or a unique identifier.
  • <Theme> is the name of your theme.

Example:

app/design/frontend/MyCompany/MyTheme

Step 2: Declare Your Theme

Declare your theme by creating a theme.xml file in the theme directory. This file provides basic information about your theme.

  • Path: app/design/frontend/<Vendor>/<Theme>/theme.xml

Example theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:Config/etc/theme.xsd">
    <title>Your Theme Title</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Step 3: Add Theme Composer Packages

Create a composer.json file to manage your theme dependencies. This file tells Magento 2  which packages are required for your theme.

  • Path: app/design/frontend/<Vendor>/<Theme>/composer.json

Example composer.json:

{
    "name": "vendor/theme",
    "description": "Magento 2 custom theme",
    "require": {
        "php": "~7.0.0||~7.1.0||~7.2.0",
        "Magento /theme-frontend-blank": "100.0.*"
    },
    "type": "Magento-theme",
    "version": "1.0.0",
    "license": "OSL-3.0",
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 4: Add registration.php File

Register your theme by creating a registration.php file. This file is crucial as it tells Magento 2  that your theme exists.

  • Path: app/design/frontend/<Vendor>/<Theme>/registration.php

Example registration.php:

<?php
\Magento \Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/Theme',
    __DIR__
);

Step 5: Configure Custom Theme

Configure your theme by adding a default.xml file in the Magento_Theme/layout directory. This file defines the layout of your theme.

  • Path: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default.xml

Example default.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header">
            <block class="Magento\Framework\View\Element\Template" name="custom.header" template="Magento_Theme::html/header.phtml" />
        </referenceContainer>
    </body>
</page>

Step 6: Configure Product Image Properties

Define image properties by creating an etc/view.xml file within your theme directory. This configuration file format is how product images are displayed.

  • Path: app/design/frontend/<Vendor>/<Theme>/etc/view.xml

Example view.xml:

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_base_image" type="image">
                <width>300</width>
                <height>300</height>
            </image>
        </images>
    </media>
</view>

Step 7: Create Directories for Theme Static Files

Create directories to Magento store CSS, JavaScript, and image files.

  • CSS: app/design/frontend/<Vendor>/<Theme>/web/css/source
  • JavaScript: app/design/frontend/<Vendor>/<Theme>/web/js
  • Images: app/design/frontend/<Vendor>/<Theme>/web/images

These directories will hold the static files used by your theme.

Step 8: Declare Theme Logo

Add your logo by placing it in the web/images directory and referencing it in the default.xml.

  • Path: app/design/frontend/<Vendor>/<Theme>/web/images/logo.svg

Example default.xml snippet:

<referenceBlock name="logo">
    <arguments>
        <argument name="logo_file" xsi:type="string">images/logo.svg</argument>
    </arguments>
</referenceBlock>

Read Also: Custom Magento Theme Design [Steps, Tips & Benefits]

How to Extend Magento 2 Theme Files?

To extend theme files, copy the file from the parent theme into your custom theme directory and modify it as needed. This approach maintains the original functionality while allowing for customizations.

Example: Extending Header

  1. Copy header file from parent theme:
  • Source: vendor/Magento/theme-frontend-blank/Magento_Theme/templates/html/header.phtml
  • Destination: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/html/header.phtml
  1. Modify the copied file as needed.

How to Override Theme Layouts in Magento 2?

Override layouts by creating a layout file with the same name in your custom theme’s layout directory. This allows you to change the structure and design of the page without altering the core files.

Example: Overriding Homepage Layout

  1. Create an extending layout file:
  • Path: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/cms_index_index.xml
  1. Add custom layout XML:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Cms\Block\Block" name="home-page-banner">
                <arguments>
                    <argument name="block_id" xsi:type="string">home_page_banner</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

How to Create a Magento 2 Child Theme?

Creating a Magento child theme name is similar to creating a custom theme but with a parent theme name specified in theme.xml. This inherits all the properties of the parent theme while allowing additional customizations.

Steps to Create a Child Theme

Step 1: Create Theme Directory

  • Path: app/design/frontend/<Vendor>/<ChildTheme>

Step 2: Declare Child Theme in theme.xml

  • Path: app/design/frontend/<Vendor>/<ChildTheme>/theme.xml

Example theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:Config/etc/theme.xsd">
    <title>Child Theme Title</title>
    <parent>Vendor/ParentTheme</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Step 3: Register Child Theme

  • Create registration.php in the child theme root directory:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/ChildTheme',
    __DIR__
);

Step 4: Add Customizations 

Extend or override parent theme files as needed.

Benefits of Custom Magento 2 Theme Development

Creating a custom Magento 2  theme offers numerous benefits that can significantly enhance your Magento store’s performance and user experience. Here are the key reasons why you should consider custom Magento theme development:

1. Branding and Visual Identity

A Magento custom theme allows you to create a unique and cohesive visual identity for your brand. This is crucial in making a strong impression on your visitors and ensuring your brand stands out.

  • Consistency: Maintain a consistent look and feel across all pages.
  • Customization: Tailor colors, fonts, and layouts to match your brand guidelines.
  • Recognition: Build brand recognition with a distinct and memorable Magento design.

2. Improved User Experience (UX)

An attractive, user-friendly design can significantly improve the user experience, increasing engagement and satisfaction.

  • Navigation: Design intuitive navigation to help users find what they need quickly.
  • Responsiveness: Ensure your theme is fully responsive, providing seamless years of experience across all devices.
  • Accessibility: Implement accessibility features to cater to all users, including those with disabilities.

3. Differentiation from Competitors

A custom theme can help differentiate your Magento store from competitors who may be using generic themes.

  • Unique Design: Stand out with a unique design that reflects your brand’s personality.
  • Tailored Features: Incorporate custom features and functionalities that address your specific business needs.
  • Engagement: Create a visually appealing website that captures and retains visitors’ attention.

4. Optimized for Conversion

A custom theme allows you to optimize your store’s design for better conversion rates, leading to increased sales and revenue.

  • Call-to-Action (CTA): Strategically place CTAs to guide users toward making a purchase.
  • Landing Pages: Design effective landing pages that drive conversions.
  • Performance: Optimize your theme for fast loading times, reducing bounce rates.

5. SEO Advantages

A custom theme can be optimized for search engines, helping you achieve better rankings and drive organic traffic to your site.

  • Clean Code: Ensure your theme has clean, semantic code that search engines can easily crawl.
  • Meta Tags: Optimize meta tags, titles, and descriptions for better SEO performance.
  • Mobile-Friendly: Google’s algorithm favors mobile-friendly sites, and a responsive custom theme can improve your SEO rankings.

6. Scalability and Flexibility

A custom Magento 2  theme provides the scalability and flexibility needed to grow and adapt to your evolving business needs.

  • Future-Proof: Design a theme that can easily accommodate new features and updates.
  • Customization: Easily modify and extend your theme as your business grows.
  • Integration: Seamlessly integrate with third-party extensions and services to enhance your store’s functionality.

Recommended Read: Magento Plugin Development 

Best Practices for Magento 2 Custom Themes

1. Adhering to Magento 2 Coding Standards

Following Magento’s coding standards ensures your custom theme is compatible with Magento 2  updates and third-party extensions.

  • Consistency: Use consistent coding standards to make your code readable and maintainable.
  • Tools: Use tools like PHP CodeSniffer and Magento 2’s coding standards to check your compliance code automatically.
  • Documentation: Refer to Magento 2 ’s official coding standards to ensure your theme adheres to the recommended practices.

2. Extending New XML Layout Files

Instead of directly modifying core layout files, extend them. This helps in maintaining the upgradeability of your Magento 2  installation.

  • Override Carefully: Place your custom layout XML files in your theme’s layout directory to override parent theme layouts.
  • Maintain Upgradability: By extending rather than modifying core files, you ensure that future Magento 2  updates won’t break your customizations.

Example:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Cms\Block\Block" name="custom.block">
                <arguments>
                    <argument name="block_id" xsi:type="string">custom_block</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

3. Using Separate LESS Files for Easier Debugging

LESS files are used for styling in Magento 2. Keeping your LESS files organized and separate can make debugging and maintenance easier.

  • Modularity: Divide your LESS files into multiple smaller files based on their purpose (e.g., variables, mixins, components).
  • Imports: Use @import statements to include these files in your main LESS file.

Example Directory Structure:

web/css/source
├── _variables.less
├── _mixins.less
├── _components.less
└── _layout.less

4. Keeping Text Translatable

Ensure that the text in your theme is translatable to support multiple languages and locales.

  • Translation Function: Use Magento’s __() function for all text strings.
  • Following example:
<block class="Magento\Framework\View\Element\Template" name="custom.block">
    <arguments>
        <argument name="block_title" xsi:type="string"><?php echo __('Custom Block Title'); ?></argument>
    </arguments>
</block>
  • Language Packs: Make sure your theme supports Magento 2’s language packs for easy translation.

5. Adding Styling Within the Module, Not the Theme

When adding custom styling for specific modules, include the styles within the module’s directory rather than the theme. This makes the styles easier to maintain and ensures they are loaded only when the module is active.

  • Module Directory: Place your custom styles in the module’s view/frontend/web/css directory.
  • Example Structure:
app/code/YourVendor/YourModule/view/frontend/web/css
├── _module_styles.less
  • Loading Styles:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="YourVendor_YourModule::css/_module_styles.less"/>
    </head>
</page>

Work with Magento Theme Customization Agency: Klizer

Investing in a custom Magento 2 theme offers significant ROI by enhancing your brand identity, improving user experience, and boosting conversions. Custom themes help differentiate your Magento store, engage customers, optimize SEO, and drive sales.

Partner with Klizer, experts in custom Magento 2 theme development. With an extensive experience of over 18 years, our experts ensure a high-performing, tailored design for your online store’s success. 

Contact Klizer today to start your custom Magento theme customization project.

FAQ

What is the default theme in Magento 2?

The default theme in Magento 2  is the Luma theme. It serves as a demonstration theme showcasing the capabilities and layout of a Magento 2  store. Expert Magento developers often use the Luma theme as a starting point for creating custom themes.

Why should I use a custom theme instead of the default Luma theme?

Using a custom theme allows you to:

  • Establish Brand Identity: Customize the look and feel to match your brand.
  • Improve UX: Design a user interface tailored to your customer’s preferences.
  • Stand Out: As a store owner differentiate your website from competitors using unique features and layouts.
  • Optimize Performance: Customize code and resources for high Adobe Commerce performance and SEO.

How do I override the default Magento 2  theme files?

To override the default theme files, follow these steps:

  • Extend Layout Files: Create a new theme layout XML file in your custom theme directory to extend the default layout.
  • Add Custom CSS Files: Place your CSS files in the web/css directory of your custom theme.
  • Override Custom Templates: Copy the combination of custom template files from the default theme into your custom theme directory and modify them as needed.

What are the benefits of following Magento 2  coding standards?

Adhering to Magento 2  coding standards ensures:

  • Compatibility: Your custom theme remains compatible with Magento 2  updates and third-party extensions.
  • Maintainability: Consistent code is easier to read, debug, and maintain.
  • Performance: Standards-compliant code often leads to better performance and fewer bugs.

How can I make sure my custom theme supports multiple languages?

To make your custom theme support multiple languages:

  • Use Translatable Text: Wrap all text in the __() function.
  • Provide Language Packs: Create language packs for different locales and place them in the i18n directory of your theme.
  • Example:
<block class="Magento\Framework\View\Element\Template" name="custom.block">
    <arguments>
        <argument name="block_title" xsi:type="string"><?php echo __('Custom Block Title'); ?></argument>
    </arguments>
</block>

How do I ensure my theme is responsive and mobile-friendly?

To ensure your custom theme is responsive:

  • Use Media Queries: Include media queries in your CSS files to adjust styles for different screen sizes.
  • Responsive Design: Follow responsive or visual design principles in your layout and template files.
  • Test on Multiple Devices: Test your theme on various devices and screen sizes to ensure it looks good everywhere.

Yassar Saleh

Yassar Saleh is a seasoned Technical Account Manager at Klizer with over 10 years of experience in the technology industry. His extensive expertise in software development and customer support enables him to effectively collaborate with enterprise clients, ensuring the successful implementation and adoption of complex technical solutions.

Get in Touch

Get Expert Advice

At Klizer, we bring over 18 years of specialized expertise in ecommerce website development and design.

Talk to an Expert

Enterprise eCommerce solutions for B2B Industries

Youtube Linkedin X-twitter Instagram Facebook
Industries
Services
Our Work
About Us
News Room
Careers
Legal

© Copyright 2024 Klizer. All Rights Reserved

Book a Free Audit
Book a Free Audit