Change the Calendar's Colors and Time Slots

Match the booking calendar to your brand and choose what customers see in each time slot

Available onAll plansUpdated 2 min read
On this page

These settings change how the booking calendar looks on your store. They apply to every service. All of them are on one page.

To open it, click Settings in the app menu, then Storefront Settings. After any change, click Save in the bar at the top of the page.

Change the colors

  1. Go to the Appearance section.
  2. Click the swatch next to Available date color and choose a color. Days with open times use this color.
  3. Click the swatch next to Selected date color and choose a color. The day the customer clicks uses this color.
  4. Click Save.

Choose colors that stand out from your theme's background, so customers can see open days quickly.

Choose what shows in each time slot

In the Time slot display section, check the options you want:

  • Show remaining spots for each timeslot — shows how many places are left, such as "5 of 10 available". Good for classes and tours. See Show how many spots are left.
  • Show start and end time for each timeslot — shows "10:00 AM – 11:00 AM" instead of "10:00 AM".
  • Show sold-out timeslots as unavailable — full times stay on the calendar, marked as unavailable, instead of being hidden.
  • Let customers switch product variants while the calendar is open — if your product has options (such as "30 min" and "60 min"), customers can switch between them without closing the calendar.

Choose how the calendar opens

In the When the calendar loads section:

  • Gray out dates that are unavailable (beta) — closed days are grayed out when the calendar opens. The calendar can take a little longer to load.
  • Let customers select attendees first — customers choose their group size first, and then only see times with enough room. This only affects services that allow more than one person per booking.

Style the Select a time button

By default, the Select a time button copies the look of your theme's Add to cart button. To style it another way, type one or more CSS class names from your theme in Advanced > Custom CSS classes. This field takes class names, not CSS code.

Add your own CSS

If you know CSS, you can restyle the booking calendar further. Go to Settings > Theme integration > Theme overrides and type your CSS in Custom CSS. Then click Save and check your store.

Custom CSS can break the calendar's layout if a rule is wrong. If that happens, delete it and save again.

Related settings on the same page

Related articles

Was this page helpful?

Still stuck?

Message our support team and we’ll walk you through it.