How to Insert a Widget in Magento 2


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.

Inserting the widgets on CMS page helps store owners improve the storefront functionality better with many marketing contents whereas they are under control very well by store admin. In this post, I will show you all methods to add the widget effectively. Additionaly, the CMS page also includes images when you configure the content page, that is described in detail in the previous post. Go here to learn more.

Insert a Widget

  • Choose the content page need to be edited.
  • On the left panel, choose Content and apply one of the following methods:

Method 1: WYSIWYG Mode

  • Click on Show / Hide Editor button.
  • Place the cursor at the position you want to insert the widget. Then, click on Insert Image.

Method 2: HTML Mode

  • Click on Insert Widget.
  • Select the Widget Type. This guide will help you insert widget to product.
  • If you want to use the product name, leave Anchor Custom Text empty.
  • Complete Anchor Custom Title for SEO that is invisible on page.
  • In the Template field, choose one of the options:
    • Product Link Inline Template allows to include the link into text.
    • Product Link Block Template to put the link on a separate line.
  • Click on Select Product, then do the following:
    • In the category tree on the left sidebar, open the category you need
    • From the product list of the category, choose the product you want to add.
    • Tap Insert Widget to insert link on the page. In the HTML, a markup tag for the link appears at the top of the page, enclosed in double curly braces.
    • If needed, use Cut (Ctrl + x) and Paste (Ctrl + v) to position the markup tag in the code where you want the link to appear.
  • Hit the Show / Hide Editor button to preview in WYSIWYG mode.

Repeat this instructions if you want to add other link to the content.

Ref: Magento 2 User Guide

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

Please leave comments if you have any questions, feedbacks.

Comments for How to Insert a Widget in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

54 reviews

Layered Navigation

26 reviews


24 reviews