Magento Open Source 2.2.x

Magento 2.2.x Notice: As outlined by the Magento Software Lifecycle Policy, Magento 2.2.x has reached the End-of-Support and will no longer receive quality fixes or documentation updates. To maintain your site's performance, security, and PCIPayment Card Industry: Refers to debit and credit cards and their associated businesses. compliance, upgrade to the latest version of Magento.

The online Magento 2.2.x User Guide is scheduled for removal, but will remain available in PDF for Open Source, Commerce, and Commerce for B2B.

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 categoryA set of products that share particular characteristics or attributes.. 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 themeA package that contains graphics and appearance information, and customizes the look and feel of the store..

To 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:
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. Tap Select Product, and do the following:
a. In the tree, navigate to the category you want.
b. In the list, choose the linked product.
c. 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.
d. 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.
8. Tap Show / Hide Editor to see the link in WYSIWYG mode.

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