DocumentationCommerceContent and Design

Create and manage widgets

Last update: Tue Aug 29 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User

Widgets are reusable components. You can easily create widgets, and modify existing ones to automatically update content across your store. You can also delete widgets that are no longer in use.

w-700 modal-image
Widgets

Create a widget

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.

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 the Design Theme is set to the current theme.

      img-md
      w-600 modal-image
      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 you want the widget to 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.)

      img-md
      w-600 modal-image
      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.

    img-md
    w-600 modal-image
    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.

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.

Widget creation demo

To learn about creating widgets, watch this video:

https://video.tv.adobe.com/v/343786?quality=12

Edit a widget

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

  2. Locate the widget by using the filters above the grid and then click the widget name.

  3. Make needed changes.

    Review the steps for creating a widget for information about the widget options.

  4. Click the Save.

Delete a widget

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

  2. Locate the widgets by using the filters above the grid and then select the checkbox of the widgets to be deleted.

  3. In the upper-left corner of the list, set Actions to Delete.

  4. When complete, click Submit.

  5. To confirm the action, click OK.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de