*ZapBook is a paid add-on app feature. Please contact the Online Merchant Success team for more information and pricing details.
SHOPLINE's ZapBook application can assist you in setting up dates and time slots for their services and courses. The application helps you keep track of and manage their calendar bookings and assign staff for the booking.
In this article, you'll find:
- App tabs overview
- [Admin] Setting up booking slots
- [Storefront] Making an appointment
- [Admin] Managing appointments
- [Admin] Connecting with your Google Calendar (Optional)
- Notes
Before you start:
- To enable this feature, please go to [Apps] > [Apps Store] and install ZapBook.
- Please contact the Online Merchant Success Team if you cannot install or open the app.
- Currently, this application can be used in the Ultra Chic, Dusk, Varm, Skya, Philia, and Sangria theme templates.
1. App tabs overview
A. Calendar - A quick capture of the booking schedule
B. Reservations - View the upcoming and pending bookings
C. Service - Import product from SHOPLINE Admin into ZapBook
D. Customer - The person booking the service
E. Team - Staff that provides the service
F. Settings - Basic booking system setups and code injection
2. [Admin] Setting up booking slots
Step 1. Basic settings
On the ZapBook app, go to [Settings]. You can change the timezone, display time format, the title, and the color of the booking button.
Check the box for Auto Confirm if you wish to automatically confirm the booking once the reservation has been paid. Uncheck the box if you wish to confirm each reservation in the app manually.
Click Submit to save the settings.
Step 2. Inject the code
Recommended: Via Google Tag Manager
To know more about the use of Google Tag Manager, please click here.
Go to the Settings tab and copy the code under "Code Injection".
Go to the Google Tag Manager of the store. On the "Overview" page, click Add a new tag.
Click Tag Configuration then select Custom HTML for Tag Configuration.
Paste the code in the HTML field, and check the box for "Support document write." Click the pencil icon to configure the Firing Triggers, select DOM for Exceptions as illustrated below. Then click Save.
After the configuration is set, click the Submit button to deploy the changes.
Alternative: Via Layout Engine
In the Settings tab, scroll down to Code Injection. Click the Copy button to copy the code.
Go to the SHOPLINE Admin > [Online Store Design] > [Code Editor]. Click theme.liquid under "Layouts" and paste the code one line above {% endbody %}. Click Save to complete the settings.
*Note: If you cannot see the Code Editor feature, please reach the Online Merchant Success Team for assistance.
Step 3. Create new agent
Go to the Team tab, and click the Create New Agent button. 
Enter the Agent details and click Save.
*Note: There is no quantity limit for creating agents.
Step 4. Import service product
Create a service the same way you add products in the SHOPLINE Admin.
On the ZapBook app, go to the Service tab, click Import Service to view the list of products from the Admin.
*Note:
- All products should be set up in the Admin first before import. Service product editing is not supported on ZapBook.
- The ZapBook app does not take the product quantity ("Available Stock") in the Admin. Time slots can be set up on the app.
- You can set up service products in the Admin first and set them unpublished on the Product page.
Step 5. Set up a service schedule
In the Service tab, click the three-dot button under "Action". Select Edit to set up the service schedule and details.
i. Assign an agent
Before setting up the service schedule, you will be required to assign an agent to the service.
Click Pick an agent and choose from your agent list.
Click Save to keep the settings.
ii. Select available time slots
On the weekly calendar, click and pull down to set the time slots for your service. Click and drag to create longer sessions and set the timing for each appointment in booking timing. Click Save to keep the settings.
Click the blue timeslots and check the box if you want to repeat the same time slots every week. If the box is not checked, the time slot will only be set once on the day of the week you set. Click Submit to complete this setup.
iii. Configure service details
- Booking Timing - You can set how long each booking can last (For example, 30 mins per makeup booking.) Between each appointment, a buffer time (for a break, commute, cleaning) can be set.
- Duration - Set the date range for bookings for your service. If no duration is set, the service will always be available for booking.
- Reservation Type - Single, Multiple
You can set whether the service is offered single (1-on-1 services like manicure and facial treatment) or multiple (1-on-multiple or multiple-on-multiple services like restaurant booking, hiking trips, and handicraft workshops)
Enter the maximum and minimum booking number to set the number of people to attend the service at the same time slot (For example, at least 1 person and at most 6 people per booking.)
- Location Settings - Admin/Customer Side/Not Specific
- You can enter the branch from the Admin Side where the service is offered. You can also restrict the delivery option of the service product to "Store pick-up" and set up store information ([Settings] > [Delivery Options]).
- Select Customer Side if the service will be offered at the customer's location (e.g., home tuition). Please remind your customer to fill in the address as a remark on the checkout page.
- Select Not Specific if the service does not require a site.
3. [Storefront] Making an appointment
After the setup, customers will see the calendar and time slots available at the storefront.
To make an appointment, customers can do the following:
Step 1. Select a time slot
On the service product page, click on a date and click the dropdown menu to select the time slot.
For services with a maximum booking number set for a time slot, customers can see the number of bookings available in brackets next to each time slot.
Step 2. Checkout
When the customer checks out, they can see the selected date and time under the product name in the shopping cart.
*Note:
- Customers can check out the service with other non-service products.
- Currently, one booking is available per order.
4. [Admin] Managing Appointments
After the customer has completed checkout, the booking will be shown in the Pending section under Reservation.
i. Go to the Pending tab and click View Detail to view the booking details.
Go to the Order list ([Order Management] > [Orders]) to edit the order and payment status of the booking order.
Resume to the ZapBook app. To confirm or cancel the booking, click the Action button at the bottom of the pop-up window.
ii. A reservation confirmation email will be sent to the customers once the booking is confirmed. A cancellation email will be sent if the booking is cancelled.
iii. In the Calendar tab, you can view all the paid bookings in the calendar view.
Click the booking slot to view reservation details:
- Duration
- Date
- Time
- Customer(s) who have booked
- Agent for the service
5. [Admin] Connecting with your Google Calendar (Optional)
You can sync your booking to your own Google Calendar.
Go to the Settings on ZapBook, scroll down, and click Google Calendar Connect.
Select the Google account you want to sync with the calendar.
Click Allow to grant the access permissions and continue. Your new booking will then sync with your selected Google Calendar.
6. Notes
- Currently, only the merchant side can cancel the booking.
- Only one agent can be set per service.
- This feature currently does not support importing product sets or add-ons as services. When importing products with variations, the variations will be neglected.
Comments