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.

Creating 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 process of creating a widget is nearly the same for each widget type. You can follow the first part of the instructions, and then complete the last part for the specific type of widget you want.

Widgets

Step 1: Choose the type

  1. On the Admin sidebar, go to Content > Elements > Widgets.

  2. Click Add Widget.

  3. In the Settings section:

    • Set Type to the widget type that you want to create.

    • Verify that Design Theme is set to the current theme.

    Widget settings

  4. Click Continue.

Step 2: Specify storefront properties and layout

  1. In the Storefront Properties section:

    • For Widget Title, enter a descriptive title for the widget.

      This title is visible only from the Admin.

    • For Assign to Store Views, select the store views where the widget will be visible.

      You can select a specific store view, or All Store Views. To select multiple views, hold down the Ctrl key (PC) or the Command key (Mac) and click each option.

    • (Optional) For Sort Order, enter a number to determine the order this item appears with others in the same part of the page. (0 = first, 1 = second, 3 = third, and so on.)

    Storefront properties

  2. In the Layout Updates section, click Add Layout Update.

  3. Set Display On to the type of page where it is to appear.

  4. In the Container list, choose the area of the page layout where it is to be placed.

    Layout updates

  5. If the widget is a link, set Template to one of the following:

    Block Template Formats the content so it can be placed as standalone unit on the page.
    Inline Template Formats the content so it can be placed inside other content. For example, a link that goes inside a paragraph of text.

Step 3: Complete the widget options

The options for each widget type vary slightly, but the process is essentially the same. The following example displays the product list for a specific category, with pagination controls.

  1. In the left panel, choose Widget Options.

  2. Click Select Block.

  3. Enter a Title to appear above the list, such as Featured Products.

  4. For pagination controls, set Display Page Control to Yes and do the following:

    • Enter the Number of Products per Page.

    • Enter the total Number of Products to Display.

    • Set Condition to the category of products to be featured.

      The process is the same as setting a condition for a price rule.

    Widget options

Step 4: Save and check the result

  1. When complete, click Save.

  2. When prompted, follow the instructions at the top of the workspace to update the cache, as needed.

  3. Return to your storefront to verify that the widget is working correctly.

    To move it to a different location, you can reopen the widget and try a different page or block reference.

© 2024 Adobe. All rights reserved.