To add the booking widget in Reservics, open your Shopify theme editor and add one of two blocks: the inline Reservation Widget (a booking form you drop on any page) or the site-wide Reservation Button (a floating “Book a table” button that opens the form in a popup). Both mount natively in your theme, with no iframe, and let you set accent color, button text, and position.
Before you start #
- Install Reservics and finish first-run setup so you have at least one location with hours and booking rules. See Install and set up Reservics.
- The widget reads your live booking rules, so set hours and capacity first for accurate availability.
- Both blocks are available on every plan, including Free. Branding options (accent color, button text, position) are also available on every plan.
Option 1: Add the inline Reservation Widget to a page #
Use this when you want the full booking form to sit inside a page, for example a “Reservations” page or near the top of your homepage.
- In your Shopify admin, go to Online Store, then Themes, and click Customize on your live theme.
- In the theme editor, open the page where you want the form (for example, create or open a “Book a table” page).
- Click Add section or Add block, then choose Reservation widget from the Reservics app.
- Drag the block to the position you want on the page.
- In the block settings on the right, set your branding options (see the table below).
- Click Save.
Option 2: Add the site-wide Reservation Button (floating button) #
Use this when you want a “Book a table” button on every page of your store. The button floats in a corner and opens the booking form in a popup.
- In your Shopify admin, go to Online Store, then Themes, and click Customize on your live theme.
- In the theme editor, open the App embeds panel (the toggle icon in the left sidebar).
- Find Reservation button in the list and turn it on.
- Adjust its settings: button text, position, button color, button text color, and modal width.
- Click Save.
The floating button works site-wide with no extra setup per page. It also powers the customer self-service flow: when a diner clicks the manage or cancel link in their confirmation email, the popup opens automatically so they can review or cancel their booking. See Manage or cancel a reservation.
Branding options for each block #
You set branding per block placement, so two widgets on different pages can look different.
| Setting | Reservation Widget (inline) | Reservation Button (floating) |
|---|---|---|
| Heading text and alignment | Yes | Not applicable |
| Button text | Yes | Yes (also the popup title) |
| Accent / button color | Yes | Yes |
| Accent / button text color | Yes | Yes |
| Card style (bordered card vs. flat) | Yes | Always card style in the popup |
| Border radius (corner roundness) | Yes (0-24 px) | Not applicable |
| Max width | Yes (320-1200 px) | Modal width (320-896 px) |
| Vertical margin | Yes (0-100 px) | Not applicable |
| Floating position | Not applicable | Bottom right, bottom left, top right, or top left |
| Pin to one restaurant | Yes (optional Restaurant ID) | Shop-wide picker |
Notes:
- The default accent color is dark gray (
#111827) with white text. Change it to match your brand. - For the inline widget, the Max width setting is ignored when Card style is turned off, because a flat widget fills the full section width.
- Leave the inline widget’s Restaurant ID blank to show a location picker. If you have one location, the form skips the picker automatically.
Can I use both blocks at once? #
Yes. Many restaurants add the inline Reservation Widget on a dedicated “Reservations” page and also turn on the floating Reservation Button so guests can book from anywhere on the site. Each block keeps its own branding settings.
Frequently asked questions #
Do I need to edit any code to add the booking widget? #
No. Both blocks are added through the Shopify theme editor with no code. The inline form is added as a section or block on a page, and the floating button is turned on in the App embeds panel.
Where does the floating “Book a table” button appear? #
It appears on every page of your store, fixed in the corner you choose: bottom right, bottom left, top right, or top left. Clicking it opens the booking form in a popup. The default position is bottom right.
Can I change the button text and color? #
Yes. Both blocks let you set the button text, button color, and button text color in the theme editor. The inline widget also lets you set a heading, corner roundness, card style, and max width. These options are available on every plan, including Free.
Will the widget match my theme’s fonts? #
Yes. The widget mounts natively in your theme’s page (no iframe), so it inherits your theme’s typography and reflows with the page width. You control the accent color and corner roundness separately so the booking action stands out.
Does the widget show availability automatically? #
Yes. The widget reads your live location hours, capacity, and booking rules, so diners only see times you can actually take. Set up your hours and capacity first for accurate availability. See Operating hours and shifts.
