Hello Magento Friends,
Sometimes you come into a situation where you need to customize the appearance of CMS pages based on the customer log-in status. For example, you may display a page in Luma theme to guest customers and the same page will be displayed in Hyvä Themes to the logged-in customers. This will enhance the front-end shopping experience of customers and user engagement.
To achieve the above scenario, follow the steps given below.
Steps to Change Theme Programmatically for Specific CMS Page Based on Whether Customer is Logged in or Not in Magento 2:
Step 1: First you need to create a CMS Page. For that, follow the below guide.
How to Add a New CMS Page in Magento 2
Step 2: After successfully creating a CMS page, we need to create an “event.xml“ file inside our extension at the following path.
app\code\Vendor\Extension\etc\frontend\event.xml
Then add the code below
<?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="controller_action_predispatch_cms_page_view">
<observer name="change_theme_based_on_login" instance="Vendor\Extension\Observer\ChangeThemeObserver" />
</event>
</config>
Step 3: After that, we need to create a “ChangeThemeObserver.php” file inside our extension at the following path.
app\code\Vendor\Extension\Observer\ChangeThemeObserver.php
And add the code as given below
<?php
namespace Vendor\Extension\Observer;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Theme\Model\View\Design;
use Magento\Framework\App\RequestInterface;
use Magento\Customer\Model\Session as CustomerSession;
class ChangeThemeObserver implements ObserverInterface
{
protected $design;
protected $request;
protected $customerSession;
public function __construct(
Design $design,
RequestInterface $request,
CustomerSession $customerSession
) {
$this->design = $design;
$this->request = $request;
$this->customerSession = $customerSession;
}
public function execute(Observer $observer)
{
// Check if this is the specific CMS page
$cmsPageId = 'your-cms-page-Id'; // Replace with your CMS page's ID
if ($this->request->getFullActionName() === 'cms_page_view' &&
$this->request->getParam('page_id') === $cmsPageId
) {
$theme = $this->customerSession->isLoggedIn()
? 'Magento/luma' // Replace with the theme for logged-in users
: 'Hyva/default'; // Replace with the theme for guest users
$this->design->setDesignTheme($theme, 'frontend');
}
}
}Conclusion:
By following the above steps, you can change the theme of a specific CMS page based on customer login status. If you encounter any error feel free to let us know through the comment section or contact us for more Magento 2 customizations.
Happy Coding!
