Calendar page

Display all your events in one page and allow your customers to select a specific event and time.

  1. Navigate to Online Store > Themes and click the Customize button.
  2. Click the top-center menu and select the Pages option.

Create a new page - step 2 Create a new page - step 2.

  1. Click the Create template button, name your template "CoAttend Calendar Page" and click the Create template modal button.

Create a new page - step 3 Create a new page - step 3.

  1. Navigate to Online Store > Pages and click the Add page button.
  2. Enter a Title, change the Theme template to coattend-calendar-page and click Save.
  3. Navigate to Online Store > Navigation and select your menu. Add the created page as a new menu item and click Save.
  4. Navigate to Online Store > Themes and click the Customize button.
  5. Navigate to the new page, click the Add section button and select CoAttend calendar from the Apps.

Add CoAttend calendar Add CoAttend calendar

  1. Edit the calendar's styles and click Save.

CoAttend calendar CoAttend calendar

  1. Please navigate to Apps > CoAttend > Settings > Calendar to customize your calendar settings.
  2. Congratulations, your Calendar page is good to go!

Should you happen to be using a Shopify Vintage Theme for your store, please proceed with the steps outlined below:

  1. Navigate to Online Store > Pages and click the Add page button.
  2. Enter a Title, change the Theme template to page.coattend_calendar and click Save. If you cannot locate the file in your theme, please refer to the instructions provided on this page.
  3. Navigate to Online Store > Navigation and select your menu. Add the created page as a new menu item and click Save.
  4. Your Calendar page is ready!

Calendar modal

Another option is to show the calendar in a pop-up modal when a button is clicked.

Calendar modal example Calendar modal example.

  1. Navigate to Online Store > Themes and click the Customize button.
  2. Navigate to the page you want to add the button, click the Add section or Add block button and select CoAttend calendar button from the Apps.

Add CoAttend calendar modal Add CoAttend calendar modal

  1. Edit the button's label and options and click Save.

CoAttend calendar modal CoAttend calendar modal

  1. Please navigate to Apps > CoAttend > Settings > Calendar to customize your calendar settings.
  2. Congratulations, your Calendar modal is good to go!

Should you happen to be using a Shopify Vintage Theme for your store, please insert an HTML button with the class coattend-calendar-button.

Example:

<button class="coattend-calendar-button">Calendar</button>

Customize the calendar page

Please follow the instructions on Calendar Settings page.