{"id":623,"date":"2019-10-02T05:35:11","date_gmt":"2019-10-02T05:35:11","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/10\/02\/update-layout-using-observer-in-magento-2\/"},"modified":"2025-05-22T15:51:04","modified_gmt":"2025-05-22T10:21:04","slug":"update-layout-using-observer-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/update-layout-using-observer-in-magento-2\/","title":{"rendered":"How to Update Layout Using Observer in Magento 2"},"content":{"rendered":"\n

The default Magento 2 layout can\u2019t be enough to create an attractive and eye-catching storefront. The layout must be in accordance with the business and customer type that helps in gaining more traffic and help in conversion.<\/p>\n\n\n\n

However, to change the layout you need to follow the below solution. I have posted this method to update layout using observer in Magento 2<\/strong><\/em> store.<\/p>\n\n\n\n

Method to Update Layout Using Observer in Magento 2:<\/h2>\n\n\n\n
    \n
  1. Create events.xml<\/strong> file at path [Vendor]\\[Module]\\etc\\frontend\\events.xml<\/strong><\/strong><\/li>\n<\/ol>\n\n\n\n
    <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Event\/etc\/events.xsd\">\n    <event name=\"layout_load_before\">\n        <observer name=\"custom_layout\" instance=\"[Vendor]\\[Module]\\Observer\\UpdateLayoutObserver\" \/>\n    <\/event>\n<\/config><\/pre>\n\n\n\n
    2. Create UpdateLayoutObserver.php<\/strong><\/em> file at path [Vendor]\\[Module]\\Observer\\UpdateLayoutObserver.php<\/strong><\/p>\n\n\n\n
    <?php\n\nnamespace [Vendor]\\[Module]\\Observer;\n\nuse Magento\\Framework\\Event\\ObserverInterface;\nuse [Vendor]\\[Module]\\Helper\\Data;\nuse Magento\\Framework\\Event\\Observer;\n\nclass UpdateLayoutObserver implements ObserverInterface\n{\n    protected $helper;\n\n    public function __construct\n    (\n        Data $data\n    )\n    {\n        $this->helper = $data;\n    }\n\n    public function execute(Observer $observer)\n    {\n        $layout = $observer->getData('layout');\n\n        $currentHandles = $layout->getUpdate()->getHandles();\n        if (!in_array('default', $currentHandles)) {\n            return $this;\n        }\n        $layout->getUpdate()->addHandle('custom_layout');\n        return $this;\n    }\n}<\/pre>\n\n\n\n
    3. Create custom_layout.xml<\/strong><\/em> file at path [Vendor]\\[Module]\\view\\frontend\\layout\\custom_layout.xml<\/strong><\/p>\n\n\n\n
    <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"before.body.end\">\n            <block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"custom_file\" template=\"[Vendor]_[Module]::custom.phtml\"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
    4. Create custom.phtml<\/strong><\/em> file at path [Vendor]\\[Module]\\view\\frontend\\templates\\custom.phtml<\/strong><\/p>\n\n\n\n
    <span> your code\/design <\/span><\/pre>\n\n\n\n
    That\u2019s it.<\/p>\n\n\n\n
    Follow these steps and update the layout of Magento 2 store pages easily.<\/p>\n\n\n\n
    Feel free to share the solution with fellow developers via social media.<\/p>\n\n\n\n
    Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The default Magento 2 layout can\u2019t be enough to create an attractive and eye-catching storefront. The layout must be in accordance with the business and customer type that helps in gaining more traffic and help in conversion. However, to change the layout you need to follow the below solution. I have posted this method to […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-623","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":15248,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/623\/revisions\/15248"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}