> ## 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).

# 🎨 How to set Custom CSS for Appointment Bookings App

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**

| Selector | What it targets |
| ----- | ----- |
| `.futureblink-appointment` | The entire booking widget |
| `.futureblink-appointment .dialog` | The main booking dialog (desktop) |
| `.futureblink-appointment.mobile .dialog` | The main booking dialog (mobile) |
| `.futureblink-appointment .userInfoSection` | The service details panel |

## **Common selectors you can style**

| Selector | What it targets |
| ----- | ----- |
| `.futureblink-appointment .confirm-btn` | Confirm / Book button |
| `.futureblink-appointment .continue-btn` | Continue button |
| `.futureblink-appointment .back-btn` | Back button |
| `.futureblink-appointment .time-slot.selected` | Selected time slot |
| `.futureblink-appointment .highlighted_date.react-calendar__tile--active` | Selected calendar date |
| `.futureblink-appointment .schedule-form` | Customer booking form |
| `.futureblink-appointment .meeting-booked` | Success / confirmation page |

## **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**