Skip to main content
All CollectionsCalender Widget Customization Event Calendar Widget
How to create separate page for Event Widget in your store?
How to create separate page for Event Widget in your store?
Support avatar
Written by Support
Updated over 9 months ago

Servv provides a storefront widget where your customers can view all the upcoming events and book them directly from the widget. This widget has filtering capabilities and can be displayed as a 'pop-up button' or could be displayed 'in-page' in the homepage.

However, you can also display the storefront widget in a separate page where the store customers can go and view the upcoming events. To add widget to the separate page you need to perform four main actions:

1. Create new template which will contain widget code.

2. Create new page and add newly created template to it.

3. Add new page to your store's navigation.

4. Show widget from the Servv's app settings.

Please follow the steps below to perform the four main actions:

Create new template

1. Login to your Shopify partners account. Select the option "Online Store" from the left navigation panel.
​
​

Screen_Shot_2020-11-13_at_11.01.31_AM.png

2. Next, click the "Actions" button from the right and select the option "Edit code" from the dropdown list.
​
​

Screen_Shot_2020-11-13_at_11.03.12_AM.png

3. The list of files will open up. Select the option "Add a new template" from the templates section.

Screen_Shot_2020-11-13_at_11.07.32_AM.png

4. Create a new template for a page with a desirable name.

Screen_Shot_2020-11-13_at_11.08.32_AM.png

5. New template will be created. Now remove the existing code from the page and insert the widget code in the template.

Code for the widget is: {% include 'servv_calendar' %}

Screen_Shot_2020-11-13_at_11.11.30_AM.png

6. After inserting the widget code to the new template, save the changes. New template with the widget will be created.

Screen_Shot_2020-11-13_at_11.13.00_AM.png

Create new page

1. Select the option "pages" from the left navigation panel and "add new page" to your store.

Screen_Shot_2020-11-13_at_11.14.49_AM.png

2. Give title to your page and add content if needed. On the right side of a window select the option "Template suffix" and you will see list of templates available for the page.

Select the template that you created with widget code. Save the changes.

Screen_Shot_2020-11-13_at_11.16.36_AM.png

Add new page to your store's navigation

1. Now add this newly created page to your store's navigation. Select the "Navigation" option from the left navigation panel and click on "Main Menu" option.

Screen_Shot_2020-11-13_at_11.19.56_AM.png

2. Now add menu item to the list.

Screen_Shot_2020-11-13_at_11.21.05_AM.png

3. Give name to the menu item and select the link. For link, select the option "Pages" from the list and then select the newly created page. Click on "Add" button and the "Save" the option. New page will be added to your store.

Screen_Shot_2020-11-13_at_11.21.53_AM.png

Show widget from the Servv's app settings

1. Now go to "Apps" and select the Servv app from the list. In the app, go to Settings page > Widget > General >Event Widget. Turn on the option "Activate widget" and then select the "In-Page view" option. Select the other desirable options and "Save" the changes.

Screen_Shot_2021-10-29_at_2.27.17_PM.png

2. Go to your Online Store. There you will see new page has been added to your store's navigation. Once you go to the newly added page, you will see the widget showing up in the page.

Other articles to refer to for widget setup:

Did this answer your question?