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):

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

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:

4. Styling Your Button

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

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.

Updated on: 12/08/2025