{"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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-623","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_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}]}}