Catalog Events Carousel

Magento Commerce only

The content on this page is for Magento Commerce only. Learn more

The Catalog Events Carousel widget displays a slider of upcoming events with a countdown ticker for each event. You can choose the page(s) and area of the page layout where the carousel is to appear, and control the width and number of events that appear at a time. The result you get depends on your theme, where it’s positioned to appear on the page, and the options that you choose.

Event Carousel in Left Sidebar

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

    Catalog Events

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.

    Widget Type

  5. In the Storefront Properties section, complete the following fields:

    Widget Title Enter a descriptive title for your widget. This title is visible only from the Admin.
    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”.
    Sort Order (Optional) Enter a number to determine the order this items appears with others in the same part of the page. (0 = first, 1 = second, 3= third, and so on.)

    Storefront Properties

Step 3: Choose the Location

  1. In the Layout Updates section, click Add Layout Update. Then, do the following:

    • Set Display On to Specified Page.

    • Set Page to CMS Home Page.

    • Set Container one fo the following:

      • Main Content Area
      • Sidebar Additional
      • Sidebar Main

      The results vary according to theme and page layout. The “Catalog Events Carousel Default Template.” must also be specified in the category configuration.

    • If you want the Events Carousel to appear in an additional location in the storefront, click Add Layout Update. Then, repeat these steps.

    Layout Updates

  2. Click Save and Continue Edit.

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

Step 4: Configure the Options

  1. In the panel on the left, choose Widget Options. Then, do the following:

    • In the Frame Size field, 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.

    • In the Scroll field, enter the number of event listings that you want to scroll per click. To scroll to the next event, enter 1.

  2. For a custom width, enter the number of pixels in the Block Custom Width field. The custom width for the example on this page is set to 250 pixels.

    Widget Options

  3. When complete, click Save.

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