Widget customization
Booknatic offers 2 widget types with different customer interactions. Only one can be active at a time.
Popup Booking Widget
Replaces the Add to Cart button with Book Now. When customers click, the full booking flow opens in a popup right on the product page — they stay on the same page, no redirect.
On-page Booking Widget
Displays the calendar and booking form directly below the Add to Cart button on the product page — customers see the calendar immediately without clicking anything.
Switch between the two
- Go to the Widget tab in the left sidebar.
- You'll see two cards: Popup Booking Widget and On-page Booking Widget.
- The active one is labeled
Enabledin green. - Click Enable on the one you want — the other auto-disables.
Widget Appearance — Color, Border & Calendar
Customize the colors, borders, calendar, and time slots of the widget through 2 tabs: Popup Design and Calendar.
Open the Edit appearance tool
- Go to the Widget tab in the left sidebar.
- On the active widget card, click Edit appearance.
- The customizer opens with 3 tabs: Popup Design, Calendar, Text.
Tab 1 — Popup Design
Color tokens
Field | Affects |
|---|---|
Background popup colour | Background of the popup / widget container |
Background calendar colour | Background of the calendar area |
General text colour | General text color |
Selected option | Background of the selected option |
Selected option text color | Text color of the selected option |
Confirm button color | Confirm button background |
Confirm button text color | Confirm button text |
Border design
Field | Affects |
|---|---|
Border popup size | Slider 0–100. Border radius of the popup corners. |
Capacity | Slider 0–100. Opacity of the dark overlay behind the popup. |
Border colour | Popup border color. |
Service description
Toggle Service description on + enter a Value to display the service description inside the widget.
Advanced customization (CSS)
A textarea for advanced custom CSS — use it when the available options aren't enough.
Tab 2 — Calendar
Calendar — Day state colors
Field | Affects |
|---|---|
Text color day picked | Number color of the picked day |
Day picked | Background of the picked day cell |
Today color | Highlight color for today |
Available day background | Background of available days |
Available day text color | Text color of available days |
Unavailable day text color | Text color of unbookable days |
Dates within selected range | Background of dates inside the selected range (Multiple-day) |
Time format
Field | Affects |
|---|---|
Time format selected | Color of the selected format (24h or AM/PM) |
Unavailable time format | Color of the unselected format |
Slot design
Field | Affects |
|---|---|
Slot background | Background color shared by all slots |
Slot text color | Text color inside slots |
Selected Timeslot background | Background of the selected slot |
Selected Timeslot text color | Text color of the selected slot |
Selected slot badge background | Background of the "X slot left" badge |
Widget Text & Localization
The widget defaults to English. The Text tab lets you change every label displayed in the widget — no code required.
Open the Text tab
- Go to Widget → on the active widget card, click Edit appearance.
- Choose the Text tab (third tab).
Section 1 — Product page
Field | Description |
|---|---|
Replace "Add to Cart" button | Button text replacing Add to Cart on the product page |
Section 2 — General text
Field | Default | Translation suggestion |
|---|---|---|
Time slot duration needed | Time slot duration needed | Choose duration |
Shipping method selector | Shipping method | Delivery method |
Quantity selector | Quantity | Quantity |
Confirm booking title | Confirm booking | Confirm your booking |
Time slot selector | Available time slots | Pick a time |
Customer's timezone | Your timezone | Your timezone |
Confirm button | Confirm Booking | Confirm |
Booking confirmed | Your booking is confirmed! | Booking confirmed! |
Total text | Total | Total |
Pre-pay text | Pre-payment | Deposit |
Section 3 — Workshop service (Workshop only)
Field | Translation suggestion |
|---|---|
Participant chosen | Participants / Students |
Section 4 — Consulting / Demo (coming soon)
Field | Translation suggestion |
|---|---|
Platform confirmed | Meeting link sent to your email |
Platform linked | Meeting platform |
Multi-language
Booknatic does not currently support an automatic multi-language switcher. The Text tab holds only one set of labels.
Workarounds:
- Use Shopify Markets with separate stores per region → configure a separate Text set in each store.
- Theme translation apps (Translate & Adapt, Langshop) → Booknatic text is not auto-translated.
Save
Click Save in the top right. Changes take effect immediately.
Save changes
Click Save in the top right.
Updated on: 12/05/2026
Thank you!