How to Set a Theme on a Specific Page in Magento 2

Magento 2 offers powerful theming capabilities that allow you to customize the look and feel of your online store.

One of the handy features it provides is the ability to set a custom theme for a specific page.

This can be particularly useful if you want to give a unique design to a specific landing page, category page, or any other page on your e-commerce website.

In this guide, we will walk you through the steps to set a custom theme on a specific page in Magento 2.

How to Set a Theme on a Specific Page in Magento 2

Step 1: Create a routes XML file

Here, we have a module named Mageants_Customize with routes.xml in Mageants/Customize/etc/frontend/routes.xml

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
        <router id="standard">
            <route id="mageants" frontName="mageants">
                <module name="Mageants_Customize"/>
            </route>
        </router>
    </config>

Step 2: Create a controller

Create Index.php in app/code/Mageants/Customize/Controller/Index directory.

    <?php
    /**
    * Copyright © All rights reserved.
    * See COPYING.txt for license details.
    */
    declare(strict_types=1);

    namespace Mageants\Customize\Controller\Index;

    use Magento\Framework\App\Action\HttpGetActionInterface;
    use Magento\Framework\Controller\ResultInterface;
    use Magento\Framework\View\Result\PageFactory;

    class Index implements HttpGetActionInterface
    {
        /**
        * @var PageFactory
        */
        protected $resultPageFactory;

        /**
        * Constructor
        *
        * @param PageFactory $resultPageFactory
        */
        public function __construct(PageFactory $resultPageFactory)
        {
            $this->resultPageFactory = $resultPageFactory;
        }

        /**
        * Execute view action
        *
        * @return ResultInterface
        */
        public function execute()
        {
            return $this->resultPageFactory->create();
        }
    }

Step 3: Create an event.xml

we create an events.xml file to capture the layout load before event Mageants/Customize/etc/events.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <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="mageants_customize_set_theme_mageants_page" instance="Mageants\Customize\Observer\SetThemeForCustom"/>
        </event>
    </config>

Step 4:Create an observer class file

mageants_customize_set_theme_for_debug SetThemeForDebug.php Path : “Mageants/Customize/Observer/SetThemeForCustom.php”

    <?php declare(strict_types=1);
    namespace Mageants\Customize\Observer;

    use Magento\Framework\App\Request\Http;
    use Magento\Framework\Event\Observer;
    use Magento\Framework\Event\ObserverInterface;
    use Magento\Framework\View\DesignInterface;
    class SetThemeForCustom implements ObserverInterface
    {
        /** @var Http */
        private $request;

        /** @var DesignInterface */
        private $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) === '/mageants') {
                $this->design->setDesignTheme('Magento/luma');
            }
        }
    }

Inside the execute method, you can add your custom condition for debugging. If the condition is met, we set a custom theme using $this→design→setDesignTheme().

Step 5: Create a layout file

Create mageants_index_index.xml in app/code/Mageants/Customize/view/frontend/layout directory with the following code.

    <?xml version="1.0" ?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block name="index.index" class="Mageants\Customize\Block\Index\Index" template="Mageants_Customize::index.phtml"/>
            </referenceContainer>
        </body>
    </page>

Step 6: Create a templates file

Create index.phtml in app/code/Mageants/Customize/view/frontend/templates directory with the following code.

    <h2>specific theme for this page</h2>

Now execute the below command and go to the system configuration page:

    php bin/magento s:up
    php bin/magento s:d:c
    php bin/magento s:s:d -f
    php bin/magento c:c

Result:-

Recommended Read:-

How To Create Custom Theme In Magento 2

The Powerful Benefits Of Hyvä Theme For Magento Store

Top 7 Magento 2 Responsive Themes For ECommerce Sites

MageAnts Hyvä Theme Compatible Magento 2 Extensions To Boost Your Store Sales

Conclution:

In conclusion, you can effectively set a unique theme for a specific page in Magento 2, enabling you to tailor the design and user experience to meet your specific needs and preferences.

We hope, this tutorial will be helpful for you.

Thank you!

How to Set a Theme on a Specific Page in Magento 2

How to Set a Theme on a Specific Page in Magento 2

Step 1: Create a routes XML file

Step 2: Create a controller

Step 3: Create an event.xml

Step 4:Create an observer class file

Step 5: Create a layout file

Step 6: Create a templates file

Result:-

Conclution:

siddharth