You can change the colors of the booking calendar, control what information appears in time slots, and adjust the buttons customers see after they pick a time. All of these settings are in one place: Settings → General → Storefront.
Changing calendar colors
The calendar has two color settings:
- Calendar Available Date Color — the color used for dates that have open slots.
- Calendar Selected Date Color — the color used for the date the customer has clicked.
To change them:
- Go to Settings → General.
- Scroll to the Storefront section.
- Find Date Colours.
- Click the color swatch for Calendar Available Date Color and choose your color.
- Click the color swatch for Calendar Selected Date Color and choose your color.
- Click Save.
Pick colors that match your store's theme. The available date color should be clearly visible against the calendar background — high contrast helps customers quickly spot open dates.
Controlling what appears in time slots
You can show extra information inside each time slot to help customers make decisions faster. Go to the When customers are browsing available time slots section under Storefront settings.
Display spots available
Shows how many spaces are left in each time slot. Useful if you offer group classes or events with limited capacity.
Show end time for each slot
Displays the end time below the start time so customers know how long the appointment lasts.
Show sold-out time slots
Instead of hiding fully booked slots, they appear with a Sold Out label. This makes it clear those times exist but are no longer available, which can reduce confusion.
Switch variant with calendar open
If your Shopify product has multiple variants — each linked to a different service — this option adds a variant selector above the calendar. Customers can switch between variants without closing the calendar.
Configuring buttons after a customer selects a time
Once a customer picks a time slot, you can control what happens next. Go to After a customer selects a time slot in the Storefront settings.
Book another appointment button
Adds a button that lets customers book additional slots and pay for all of them together at checkout. Useful if you offer sessions that customers commonly book in bulk.
Continue Shopping button
Closes the calendar and returns the customer to the product page so they can add other items or browse your store.
Make timeslots temporarily unavailable when selected
Holds a time slot for 15 minutes after a customer adds it to their cart. This prevents two customers from booking the same slot simultaneously. If the customer does not check out within 15 minutes, the slot is released.
Enabling this setting means a slot may appear unavailable even though no booking was completed — if someone added it to their cart and then abandoned it. The slot releases automatically after 15 minutes.
Prevent customers from editing product quantity after selecting a timeslot
Locks the quantity in the cart after a time slot is selected. This prevents overbooking — the app manages capacity through its own attendee selector, so allowing customers to increase quantity in the cart can create more bookings than your capacity allows.
Take the customer to checkout after selecting a timeslot
Automatically sends customers to Shopify checkout as soon as they choose a time. This can reduce abandoned carts by shortening the path from booking to payment.
Advanced: Custom CSS
If you want to go beyond the built-in options, you can write custom CSS to style any part of the booking widget.
- Go to Settings → General → Advanced.
- Paste your CSS into the Custom CSS field.
- Click Save.
Custom CSS is not supported by Easy Appointment Booking's support team. Changes here can break the calendar's appearance if applied incorrectly. Always test on a non-live environment first if possible.
Next steps
- Translate & customize text — change button labels, headings, and other text in the booking widget