Note: Some technical experience required, please reach out to hey@getservicify.com if you need support!
If the Shopify Add to Cart button is visible while loading, a customer may be able to purchase your event without selecting a time. You can reduce that risk by adding an Accept Bookings metafield in your theme's button code, which disables Add to Cart from being clicked for those specific products attached to the events.
Step 1: Create the “Accept Bookings” Metafield
1. Log in to your Shopify admin.
2. Go to Settings > Metafield Definitions > Products.
3. Click Add Definition.
4. Name: Accept Bookings (Namespace & Key will automatically say custom.accept_bookings). Add a description if you wish
5. Type is True or False
6. Click Save
Step 2: Assign the Metafield to a Product
1. Go to Products in your Shopify admin.
2. Select the product that requires a booking.
3. Scroll down to the Metafields section.
4. Find Accept Bookings and set it to True (if the product requires a booking) or False (if it can be purchased normally).
5. Save the product.
Step 3: Update the theme's buy-buttons code to disable “Add to Cart”
1. Go to Online Store > Themes.
2. Open the theme's action menu and choose Edit code.
3. Find the buy-buttons.liquid file in Sections or Snippets. Theme versions use different file names, so ask a developer if you cannot find the file that renders your product buttons. Alternate file names: product-form.liquid, main-product.liquid
4. Add a condition around the Add to Cart button so it is disabled or hidden while the booking widget has not finished loading when product.metafields.custom.accept_bookings is true. See Examples below
5. Save the file and test a booking product in a duplicate or unpublished theme first.
The exact Liquid varies by theme. The goal is to prevent the standard Add to Cart action for products marked Accept Bookings until Easy Appointment Booking replaces it with Select a Time.
Example: Add the Following Code to the top of your liquid file
Find the file (ie. buy-buttons.liquid. ALT: product-form.liquid, main-product.liquid)
Add this snippet at the top of the liquid file
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
3. In the add to cart liquid, check for the presence of the Accept Bookings metafield to disable Add to Cart in that case.
<button type="submit" name="add"
{% if accept_bookings %} disabled {% endif %}>
Add to Cart
</button>
Or if there's already a disabled section add or accept_bookings to the end of that. See below.
Note: if you have a buy-buttons liquid file, please reach out to hey@getservicify.com if you need support we can help!
Don't have a buy-buttons liquid file? We recommend engaging your developer as we are not theme experts, but happy to provide guidance where possible!
Step 4: Test the Changes
1. Visit a product page that requires a booking.
2. Confirm that the “Add to Cart” button is disabled before Select a Time loads. Select a Time will be clickable.
3. Try a product without the metafield or with “Accept Bookings” set to False – the button should work normally without the temporary disablement.
If we have made the changes and it still does not work, what do we do?
We would have to engage your theme developer to help us get this working for you! Some themes are open to collaborating for a fix, and others are not as open to this. If the theme is unwilling to support, then we are unable to accommodate this feature for you. If you're unsure, please reach out to hey@getservicify.com