The booking widget and its appearance

Turn on the Book now button

Use the Setup guide's Open theme editor. It opens your theme editor's App embeds with Rezervito's Book now embed already switched on: press Save and you're done. You can also open Theme settings → App embeds in the theme editor yourself and switch on Book now.

That is the one thing that must be on. With the embed on, a floating Book now button shows in a corner of every page of your store, and every other Book now button works. It doesn't show on the page where a customer sees their booking: they have booked already, and on a phone it would cover that page's buttons. While your theme's cart drawer, menu or search is open, it steps aside, so it never covers their buttons. With it off, none of them do.

The Setup guide's Turn on the Book now button step ticks itself once the embed is on in your live theme. See Getting started.

The embed's settings in the theme editor:

• Show floating button: on to start with. Turn it off if you'd rather place your own buttons.
• Position: Bottom right, Bottom left, Middle right or Middle left.
• Distance from the side and Distance from the bottom, in pixels: 20 to start with. With a Middle position, the distance from the bottom moves the button down from the middle instead.
• Different distance from the bottom on phones: turn it on to set Distance from the bottom on phones, for example to lift the button above your theme's sticky Add to cart bar or a chat button.
• Button label: leave it blank to show "Book now" in the language your customer is browsing in.
• Notes label and Notes placeholder: the wording of the notes field. Whether customers are asked for notes is set in Rezervito, under Settings → Booking rules → Customer details. Left empty, the field shows a reminder not to write health or other sensitive details; with your own placeholder, that reminder shows under the field instead.

More Book now buttons

Every Book now button opens the same booking window:

• The Book now button block. In the theme editor, add the Book now button block to any section that takes app blocks, for example your home page's hero or your store's header. Its settings are Label (blank shows "Book now" in your customer's language) and Alignment: Left, Center or Right. In your header, Position in header places it Before the icons, Before the cart (the starting choice) or After the cart; how far it can move depends on your theme. On a phone it shows smaller, on one line; in a theme with a wide logo in the middle of the header there may still be no room for it, so check your store on a phone and use the floating button or a menu link there instead. The block shows only while the embed is on.
• Any link to `#book-now`. Add a menu item, or a button in your theme, whose link is #book-now (or /#book-now). It opens the booking window on the page the customer is on. This also works where your theme takes no app blocks.
• A link you share. Your store's address followed by /#book-now, for example https://your-store.com/#book-now, opens the store with the booking window already open. Use it in emails, social posts or a QR code.

If you turn the floating button off and place no other Book now button, customers have no way to book, and nothing warns you. Check your storefront after changing these settings.

The booking window follows your store's language. When Calendar open for new bookings is off in Settings → Booking rules, it says the shop isn't accepting bookings right now. See How customers book.

Your Book now page

Your store also has a Book now page: your store's address followed by /apps/booking, for example https://your-store.com/apps/booking. It opens the booking window as soon as it loads. Under the window the page shows "Book an appointment" and a Book now button, so a customer who closes the window can open it again.

The Book now page works even when the embed is off or your theme can't hold apps, so it's the safest link to share: in your menu, on social media, in emails or as a QR code on your counter. Copy its address with Copy link on the Where customers can book card in Settings → Appearance. The page shows inside your theme, in the language your customer is browsing in. Its Book now button takes your Button and Button label colors; with Theme picked, it looks like your theme's own buttons.

Where customers can book

The Where customers can book card in Settings → Appearance lists every way to open the booking window, each with its own shortcut:

• Floating button: On or Off, as read from your live theme, and where it sits, for example "Bottom right, on every page."
• Header or section button: Add ↗ opens the theme editor adding the Book now button block to your header. Some themes can't hold it in the header; add it to a section instead.
• Menu link: #book-now with Copy link. In Shopify, go to Content → Menus and add a menu item with this link.
• Book now page: your Book now page's address with Copy link.

The card groups them: In your theme holds the first three, which need the Book now embed, and its header says Embed on or Embed off. Edit ↗ opens the theme editor's App embeds. Anywhere holds your Book now page, which works without the embed.

When your live theme looks like Canvas built it from scratch, or can't be seen at all, In your theme says Not available and its rows have no shortcuts, since such a theme can't hold apps yet: use your Book now page.

Choose the widget's colors

Open Settings → Appearance. The Booking widget card has:

• Color scheme: ready-made sets of colors. Theme, the starting choice, sets no colors of its own: the Book now buttons look like your theme's buttons, and the booking window is white with dark text. Picking any other scheme sets all five colors, which you can then change one by one. Custom appears once you change a color by hand, and stays there to go back to if you try another scheme.
• The five colors: Text, Background, Button, Button label and Outline button.

A color pair that is hard to read is marked Hard to read. It is a warning only: you can still save it.

The Preview shows the floating Book now button and the booking window with sample data, at Phone or Desktop width: the list of services and the times. On a computer it sits beside the cards, on a phone below them.

Save applies the colors to your store straight away. If your store can't be updated, nothing is saved, and you can try again.

The Book now buttons take the Button and Button label colors. They keep your theme's button shape: its corners, size and lettering. With Theme picked, they look like your theme's own buttons. If your theme's buttons can't be recognized, they get a simple outlined button of their own.

The booking window always uses your theme's font and the weights your theme gives its text and headings, so it looks as light or as bold as the rest of your store. Everything else in the window is its own: it keeps its own letter case, letter spacing, sizes and layout whatever your theme does to headings, labels and fields, and its bold text (the month, the step you're on, the total) is never lighter than your store's text. It also reads left to right, as all its languages do, even when your store is set up right to left (for Hebrew or Arabic). For any other styling, use your theme's own custom CSS; a rule for the booking window has to start with .rezervito-modal[data-rezervito-modal][open] (or use !important) to take effect. The colors apply to every Book now button and the booking window in every theme, and to the page where customers see, move or cancel their booking. Your booking emails take them too: the Button color is their accent (a dark gray with Theme, or with a button too light to read on white), along with your store's logo, and Rezervito's pages inside your Shopify admin always look like Shopify.

Your customers' booking page is laid out like their emails: your shop's name and the booking's Booking no., such as #1042 (the same number you see in the admin), on top; then the booking's status, the time, and the service with its staff member, length and price. Under that, Change or cancel says until when the customer can change the time or cancel online — in one sentence when both close at the same time — with a Reschedule and a Cancel booking button. Reschedule opens the same booking window customers book in, at Choose a time, for that booking's service: the staff member is picked already, and others are offered only when they take the booking at the same price and length. After choosing a time, the window shows the new time, and Move my booking moves it and reloads the page. Cancel booking asks first, in a window with Keep booking. Reschedule shows only while the Book now app embed is on in your theme. Once neither can be done online, it says so in one line and shows an Email the shop button. A visit's page shows the number once and each of its services in turn.

The Rezervito mark

Emails to your customers end with a short line, "Booked with Rezervito", with a small icon. Your store shows no Rezervito mark: not in the booking window, not on your customers' booking page. It is the same on every plan.

To remove them, contact us and we'll turn them off for your shop.

The Staff Portal's look

The Staff Portal card on the same tab sets the portal's Accent color: its highlights and buttons.

• Same as widget button (the starting choice) follows the widget's Button color.
• My own color lets you pick one.

An accent too faint to read in the portal isn't used: the portal keeps Rezervito's own blue, and the card tells you so. The portal's background, text and booking colors always stay the same, so it stays easy to read as a work tool.

The portal shows your store's Logo from Settings → Brand in Shopify; Open Brand settings takes you there. Without a logo it shows your shop's name. See Staff and hours.

The Book now button in a theme made with Canvas

Canvas is Shopify's new way to build a theme with Sidekick. A theme you duplicate with Canvas (Online Store → Themes, the theme's ⋯ menu, Duplicate in Canvas) keeps its apps as they were: if the Book now embed was on in the original, the floating button, the booking window, menu links to #book-now and your Book now page all work in the copy, and Rezervito sees it like any other theme. A theme Canvas builds from scratch can't hold apps yet, and there is nothing to turn on in Canvas itself. Rezervito recognises such a theme: while it is live and the embed is off, the Setup guide's Turn on the Book now button step says your live theme looks like it was built with Canvas, and shows your Book now page's address with Copy link instead of Open theme editor. (If Rezervito can't see your live theme at all, the step says "We can't see your live theme" and offers the same address.)

In that case you can:

• link customers to your Book now page: add it to your menu, and use it on social media, in emails and in QR codes; or
• publish a regular theme and turn on the Book now embed there.

The step stays open while your live theme can't be seen, and ticks itself once the embed is on in a live theme Rezervito can see.

Booking shows "Something went wrong" on your store

Rezervito's address on your store is /apps/booking on almost every store, but it can be another one. You can change it in Shopify (Settings → Apps → Rezervito → App proxy), and Shopify gives Rezervito another address, such as /apps/booking-1, when another app already uses /apps/booking. Rezervito follows the new address on its own once a visit reaches it: the booking window tries /apps/booking-1, /apps/booking-2 and /apps/booking-3 by itself, and the Where customers can book card then shows your Book now page at the new address. Booking emails sent after that link to the new address too.

If the booking window still only says "Something went wrong. Please try again.", open your store in the theme editor: there the booking window tells you, and only you, what's wrong. In Shopify, go to Settings → Apps → Rezervito, open the App proxy URL shown there once, then reload your store.