Step 1: Integrate Easy Appointment Booking with your Theme
✅ This is the most common reason why the button does not show.
In the app, go to Settings > Theme Integration.
Click "Go to theme editor" which will pre-select this app to embed on your theme.
Ensure Appointment Booking is turned on like below. Click Save on top right.
Back to the app, go to Dashboard > View in Store to verify that the button loads.
If your theme has been integrated and you still cannot see the Select a Time button, follow the instructions below.
Step 2: Ensure the app is enabled
A) Navigate to the Settings tab in our app > General Settings.
B) Ensure the app is enabled, as shown below. If not, click on Enable.
Step 3: Make sure you're viewing your product page (/products)
Look at the product page for the event that is tied to the app. The webpage URL should contain “/products/” in it. For example, it can be found when you click 'View'
If an add to cart appears on your collection or search view, you can hide it in a few quick steps, please see this article
Step 4: Make sure your product template has buttons visible
If you're on the product page and the button does not appear at all, check your theme template.
1. Go to Online Store > Theme > Customize
2. On the top dropdown, click on products and the main template
3. Go to the left hand side and ensure that Buy Buttons are enabled
4. Click Save, go back to your event (App Dashboard, View) and verify the button appears
Step 5: Check Product Settings
Please ensure the following properties are set
You have published your product on your Online Store sales channel.
Track quantity is disabled.
Product is a digital product or service
This ensures your page is visible and you don't have a "Sold Out" message.
Step 6: Just reach out, we will help you!
Sometimes the app doesn't quite find your add-to-cart button, but our team is available to help.
Email us at hey@getservicify.com and we will take care of it for you! Or you chat with us on the bottom-right of this article :)
Alternative 1: If your button says "Add to Cart", then update the button class in the app
NOTE This is a technical step. If you are not comfortable, reach out in the chat app for help and we can help you!
If this still doesn't work, you will have to define the button class of your Add to Cart button in the app. class name of your Add to Cart button governs the style of that button.
Right click on that button, Inspect, find that button’s class, and copy the class name.
If the class name has spaces in between them, replace those spaces with periods (.) and place a period before the first class. For example, if your class name is
add-to-cart main
Copy and tweak that to be
.add-to-cart.main
3. In the app, head to Settings, General, scroll to the Advanced section, Add to Cart Selector, and replace the text with the string you created with periods ( .add-to-cart.main ). Click Save
4. See your event and the Select a Time button appears
Is there a way to launch the Easy Appointment Booking app on a draft theme/site?
You can have the app embed enabled (Online Store > Theme > Customize > left hand side App Embed > enable Easy Appointment Booking).
Then, when creating an event, you can do so with a draft product. To view the event and test it, you can go to the Shopify product and test/show it in preview.
Alternative 2: If your button loads slowly from "Add to Cart" to "Select a Time", then use metafields
NOTE This is a technical step. If you are not comfortable, reach out in the chat app for help and we can help you!
This approach disables the Add to Cart button so that customers don't mistakenly book without a date and time. This helps prevent Orders without bookings as well.
Go to Shopify Settings > Custom Data > Products > Add Definition
2. Define the metafield as follows
Name: Accept Bookings
Namespace and key: custom.accept_bookings (this will automatically fill as you write the name)
Description: Disables Add to Cart until Select a Time loads
Type: True or False
Click Save
3. Go to your Shopify Product > Product Metafields section. Make Accept Bookings equal to True. Click Save
3. Go to Online Store > Themes > Edit Code. Open the buy-buttons.liquid file. NOTE: this file is different from theme to theme. We are not theme experts but this is our guidance for a standard theme like Dawn.
4. Add the following snippet in the liquid section at the top
assign accept_bookings = false
if product.selected_or_first_available_variant.metafields.custom.accept_bookings or product.metafields.custom.accept_bookings
assign accept_bookings = true
endif
5. Add "or accept_bookings" on the if statement to ensure that the Add to Cart button should be disabled
6. Now you'll see the Add to Cart disabled for that particlar product until Select a Time loads! Now this will apply for any product with that Metafield assigned to True (Step 3 above). See below, demonstrated on a low speed internet environment.
If you need help, email us at hey@getservicify.com and we will take care of it for you! Or you can chat with us on the bottom-right of this article :)