Insert a widget in the editor

The widget tool can be used to add various content elements to the page, including links to any Commerce content page or node, product, or category. Links can be positioned on the page in a block format, or incorporated directly into the content. You can use the Widget tool to create links to the following types of content:

By default, links inherit their style from the style sheet of the theme.

Inserting many directives, especially widgets like the Recently Viewed / Compared Products type, can produce a negative effect on the first load of the page when it is not cached. For this reason, use them with caution. Usually, it does not create an issue. But you should discuss this potential issue with your development team.
  1. Open a page, block, or dynamic block in edit mode.

  2. Go to the Content section and click any element that supports the editor.

  3. Position the cursor where you want the widget to appear and click the Insert Widget icon.

    Editor toolbar - Insert Widget {width="700" modal="regular"}

    If you do not have Page Builder enabled and prefer to work with the code, click Show / Hide Editor. Position the insertion point in the text where you want the widget to appear. Then, click Insert Widget.

  4. Choose the Widget Type.

    For more information about these options, see Widget Types. The following steps use an example for inserting a link to a product.

  5. To use the product name, leave the Anchor Custom Text field empty.

  6. Enter an Anchor Custom Title for best SEO practice.

    This title is not visible on the page.

  7. Set Template to one of the following:

    • To incorporate the link into text, select Product Link Inline Template.

    • To place the link on a separate line, select Product Link Block Template.

  8. Click Select Product and do the following:

    • In the tree, navigate to the category you want.

    • In the list, choose the linked product.

  9. Click Insert Widget to place the link on the page.

    If you are working with HTML code, a markup tag for the link appears at the top of the page, enclosed in double curly braces. If needed, use Cut and Paste to position the markup tag in the code where you want the link to appear.

  10. When your content edits are complete, click Save.