How to Change the Magento 2 Theme for Specific Modules

In the dynamic world of e-commerce, creating an engaging and visually consistent online store is paramount. The theme of your store plays a pivotal role in shaping the initial impression it leaves on your customers. Magento 2, a widely adopted e-commerce platform, offers the flexibility to customize the look and feel of your store through themes.

But what if you wish to have specific modules exhibit distinct themes?

Well, in this blog we will walk you through the intricacies of changing themes for specific modules in Magento 2, breaking down the process step by step, while also delving into some advanced techniques and insights, so you can create the most majestic conversion-optimized Magento store.

So, without any delay, let’s get started…

Understanding Magento 2 Themes

Before we dive into the technical aspects of altering themes for individual modules, let’s establish a strong foundation by comprehending the nuances of Magento 2 themes.

Magento 2 themes encompass a comprehensive set of templates, layout files, and stylesheets that collectively define the visual and structural elements of your e-commerce website. They play a pivotal role in creating a consistent and engaging user experience for your customers.

Choosing the Right Base Theme

Before you start creating and customizing themes for specific Magento modules, you need to choose the right base theme for your entire store. The base theme will provide the overall look and feel of your store, so it is important to choose a theme that is consistent with your brand and that will meet the needs of your customers. Here’s a detailed approach to this crucial decision:

Access Admin Panel

1.   Go to your Magento store URL and add /admin to the end.
2.   Enter your Magento admin username and password.
3.   Click the Login button.

Navigating to Content

1.   Once you are logged into the Magento admin panel, click on the Content menu item in the left sidebar.
2.   Under the Design section, click on the Configuration menu item.
3.   This will take you to the Design Configuration page.

Choosing the Base Theme

1.   On the Design Configuration page, you will see a list of all of the themes that are installed on your Magento store.
2.   To choose the base theme, click on the Edit button next to the name of the theme that you want to use.
3.   This will open the theme configuration page.
4.   In the Theme section, select the theme that you want to use as the base theme.
5.   Click on the Save button to save your changes.

Testing the Theme

1.   Once you have chosen the base theme, you should test it to make sure that it is working properly.
2.   To do this, go to the front end of your Magento store and view a few different pages.
3.   Make sure that the theme is displaying correctly and that all of the features are working.

Creating and Customizing Themes for Specific Modules

Once your base theme is in place, the next logical step is to create and customize Magento 2 themes for specific modules. This allows you to maintain a cohesive look for your store while introducing module-specific variations.

Here is a detailed guide on how to create and customize themes for specific Magento modules:

Below are the steps to change the theme for a specific module

Method 1

1. Create a new theme directory

• • Navigate to your Magento 2 installation root directory.
  • Inside the app/design/frontend directory, create a new directory for your theme. For example, you can create a directory named [Vendor]/[theme], where [Vendor] is your company or organization name, and [theme] is the name of your theme.

 

2. Register a new theme

• • To register the new theme, create a registration.php file in the theme directory. This file is used to register your theme. Here’s an example of what the registration.php file might look like:

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::THEME,
‘frontend/[Vendor]/[Theme]’,
__DIR__
);

3. Declare your theme

1. • Declaring your custom theme means letting Magento know it exists. It contains basic information about your theme.
   • You need to create a theme.xml file under your theme directory /app/design/frontend/[Vendor]/[Theme]/theme.xml and use the following code:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
<title>[Vendor] [THEME]</title>
<parent>Magento/Luma</parent>
</theme>

4. First, you need to create a custom module and an observer. In your custom module, define the observer in your etc/events.xml file. Here’s an example of what the events.xml file might look like:

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Event/etc/events.xsd”>
<event name=”layout_load_before”>
<observer name=”custom_module_change_theme” instance=”Vendor\Module\Observer\ChangeTheme” />
</event>
</config>

 

5. Now, create the observer class. In this class, you will implement the logic to change the theme for specific modules based on your requirements. Here’s an example of what the observer might look like:

<?php
namespace Vendor\Module\Observer;

use Magento\Framework\App\Request\Http;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\DesignInterface;

class ChangeTheme implements ObserverInterface
{
/** @var Http */
private Http $request;

/** @var DesignInterface */
private DesignInterface $design;

/**
* @param Http $request
* @param DesignInterface $design
*/
public function __construct(
Http $request,
DesignInterface $design
) {
$this->request = $request;
$this->design = $design;
}

/**
* @param Observer $observer
*/
public function execute(Observer $observer): void
{
$pathInfo = $this->request->getPathInfo();

if (substr($pathInfo, 0, 8) === ‘/myroute’) { //add your custom plugin routes here
$this->design->setDesignTheme(‘Vendor/Theme’);
}
}
}

Method 2

1. Set default theme 

• • In your Magento 2 admin panel, navigate to Content > Configuration.
  • Select the website you want to customize.
  • Under the “Themes” section, select the default theme.
  • Save your configuration.

2. Create a new theme directory

• • Navigate to your Magento 2 installation root directory.
  • Inside the app/design/frontend directory, create a new directory for your theme. For example, you can create a directory named [Vendor]/[theme], where [Vendor] is your company or organization name, and [theme] is the name of your theme.

3. Register a new theme

• • To register the new theme, create a registration.php file in the theme directory. This file is used to register your theme. Here’s an example of what the registration.php file might look like:

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::THEME,
‘frontend/[Vendor]/[Theme]’,
__DIR__
);

4. Declare your theme

1. • Declaring your custom theme means letting Magento know it exists. It contains basic information about your theme.
   • You need to create a theme.xml file under your theme directory /app/design/frontend/[Vendor]/[Theme]/theme.xml and use the following code:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
<title>[Vendor] [THEME]</title>
<parent>Magento/Luma</parent>
</theme>

5. Assign the new theme to the module

1. • In your Magento 2 admin panel, navigate to Content > Configuration.
   • Select the store view you want to customize.
   • Under the “Themes” section, select the new theme you’ve just created for the “Default” field.
   • Save your configuration.

6. Create theme files

1. • To customize the appearance of specific modules, you can create theme files in your new theme directory. For instance, if you want to change the look of the “Product Page” module, you can create a new layout file for that module in your theme directory.

1. Navigate to [your-magento-root]/app/design/frontend/[Vendor]/[theme].
2. Create a new directory with the same name as the module you want to customize. For example, if you want to customize the product page, create a directory named Magento_Catalog.
3. Inside the module directory, create a directory named layout. In this directory, you can create XML layout files to customize the module’s appearance.
4. Create a custom XML layout file (e.g., default.xml) and define your custom layout updates for the module. You can specify changes like moving or removing elements, changing styles, or adding new content.
5. I am adding a sample default.xml code in which I am removing the reviews tab from the product details page

<?xml version=”1.0″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<body>
<referenceBlock name=”reviews.tab” remove=”true” />
</body>
</page>

7. Custom style for the specific module

1. • In your custom theme, create a custom CSS file that contains your styles. Place this CSS file in the web/css directory of your theme. For example, if you’re using a custom theme named “Vendor/theme,” your CSS file should be located in:

1. app/design/frontend/Vendor/theme/web/css/custom.css

 

• • You will declare your custom CSS file in your theme’s layout XML file. If you don’t already have a default.xml file, you can create one in the app/design/frontend/Vendor/theme/Magento_Theme/layout directory.

 

1. In your default.xml layout file, add the following code to include your custom CSS file:
   

   <page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
   <head>
   <css src=”css/custom.css” />
   </head>
   </page>

   • Now, you can add your custom styles in the custom.css file that you created in step 2. You can write your CSS rules to style specific elements on your site according to your requirements.

Benefits of Customizing Themes for Specific Modules

There are a number of benefits to customizing Magento themes for specific modules. These benefits include:

• Improved user experience: Customizing the theme of a specific module can improve the user experience by making the module more visually appealing and easier to use. For example, you can customize the colors, fonts, and layout of the module to match the overall look and feel of your store. You can also add custom features and functionality to the module, such as product reviews or social media integration.
• Increased conversions: Customizing the theme of a specific module can help to increase conversions by making the module more relevant to your target audience. For example, if you are selling clothing, you could customize the theme of the product catalog module to match the latest fashion trends. Or, if you are selling software, you could customize the theme of the product description module to highlight the key features and benefits of your software.
• Improved SEO: Customizing the theme of a specific module can help to improve the SEO of your Magento store. For example, you can add custom keywords and phrases to the module’s title and description tags. You can also optimize the module’s content for search engines.
• Reduced development costs: Customizing the theme of a specific module can help to reduce development costs by eliminating the need to develop custom modules. For example, if you need to add a custom feature to a module, you can often do so by customizing the theme of the module instead.

Conclusion

In conclusion, Magento 2 provides a versatile and user-friendly means of changing themes for specific modules, allowing you to craft a unique and visually engaging shopping experience for your customers. By following the comprehensive steps outlined in this guide and integrating advanced techniques and insights, you can make your e-commerce store stand out and offer a personalized experience.

At Folio3, we’ve got your back. As your trusted Magento web development partner, our aim is to help you stand out from the crowd. Ready to give your online store a fresh new look? We’re just a click away!

FAQs

Why do I need to change themes for specific modules in Magento 2?

Customizing themes for specific modules allows you to create a tailored shopping experience, enhancing user engagement and brand identity. It’s about making your store truly unique.

Can I change themes without coding skills?

Yes, you can. Magento 2 offers a user-friendly interface to change themes. However, for in-depth customizations, some coding knowledge might come in handy.

Will changing themes affect my store’s performance?

When done correctly, changing themes for specific modules won’t significantly impact your store’s performance. It’s important to optimize your theme changes for speed and efficiency.

How can Folio3 help with Magento theme changes?

At Folio3, we specialize in Magento web development. Our expert team can guide you through the process, ensuring a seamless transition to new themes, and enhancing your store’s aesthetics and functionality. Contact us today for personalized assistance!