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:

🎨 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 ✨

Updated on: 31/07/2026