DocumentationCommerceContent and Design

Catalog events carousel widget

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

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User
+-----------------------------------+ | img-md | +===================================+ | w-20 | +-----------------------------------+ | Adobe Commerce feature | +-----------------------------------+Exclusive feature only in Adobe Commerce (Learn more)

A catalog events carousel widget displays a slider of upcoming events with a countdown ticker for each event. You can choose the pages and area of the page layout where you want the carousel to appear, and control the width and number of events that appear at one time. The result you get depends on your theme, where it is positioned to appear on the page, and the options that you choose.

w-700 modal-image
Event carousel in the left sidebar

Before you begin, follow the instructions to configure the Catalog Event widget so that it is enabled for the storefront.

w-500 modal-image
Catalog event configuration

Step 2: Create the widget

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

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

  3. In the Settings section, do the following:

    • Set Type to Catalog Events Carousel.

    • Choose the Design Theme that is used by the store.

  4. Click Continue.

    img-md
    w-500 modal-image
    Widget settings for an event carousel

  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 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
      Widget storefront properties

Step 3: Choose the location

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

  2. Set Display On to Specified Page.

  3. Set Page to CMS Home Page.

  4. Set Container one fo the following:

    • Main Content Area
    • Sidebar Additional
    • Sidebar Main
    note note
    NOTE
    The results vary according to theme and page layout. You must also specify the Catalog Events Carousel Default Template in the category configuration.

  5. If you want the events carousel to appear in another location in the storefront, click Add Layout Update and repeat these steps for that location.

    img-md
    w-600 modal-image
    Layout updates

  6. Click Save and Continue Edit.

    For now, you can ignore the message to refresh the cache.

Step 4: Configure the options

  1. In the left panel, choose Widget Options.

  2. For Frame Size, enter the number of events that you want to list in the slider at the same time.

    To view only one event at a time, enter 1.

  3. For Scroll, enter the number of event listings that you want to scroll per click.

    To scroll to the next event, enter 1.

  4. For a custom width, enter the number of pixels for Block Custom Width.

    On the following example page, the custom width is set to 250 pixels.

    img-md
    w-400 modal-image
    Custom width widget options

  5. When complete, click Save.

  6. When prompted to refresh the cache, click the link in the message at the top of the page and follow the instructions.

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