Home / Widgets

Event Product Widgets

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Event Product Widgets include the widgets referring to the event type of product. The widgets are specifically designed to facilitate the management, display, and interaction with the event-related product within the website. They are essential components for handling event-specific merchandise.

  • To use the Event Product Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping inside the Product List.
  • You can access a single event product page from Pages > Ecommerce > Event Products.

Adding Event Product Widgets

After creating the product, you can add its associated widgets.

To add the Event Product Widgets:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Open Pages > Ecommerce > Event Product page.
  3. Navigate to the Ecommerce > Event Product Widgets on the Visual Editor Left Panel.
  4. Type the widget name in the search bar or find it in the widget grouping.
  5. Drag the widget from the list and drop it into the Product List widget.

Configuring the Event Product Widgets

You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.

  1. Go to Styles to modify the necessary configuration of general styling features (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
  2. Go to Settings to modify the Visibility of the widget on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Note: To get more widgets in the widget list of the Visual Editor, you need to add the product-related attributes from the Dashboard > Products > Fields.

To drop the product-related widgets within the Product List, hold down the CTRL while doing so.

Add to Cart

The Add to Cart widget allows your customers to add a product to their shopping cart, making it easy for them to begin the purchase process. For more details, see Add to Cart Widget

Location Link

The Location Link widget refers to a URL or link that provides the location details. It includes information on the address and directions. The product-related information is generated from Dashboard > Events, where you set up all the relevant details.

Once you have added the Location Link widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal and Hover.
  2. Go to Content and modify its label text to be visible for the public mode.
  3. Go to Settings and modify its Visibility Settings.

Ticket Chooser

The Ticket Chooser widget allows customers to select the type and quantity of tickets they want to purchase for an event. It provides a user-friendly interface for attendees to customize their ticket selection based on available options.

Once you have added the Ticket Chooser widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.
  • Customize the styles for different states, such as Normal and Hover.
  • Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.

    2. Go to Settings and modify its Visibility Settings.

Schema

The Schema widget displays the layout and seating arrangement of the event. Attendees can view the seating plan and select their preferred seats or sections, providing them with a clear understanding of the event venue. The schema-related information is generated from the event creation flow of Dashboard > Events.

Once you have added the Schema widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal and Hover.
  2. Go to Settings and modify its Visibility Settings.

Selected Ticket

This Selected Ticket widget shows a summary of the ticket(s) the customer has chosen, including the ticket type, quantity, and total cost. It offers a quick reference for customers to review their selections before proceeding with the purchase. The ticket-related information is generated from the event creation flow of Dashboard > Events.

  1. Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.
  • Customize the styles for different states, such as Normal and Hover.
  • Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.

    2. Go to Settings and modify its Visibility Settings.

Event Date Info

The Event Date Info widget displays essential information about the event date and time. It helps attendees quickly identify when the event will take place and ensures they have accurate scheduling details. The date-related information is generated from the event creation flow of Dashboard > Events.

Once you have added the Event Date Info widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.
  • Customize the styles for different states, such as Normal and Hover.
  • Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs, based on the product type.

    2. Go to Settings and modify its Visibility Settings.

Event Date Selector

The Event Date Selector widget allows customers to pick their preferred date from a list of available event dates. This is particularly useful for events with multiple dates, ensuring attendees can choose a schedule that suits them. The date-related information is generated from the event creation flow of Dashboard > Events, where you set up the relevant details.

Once you have added the Event Date Selector widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.
  • Customize the styles for different states, such as Normal and Hover.
  • Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.

    2. Go to Settings and modify its Visibility Settings.

Once you are done with the Styles and Settings, you can create the UI Element of the widget or choose from the existing options.

Event Organizer

The Event Organizer widget showcases information about the team or company responsible for organizing the event. It provides attendees with insights into the event background and the organizers' credentials.

The organizer-related information is generated from Dashboard > Events, where you set up the relevant details.

Once you have added the Event Organizer widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.
  • Customize the styles for different states, such as Normal, Hover, and Active.
  • Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.

    2. Go to Settings and modify its Visibility Settings.

Event Type

The Event Type widget specifies the category or genre of the event. This helps attendees understand the nature of the event, whether it's a concert, conference, sports event, or any other type of gathering.

The product-related information is generated from Dashboard > Events, where you set up the relevant details.

Once you have added the Event Type widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal, Hover, and Active.
  2. Go to Content and modify its label text to be visible for the public mode.
  3. Go to Settings and modify its Visibility Settings.

Organizer Name

The Organizer Name widget displays the name of the entity organizing the event. It gives attendees a clear idea of who is responsible for the event management and coordination.

The product-related information is generated from Dashboard > Events, where you set up the relevant details.

Once you have added the Organizer Name widget:

  1. Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal and Hover.
  2. Go to Settings:

💡 If you have questions or concerns, contact us directly via the Live Chat box, located in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.