How to Change the Magento 2 Theme for Specific Modules

Last Updated | September 3, 2024

Table of Contents

In the fast-paced world of e-commerce, having an attractive and consistent online store is crucial.

Your store’s theme is key to making a strong first impression on customers. Magento 2, a popular e-commerce platform, lets you easily customize your store’s appearance with different themes.

But what if you want certain parts of your store to have different themes?

See Also: Top Free Magento Themes 2024

In this blog, we’ll guide you step by step through how to change themes for specific modules in Magento 2. We’ll also share some advanced tips to help you create a beautiful, conversion-focused Magento store.

Let’s dive in and 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 step-by-step guide to making an important decision in your Magento 2 store:

Access the Admin Panel

Navigate to Admin: Open your web browser, go to your Magento store URL, and add /admin at the end.
Login: Enter your Magento admin username and password, then click the “Login” button to access the backend.

Navigating to Content

Access Content Menu: Once logged into the Magento admin panel, find the left sidebar and click on the “Content” menu.
Open Design Configuration: Under the “Design” section, select “Configuration.” This will take you to the Design Configuration page.

Choosing the Base Theme

View Installed Themes: On the Design Configuration page, you’ll see a list of all installed themes in your Magento store.
Select Your Base Theme: Click the “Edit” button next to the theme you wish to set as your base. This will bring you to the theme configuration page.
Apply the Theme: In the “Theme” section, choose your desired base theme from the dropdown menu. Click the “Save” button to apply your changes.

Testing the Theme

Verify Theme Performance: After selecting the base theme, it’s crucial to test it for proper functionality.
Check Frontend Display: Visit the frontend of your Magento store and navigate through various pages. Ensure the theme displays correctly, and all features function as expected.

This thorough process ensures that your Magento store not only looks great but also functions smoothly with the selected theme.

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’s a comprehensive guide on how to create and customize themes for specific Magento modules, including the steps to change the theme for a particular 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

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.

3. Register a new theme

<?php

use \Magento\Framework\Component\ComponentRegistrar;

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

4. Declare your theme

– 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

– 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

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.

– Navigate to [your-magento-root]/app/design/frontend/[Vendor]/[theme].

– 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.

– Inside the module directory, create a directory named layout. In this directory, you can create XML layout files to customize the module’s appearance.

– 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.

– 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

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:

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.

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

Customizing Magento themes for specific modules offers several advantages:

– Better User Experience: Customizing a module’s theme can make it more attractive and user-friendly. You can match the module’s colors, fonts, and layout to the overall design of your store and even add custom features like product reviews or social media links.

– Higher Conversions: Tailoring a module’s theme to your audience can boost sales. For instance, if you sell clothing, you could adjust the product catalog module to reflect the latest fashion trends. If you sell software, you could highlight key features in the product description module.

– Improved SEO: Customizing a module’s theme can enhance your store’s SEO. You can include relevant keywords in the module’s title and description tags and optimize the content for search engines.

– Lower Development Costs: Customizing a module’s theme can save money by reducing the need for custom module development. Often, you can add custom features directly through theme customization rather than creating a new module.

Conclusion

Magento 2 makes it easy to change themes for specific modules, helping you create a unique and visually appealing shopping experience. By following the steps in this guide and using advanced tips, you can make your e-commerce store stand out and offer a personalized experience.

At Folio3, we’re here to support you as your trusted Magento development partner. Want to give your online store a fresh look? We’re just a click away!

FAQs

1. Can I change the theme for just one specific module in Magento 2?

Yes, you can change the theme for a specific module in Magento 2 by customizing the module’s layout and template files. This allows you to apply different styles and designs to individual parts of your store.

2. Will changing the theme for a specific module affect my entire Magento store?

No, changing the theme for a specific module only affects that particular module. The rest of your store will retain its original theme, allowing for a consistent look while customizing certain features.

3. Can I revert back to the original theme after customizing a module in Magento 2?

Yes, you can easily revert back to the original theme by restoring the default settings in the module’s configuration. This allows you to experiment with customizations without making permanent changes.

Get a Free Consultation

MEXICO OFFICE

CANADA OFFICEE

UAE OFFICE