How to Insert a Widget into Sidebar in Magento 2

magento-2-tutorial
how-to
insert
widget
sidebar

Magento 2 provides an XML Widget file that allows you to manage the page layout as well as place CMS Blocks at any position on the page. In the tutorial today, I will point to you how to insert a Widget into Sidebar with two elements: “Configure a Widget” and “Configure a Layout Update”.

Insert a Widget into Sidebar

  • Configure a Widget
    • Step 1: Select the Type
    • Step 2: Complete the Layout Updates
    • Step 3: Place the Block
  • Configure a Layout Update

Configure a Widget

Widget is the awesome functionality you can insert to the CMS page from Magento 2 Configuration because it can be considered as a predefined set of configuration options. In the widget, you can add links that navigate diretly to any content page, category, or product as you need.

Step 1: Select the Type

  • On the Panel Admin, Content > Elements > Widgets.
  • In the upper-right corner of Widgets workplace, click on Add New Widget button.
  • In the Settings section:
    • Choose CMS Static Block type in the Type box.
    • Choose the current theme you are applying in the Design Theme.
    • Click Continue button.

How to Insert a Widget Magento 2 into Sidebar Widget Settings

  • In the Storefront Properties section,
    • Enter Widget Title for the internal reference.
    • Assign the block to all store view in the Assign to Store View field or to any store view you want to apply the block.
    • Set the Sort Order if many blocks are placed at the same container. The block is at the top if the inserted value is zero.

How to Insert a Widget Magento 2 into Sidebar Storefront Properties

Step 2: Complete the Layout Updates

  • In the Layout Updates section, click on Layout Update to set the layout.
    • Choose the category, product, or page where shows the block in the Display on field.
    • If set to a specific page, you need to choose Page you want to the block to display and set Container that is the position of the page the block appears.

How to Insert a Widget Magento 2 into Sidebar Storefront Properties

Step 3: Place the Block

  • Continue select Widget Options tab on the left panel.
  • Click on Select Block to choose the block from the list you want to place.
  • Save to complete.
  • Remember to flush the cache by getting the Cache Management link in the system message at the top of the workplace.
  • Go to your storefront to check the position of the block. If you want to the block, back to the widget settings and try a different page or block reference.

Configure a Layout Update

To insert the widget into sidebar, you need to make a layout update to the XML code by changing lightly in the code. Due to that, it is simple to place the CMS Block Static on right or left sidebar even or different positions on the page.

  • On the Admin Panel, Content > Elements > Blocks.
  • In the list of blocks, select the block you want to place, and then modify the Identifier.
  • On the Admin Panel, Content > Elements > Pages.
  • Choose the page where you want to place the block, then open the edit mode.
  • On the left panel, select Designtab, in the Layout Update XML box, insert the code for the right or left sidebar.

    Code for CMS Block in Sidebar

    <reference name="right">
    <block type="cms/block" name="right.permanent.callout">
    <action method="setBlockId"><block_id>your-block-id</block_
    id></action>
    </block>
    </reference>
    
    • Change the reference name to identify either the “right” or “left” column, according to the layout of the page.
    • Change the block_id to the identifier of the block that is being placed.
  • Save Page to complete.

Ref: Magento 2 User Guide



It comes to the end of tutorial: How to Insert a Widget into Sidebar in Magento 2.

Please leave comments if you have any questions, feedbacks.

Comments for How to Insert a Widget into Sidebar in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

$199
17 reviews

Layered Navigation

$149
7 reviews

Affiliate

$149
7 reviews

FAQ

$149
10 reviews

Zoho CRM

$249
no review

Store Locator

$199
no review

Shop By Brand

$99
no review

Better Blog

FREE
7 reviews