> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Appointment Bookings β€” Design & Styling Options Hoppy Appointments comes with a complete design system so your booking widget, success pages, reschedule page, and cancel page all look at home in your store. You can control colors, fonts, buttons, backgrounds, and even upload custom images. Everything is managed through two places: * **Settings β†’ Design** β†’ Shop-wide defaults that apply to every service * **Service β†’ Design tab** β†’ Per-service overrides when you want one service to look different This guide explains every design setting, when it appears, and how it affects the storefront. --- # **⚠️ Before You Begin** Design settings are managed from: * **Hoppy Appointments β†’ Settings β†’ Default Design** for global defaults * **Hoppy Appointments β†’ Services β†’ \[your service\] β†’ Design** for per-service overrides Before styling the widget, make sure: * The Hoppy Appointments app is installed * You have at least one service created * The **Appointment Bookings** app embed is enabled in your Shopify theme ℹ️ Without the app embed enabled, customers won’t see the booking widget at all β€” no matter how beautiful your design settings are. See the **Calendar Not Showing** troubleshooting guide if you need help enabling the embed. --- # **🌐 Global vs Per-Service Design** ## **Global Design (Settings β†’ Design)** This is your shop-wide default. Every new service automatically uses these colors, fonts, and styles unless you tell it otherwise. Use this when you want a consistent look across all your bookable services. --- ## **Per-Service Design (Service β†’ Design tab)** Each service has a checkbox labeled: **Do not Follow Default Theme Settings** * **Unchecked** β†’ The service uses the global design. All color/font fields are hidden to keep things simple. * **Checked** β†’ The full design editor appears, and this service uses its own styling instead of the global defaults. πŸ’‘ Use per-service design when one service needs to look different β€” for example, a premium consultation with a darker theme or a holiday-themed class. --- ## **What Is Controlled Where** Most design settings exist both globally and per-service, but a few are service-only: | Setting | Scope | | ----- | ----- | | Colors, fonts, buttons, custom CSS | Global \+ per-service | | Custom logo | Per-service only | | Floating Action Button | Per-service only (configured on the General tab) | | Theme editor app block styling | Shopify theme editor only | --- # **🎨 The Design Tabs** The design editor is organized into tabs. Each tab controls a different screen customers see. --- ## **πŸ“… Booking Page** This tab controls the main booking widget β€” the calendar, time slots, form, and navigation buttons. ### **Font** Choose the font family used throughout the widget. The app supports dozens of Google Fonts plus common system fonts. * **System fonts** (like Arial or Helvetica) load instantly from the customer’s device * **Google Fonts** are loaded automatically when selected If a font can’t be loaded, the widget falls back to a safe default. --- ### **Background Colors** * **Outer background color** β†’ The area behind the booking widget * **Info section background color** β†’ The left panel that shows the service image, title, and price * **Card background color** β†’ The main card that holds the calendar and form These three layers let you create depth and separation inside the widget. --- ### **Text & Icons** * **Text color** β†’ The default color for most text in the widget * **Icons color** β†’ The color used for small icons like arrows and checkmarks --- ### **Selected Date & Time Slot** * **Selected background color** β†’ The color behind a chosen date or time slot * **Selected text color** β†’ The color of the text on the selected date or time slot These help customers clearly see what they have picked. --- ### **Buttons** * **Confirm button** β†’ Background and text color for the primary action * **Back button** β†’ Background and text color for going back a step * **Continue button** β†’ Background and text color for multi-step flows Each button can be styled independently so you can match your store’s button hierarchy. --- ## **πŸŽ‰ Success Page** This tab controls the screen customers see after a free or confirmed booking. * **Heading size / color** * **Description size / color** * **Details size / color** β†’ For booking summary text * **Button text size / background color / text color** β†’ The CTA button on the success screen * **Icons color** * **Custom image** β†’ Replace the default success illustration with your own image πŸ’‘ Uploading a custom success image is a nice way to reinforce your brand or celebrate the booking with a friendly graphic. --- ## **πŸ”„ Rescheduling Page** This tab has two inner sections: * **Reschedule Form** β†’ The screen where customers pick a new time * **Success Page** β†’ The confirmation screen after rescheduling is complete Each section has the same types of controls as the main Success Page tab: * Heading size / color * Message text size / color * Details size / color * Button size and colors * Icons color * Custom image --- ## **❌ Cancel Page** This tab also has two inner sections: * **Cancel Form** β†’ The screen where customers confirm they want to cancel * **Success Page** β†’ The confirmation screen after a cancellation is complete It includes the same styling controls as the Rescheduling Page tab. --- # **πŸ–ΌοΈ Custom Logo** ℹ️ This setting is available only in the **per-service Design tab**. Enable **Custom logo** to replace the product image on the booking widget with your own uploaded logo or image. * Recommended for branding consistency * Image uploads are limited to **1 MB** * Accepted formats include GIF, JPEG, PNG, and WebP --- # **πŸ§‘β€πŸ’» Custom CSS** For merchants who want pixel-perfect control, both global and per-service design pages include a **Custom CSS** editor. * Paste your own CSS into the editor * Click **Apply** to activate it on the storefront * Click **Reset** to restore the default CSS template and deactivate your changes The editor comes with a default template showing common selectors you can target, such as: * The outer widget container * The dialog card * The info section * Selected calendar dates and time slots * Confirm, back, and continue buttons * Mobile-specific variants ⚠️ Important: * Custom CSS is only applied when you click **Apply** * If a service follows the default theme, it uses the **global** custom CSS * If a service uses its own design, it uses its own **per-service** custom CSS * The app automatically adds `!important` to CSS declarations to help them override theme styles πŸ’‘ Custom CSS is great for advanced tweaks, but most merchants can get exactly the look they want using the color and font pickers alone. --- # **πŸ”˜ Floating Action Button** ℹ️ The Floating Action Button is configured on the **General tab** of a service, not the Design tab. It is included here because it has its own styling options. Enable the **Floating Action Button** to show a fixed **Book Now** button that follows customers as they scroll through your store. When enabled, you can customize: * **Button text** β†’ Default is β€œBook Now” * **Position** β†’ Bottom right, bottom left, or bottom center * **Background color** * **Text color** This is useful when you want customers to be able to book from any page, not just the product page. See the **Service Setup** documentation for full details on enabling and placing the floating button. --- # **🧩 Theme Editor App Block Styling** If you add the **Appointment Calendar** block through the Shopify theme editor, you get additional styling options that are independent from the app admin. These settings control the **card or button** that opens the booking modal: * **Title color / font size** * **Price color / font size** * **Option color / font size** * **View details button** β†’ Show/hide, text, colors, font size * **Book Now button** β†’ Background, text color, font size * **Block background color** ⚠️ Important: These settings style only the block on the page. The modal that opens still uses the design settings from **Settings β†’ Design** or the service’s **Design tab**. Some block settings only appear when the block is set to **Modal** mode. --- # **πŸ–₯️ How Styling Appears on the Storefront** The booking widget loads inside an iframe on your storefront. The iframe pulls in the design settings you configured and applies them to: * The outer widget background * The info panel and card backgrounds * All text and icons * Selected calendar dates and time slots * The Confirm, Back, and Continue buttons * The Success, Rescheduling, and Cancel pages * Custom logo placement * Custom CSS overrides Fonts are loaded dynamically. Google Fonts are fetched from Google’s servers, while system fonts are loaded from the customer’s device. If a font fails to load or a color is missing, the widget falls back to safe defaults so the booking experience stays usable. --- # **⚠️ Important Notes & Limitations** * **Global design is the default.** New services automatically follow the global theme unless you check **Do not Follow Default Theme Settings**. * **Custom CSS must be applied.** Writing CSS in the editor does nothing until you click **Apply**. * **Per-service CSS only applies when the service uses its own design.** If a service follows the global theme, it ignores its own custom CSS field. * **Custom logo is per-service only.** There is no global custom logo setting. * **Image uploads are limited to 1 MB.** Larger images will need to be compressed before uploading. * **Theme editor block settings are separate.** Styling the Appointment Calendar block in Shopify does not change the modal interior. * **Modal wrapper background is theme-controlled.** The area behind the popup modal is styled by the theme extension CSS, not by the app admin design settings. * **App embed must be enabled.** Design settings only appear on the storefront if the Appointment Bookings app embed is turned on in your theme. --- # **πŸ’‘ Common Use Cases** ## **Match the widget to your store branding** * Go to **Settings β†’ Design** * Set the **Outer background color**, **Card background color**, and **Text color** to match your store * Choose a font that matches your theme * Style the **Confirm button** to match your primary CTA Result: Every service looks like a natural part of your store. --- ## **One service with a different look** * Open the service β†’ **Design** tab * Check **Do not Follow Default Theme Settings** * Change the colors and upload a **Custom logo** Result: Only that service uses the custom styling. All other services keep the global design. --- ## **Custom success page image** * Open **Settings β†’ Design β†’ Success Page** * Upload a custom image under **Custom image** Result: Customers see your branded illustration after booking instead of the default one. --- ## **Advanced layout tweak** * Open **Settings β†’ Design** * Expand the **Custom CSS** editor * Add your CSS and click **Apply** Result: You can target specific widget elements that aren’t covered by the color pickers. --- # **πŸŽ‰ Final Result** Once your design settings are configured: βœ… The booking widget matches your store’s colors and fonts βœ… Success, reschedule, and cancel pages look consistent with your brand βœ… Per-service overrides let individual services stand out when needed βœ… Custom logos and images add a personal touch βœ… Custom CSS gives you full control over advanced styling βœ… Customers get a polished, professional booking experience 🎨 With the right design setup, booking an appointment feels like a seamless part of your Shopify store ✨ ---