How to Insert a Widget into Sidebar in Magento 2

Gaurav Jain

4 years ago

Hello Magento Friends ?,

Welcome to Magento Tutorials by MageComp. Today I will show How to Insert a Widget into Sidebar in Magento 2. Check out our previous blog, How To Create 301 Redirect In Magento 2.

With the XML file in Magento 2, you can place CMS blocks at any position on the page and manage page layout. Inserting a widget into the sidebar can be done with two elements: set up a widget and set up a layout update.

How to Insert a Widget into Sidebar in Magento 2:

Set up a Widget: Widget is the powerful functionality of Magento 2 which can contain static or dynamic content at the storefront to improve user experience. Links for category page, product page, or content page can be added to a widget.

Step 1: From the admin panel, navigate to Content > Elements > Widgets

Step 2: Click the Add Widget button available in the upper-right corner.

Step 3: Under the Settings option:

In the Type field, select CMS Static Block.
In the Design Theme field, choose the present theme.

Step 4: Click Continue,

Step 5: Under the Storefront Properties option:

Widget Title – Enter the title for internal use.
Assign to Store Views – Select All Store View or specific store view.
Sort Order – Set the order of the block where zero indicates the top value.

Step 6: Under the Layout Updates option, click Add Layout Update.

Step 7: In the Display on field, choose the page. If it set to Specified Page, you need to select the page and container where the block is to be placed.

Step 8: From the left panel select Widget Options. Click the Select Block button and choose the block where you want to place it.

Step 9: At last, click Save.

Make sure to flush the cache. Run to the store frontend to verify the position of the block.

Set up a Layout Update: You need to make a layout update to the XML file in order to insert a widget into the sidebar in Magento 2. This will help you easily place the CMS Static Block at different positions on the page.

First, you need to create an XML file at the below path:

app/design/frontend/Vendor/Theme/Magento_Theme/layout/cms_page_view_selectable_home_home.xml

And add the code as follows:

<?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>
         <reference name="right">
		<block type="cms/block" name="right.permanent.callout">
		      <action method="setBlockId"><block_id>your-block-id</block_id></action>
		</block>
	</reference>
     </body>
 </page>

Then perform the below steps.

Step 1: From the admin configuration, navigate to Content > Elements > Blocks.

Step 2: Select the block and change the Identifier.

Step 3: From the admin panel, navigate to Content > Elements > Pages

Step 4: Choose the page where you want to place the block and open it in edit mode.

Step 5: Expand the Design option and in the Custom Layout Update field dropdown, select the XML file name which you have created. Here it is home.

Step 6: At the end, click Save.

Final Words:

Accordingly, you can insert a widget into sidebar in Magento 2. You can also Add Custom Sidebar On Checkout Page in Magento 2. In case you face any difficulty while implementation, ping me in the comment section below. Do share the article with your fellow Magento colleagues. Stay happy, stay tuned!

Happy Reading ?