> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.app-hive.dev/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 create a custom book now button

# How to Create Custom HTML/CSS Buttons for Appointify

With Appointify, you can fully customize your booking buttons to match your brand and website style — no coding restrictions. All you need to do is add a simple `<button>` element to your store and use special **data attributes** to link it to the right Shopify product or variant.

---

## 1. The Basics: The Button HTML

To create your own custom booking button, add this HTML snippet to your Shopify store theme (for example, inside your product page template or a custom HTML block):

```html
<button 
  data-appointify-product-id="1234567890"
  data-appointify-variant-id="0987654321">
  Book Now
</button>
```

### Required attribute:

* **`data-appointify-product-id`** — The Shopify product ID linked to your service.

### Optional attribute:

* **`data-appointify-variant-id`** — If your product has variants, you can specify one here. If not set, Appointify will use the default variant or the first variant.

💡 *Tip:* You can style the button however you want using your own CSS, change the text, or even replace it with a styled `<a>` element if you prefer.

---

## 2. Finding the Product ID

To link your button correctly, you need the **Shopify product ID** for the service you’ve set up in Appointify.

1. In your Shopify admin, go to **Products** → click on the product that represents your service.
2. Look at the URL in your browser. You’ll see something like:

```
https://your-store.myshopify.com/admin/products/1234567890
```

3. The number at the end (`1234567890` in this example) is your **product ID**.

📸 **Screenshot example:** ![Finding the product ID](https://storage.crisp.chat/users/helpdesk/website/-/a/d/9/1/ad91e0c51f735800/cleanshot-2025-08-12-at-175933_1pmrtc.png)



---

## 3. Finding the Variant ID (Optional)

If your product has multiple variants (e.g., different durations), you may want to link directly to one variant. When this variant is assigned to a duration, that duration will be opened by default.

1. In your Shopify admin, open the product page.
2. Scroll to the **Variants** section and click the variant you want.
3. Look at the URL in your browser:

```
https://your-store.myshopify.com/admin/products/1234567890/variants/0987654321
```

4. The number after `/variants/` (`0987654321` in this example) is your **variant ID**.

📸 **Screenshot example:** ![Open the variant](https://storage.crisp.chat/users/helpdesk/website/-/a/d/9/1/ad91e0c51f735800/cleanshot-2025-08-12-at-180149_v60zit.png)Finding the variant ID](https://storage.crisp.chat/users/helpdesk/website/-/a/d/9/1/ad91e0c51f735800/cleanshot-2025-08-12-at-180246_1p2qxci.png)



---

## 4. Styling Your Button

Once you’ve added the HTML, you can style it with CSS. For example:

```css
button[data-appointify-product-id] {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

button[data-appointify-product-id]:hover {
  background-color: #0056b3;
}
```

---

## 5. That’s It!

Once the HTML is in place and your IDs are set, Appointify will automatically turn that button into a working booking button for your customers.

---

✅ **Key Points to Remember:**

* Every Appointify button must have a `data-appointify-product-id`.
* `data-appointify-variant-id` is optional, but useful for multi-variant products.
* Make sure the linked product is connected to a service in Appointify.