DocumentationCommerceContent and Design

Use a widget to position a block

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

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User

The CMS Static Block widget gives you the ability to place an existing content block nearly anywhere in your store.

w-700 modal-image
Widgets

Step 1: Choose the widget type

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

  2. In the upper-right corner, click Add Widget.

  3. In the Settings section, set Type to CMS Static Block and click Continue.

  4. Verify that the Design Theme is set to the current theme and click Continue.

    img-md
    w-600 modal-image
    Widget settings

  5. In the Storefront Properties section, do the following:

    • 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 is 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

Step 2: Complete the widget layout updates

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

  2. Set Display On to the category, product, or page where you want the block to appear.

  3. To place the block on a specific page, do the following:

    • Choose the Page where you want the block to appear.

    • Choose the Block Reference that identifies the place where the block is displayed on the page.

    • Accept the default setting for Template, which is set to CMS Static Block Default Template.

      img-md
      w-600 modal-image
      Layout updates

Layout update options

Field
Description
Categories
Anchor Categories
Displays the widget on the anchor category page.
Categories - Categories where the anchor is displayed. Options: All / Specific Categories
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.
Non-Anchor Categories
Displays the widget on the non-anchor category page.
Categories - Categories where the anchor is displayed. Options: All / Specific Categories
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.
Products
All Product Types
Displays the widget on either a specific type of product page, or on all product pages.
Products - Products for which the widget is displayed. Options: All / Specific Products
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.
Generic Pages
All Pages
Displays the widget on all pages.
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.
Specified Page
Displays the widget on a specific page. Options:
Page - Pages for which the widget is displayed.
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.
Page Layouts
Displays the widget on pages with a certain layout.
Page - Pages for which the widget is displayed.
Container - Set the container to the part of the page layout where you want to display the widget.
Template - Determines the theme of the layout.

Step 3: Place the block

  1. In the left panel, select Widget Options.

  2. Click Select Block… and choose the block that you want to place from the list.

  3. When complete, click Save.

    The app now appears in the list.

  4. When prompted, follow the instructions at the top of the page to update the index and page cache.

  5. Return to your storefront to verify that the block appears in the correct location.

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

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