Upcoming Events Widget

The upcoming events widget allows you to display a list of your upcoming scheduled events. Scheduled events are products configured with the class, course, or tour/activity profiles. The widget can be added to a page that you specify, or it can be setup as a pop-up item that is present throughout your store.

Configuring the Widget

This portion of the article will walk you through creating and configuring the upcoming events widget.

In the app admin select Widgets.
Under Store wide widgets, select Upcoming Events.
Select Add widget.
Specify a name for your widget in the Name field. This is optional, but recommended if you will make multiple versions of the widget.
Under Interface, the Display mode drop-down menu provides you with the different display options for the widget. For details on selecting the right mode please see the Widget Display Mode section of the article.
Under Choices, the Number of events field will allow you to specify the number of events that will appear in the widget.
The Timezone Helper option allows a timezone converter to display within the widget. This is recommended if you have a customer base that lives outside the region you have chosen in your Shopify admin settings.
The Filter Tags field will allow you to specify tags in order to have specific products included in the widget listing. Leaving this field in the default position will allow all applicable products to be listed.
The Services tab will allow you to specify tags in order to have specific products included in the widget listing. Leaving this field in the default position will allow all applicable products to be listed.
The Translations tab allows you to change the widget's text.
Once you have finished setting up the widget select Save.

Widget Display Mode

The widget can be displayed in either inline mode or pop-up mode. Inline mode allows you to embed the widget on a page of your choice while pop-up mode allows the widget to display throughout your store as a bubble that can be selected in order to expand.

Pop-up Mode

The following image is from our demo store. It shows an example of the upcoming events widget in the pop-up mode using the Bottom-Right configuration.

Upon selecting the pop-up bubble an upcoming events list is presented as seen in the following image.

You may recall that step #5 from the Configuring the Widget section pertained to the Display Mode selection of the widget. To use the pop-up version you can choose any of the following options: Bottom-Right, Bottom-Left, Top-Right, or Top-Left. The location of the pop-up bubble will correspond with the option that you select.

Inline Mode

The inline mode for the widget has 2 display options: Inline-Block, and Inline-List. This allows you to choose how you want to display your events list. The following image shows an example of the Inline-Block version of the widget.

In contrast, the following image provides an example of the widget using the Inline-List mode.

After making your inline mode selection a Code field will appear. You will need this code later. Make sure to save your changes.

Embedding the Widget

This section of the article will walk you through creating a custom page and embedding the widget. A custom page is not needed if you want to embed the widget on a standard theme page such as the homepage or the collection pages.

Note: if you are embedding the widget into a standard theme page you just need to complete steps 5 through 7 using the appropriate theme file instead of the custom page template that is mentioned.

In the Shopify admin navigate to your theme-> select the Actions drop-down menu-> and select Edit code.
In the Templates area of the theme files select the Add a new template link.
In the pop-up that appears select Page in the first field and name your page template in the second field.
You now have a new page template. For this example we are using the Simple theme and the default page template code can be seen in the following image.
Return to the upcoming events widget configuration page and copy the code from the Code field. This code will vary with every upcoming events widget that you create. Make sure to copy the complete code. Here is how our code looks.
```
<div class="bta-upcoming-event-widget-container" data-mode="inline-block" data-id="19467" ></div>
```
Insert the code in the page template you created. The exact placement is optional. You can try out different locations to determine what is best for your store. We have added our upcoming events widget beneath the content of the page.
Select Save.
In the Shopify admin navigate to Online Store-> Pages.
Select Add page to create your custom page.
In the Templates section of the page you will need to select the page template that you created.
Add content to the page as needed.
Select Save.