Want your booking widget to match your store’s branding exactly? Hoppy Appointments lets you add your own CSS on top of the built-in design settings, so you can fine-tune fonts, colors, spacing, buttons, and more.

This guide walks you through adding and applying custom CSS to the booking widget.

⚠️ Before You Begin

Before using custom CSS, make sure you have:

• The Hoppy Appointments app installed on your Shopify store
• At least one active service
• Basic familiarity with CSS selectors and declarations

💡 For most design changes — colors, fonts, logos, and button styles — use the built-in Design settings first. Custom CSS is best when you need changes the built-in options don’t cover.

For a full overview of the built-in design options, see Appointment Bookings — Design & Styling Options.

🛠️ Step 1 — Open the Custom CSS Editor

Custom CSS can be managed in two places.

Global CSS (applies to all services by default)

1. Open the Hoppy Appointments app
2. Click Settings in the app menu
3. Click Design
4. Scroll down to the Custom CSS card at the bottom of the page

Per-service CSS (overrides global CSS for one service)

1. Open the Hoppy Appointments app
2. Go to Services
3. Click the service you want to style
4. Click the Design tab
5. Make sure that Do not Follow Default Theme Settings should be checked
6. Scroll down to the Custom CSS card

🛠️ Step 2 — Choose Global or Service-Level CSS

When editing CSS on a service’s Design tab, you’ll see a toggle:

Do not Follow Default Theme Settings

• Off → the service uses the global CSS from Settings → Design
• On → the service uses its own CSS from the service-level Design tab

This lets you keep one consistent style across all services, or give specific services a unique look.

🛠️ Step 3 — Write Your CSS

The CSS editor starts with a default template that includes the most common widget selectors. You can replace or extend the template with your own rules.

Main wrapper classes

Common selectors you can style

Example

.futureblink-appointment .confirm-btn {
background-color: #2563eb;
color: #ffffff;
border-radius: 8px;
}

.futureblink-appointment.mobile .confirm-btn {
background-color: #1d4ed8;
}

ℹ️ You do not need to add !important to your declarations. Hoppy Appointments automatically appends !important when the CSS is injected into the widget, which helps your rules override the default styles.

🛠️ Step 4 — Apply the CSS

After entering your CSS, click the Apply button below the editor.

• Apply → enables the custom CSS and injects it into the booking widget
• Reset → disables the custom CSS and reverts the editor to the default template

⚠️ Custom CSS only takes effect after you click Apply. Pasting CSS into the field alone does not change the widget appearance.

💾 Step 5 — Save and Preview

1. Click Save in the top bar
2. Wait for the confirmation message
3. Preview the booking widget on your storefront or in the admin preview panel

If you edited per-service CSS, make sure the Do not Follow Default Theme Settings toggle is turned on, otherwise the global CSS will still be used.

💡 Tips & Best Practices

• Start small — change one element at a time so you can see what each rule affects
• Use specific selectors — target .futureblink-appointment .your-class instead of broad selectors that might affect other parts of your store
• Test on mobile — use the .futureblink-appointment.mobile prefix to adjust the mobile layout separately
• Keep a backup — copy your working CSS into a notes file before clicking Reset
• Use the built-in design settings first — colors, fonts, and logos are easier to manage there and don’t require CSS knowledge

🐞 Troubleshooting

My CSS isn’t showing on the storefront

1. Make sure you clicked Apply in the Custom CSS editor
2. Make sure you clicked Save at the top of the page
3. For per-service CSS, make sure Do not Follow Default Theme Settings is turned on
4. Check that your selectors match the actual widget class names
5. Clear your browser cache or test in an incognito window

The widget reverted to the default look

Clicking Reset disables the CSS and restores the default template. If you want your custom rules back, paste them in again and click Apply.

Some rules don’t work

The auto !important injection works best with simple property: value; declarations. Very complex CSS — such as @media queries, @keyframes, or nested selectors — may not be transformed reliably. Keep your rules straightforward for the most consistent results.

📚 Related Articles

• Appointment Bookings — Design & Styling Options
• How to Configure Meeting Locations for Appointment Bookings
• How to Set Up Appointment Booking Services

Updated on: 20/08/2026