After July 2021, the 2.3.x release line no longer received quality updates or user guide updates. PHP 7.3 reached end of support in December 2021, and Adobe Commerce 2.3.x reached end of support in September 2022. We strongly recommend upgrading to Adobe Commerce 2.4.x to help maintain PCI compliance.

Inserting a Widget

This site contains archived merchant documentation for a version of Adobe Commerce and Magento Open Source that has reached end-of-support. The documentation available here is intended for historical reference only and is not maintained. The Adobe Commerce Merchant Documentation for current releases is published on the Adobe Experience League.

The Widget tool can be used to add a variety of content elements to the page, including links to any 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 page load when the page is not cached. For this reason, we advise that you use them with caution. In most cases, it should not create an issue. But this is something that you should discuss with your development team.

Insert a widget in the editor

  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. In the panel on the left, choose Content. Then, use either of the following methods:

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

    Editor toolbar - Insert Widget Insert widget icon

    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.

  5. 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.

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

  7. Enter a Anchor Custom Title for best SEO practice.

    This title is not visible on the page.

  8. 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.

  9. Click Select Product and do the following:

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

    • In the list, choose the linked product.

  10. 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.

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

© 2024 Adobe. All rights reserved.