Inserting a Widget

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

  1. Open the content page to be edited.

  2. In the panel on the left, choose Content. Then, use either of the following methods:

    Method 1: WYSIWYG Mode

    • Click Show / Hide Editor to work in WYSIWYG mode.

    • Position the cursor in the text where you want the widget to appear.

    • On the editor toolbar, click Insert Widget.

    Method 2: HTML Mode

    From the HTML editor, click Insert Widget.

  3. When prompted, choose the Widget Type. This example shows how to insert a link to a product.

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

  5. Enter a Anchor Custom Title for best SEO practice. (The title isn’t visible on the page.)

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

  7. Click Select Product and do the following:

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

    • In the list, choose the linked product.

    • Click Insert Widget to place the 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 and Paste to position the markup tag in the code where you want the link to appear.

  8. Click Show / Hide Editor to see the link in WYSIWYG mode.

    You can continue editing the page and incorporate other links into the content.