The "Select a Time" Button

When a customer visits a product page linked to one of your services, they'll see a Select a Time button instead of the standard "Add to Cart" button. Clicking it opens the booking calendar so they can pick a date and time, add attendees, and check out — all without leaving your store.

How the button works

The button is powered by a Shopify App Extension (also called an App Block). The extension injects the booking calendar directly into your product page template so the button loads fast and only runs on products that are actually linked to an event. Pages with no linked event are unaffected, which keeps your store's speed score healthy.

Setting up the button with App Extensions (recommended)

Using an App Block gives you the fastest load time. Set it up once and it applies to every bookable product automatically.

Step 1: Create a dedicated product template

1. In Shopify Admin, go to Online Store > Themes > Customize.
2. Click the dropdown at the top of the screen and navigate to Products > Default Product.
3. Click Create template and name it Events (based on the Default Product template).
4. Click Save.

Step 2: Add the Select a Time block

1. In the theme editor, select your new Events template from the dropdown.
2. In the left panel, click the Product information section.
3. Click Add block and choose Select a time.
4. Drag the block above the Buy buttons block. Do not hide the Buy buttons block.
5. Click Save.

Step 3: Assign the template to your products

1. Exit the theme editor and go to Products in Shopify Admin.
2. Select all products that should accept bookings.
3. Click Edit products to open the bulk editor.
4. Click Columns and enable the Template column.
5. Set all selected products to the products.events template.
6. Click Save.

Step 4: Verify

1. Go back to your app Dashboard and click View next to any event.
2. Confirm the Select a Time button appears on the product page.

Alternative: App embed (legacy setup)

If you're not using App Extensions yet, the button can still appear via the app embed in your theme:

1. In the app, go to Settings > Theme Integration.
2. Click Go to theme editor — this pre-selects the app embed for you.
3. Make sure Appointment Booking is toggled on.
4. Click Save in the top-right corner of the theme editor.
5. Go back to the app, then Dashboard > View in Store to confirm the button loads.

Troubleshooting: button not appearing

Work through these checks in order.

1. Make sure the app is enabled

1. In the app, go to Settings > General Settings.
2. Check that the app is set to Enabled. If not, click Enable.

2. Confirm you're on a product page

The button only appears on product pages — URLs containing /products/. It will not appear on collection pages, search results, or the home page. Use Dashboard > View next to an event to jump to the correct URL.

3. Check that Buy Buttons are visible in your template

1. In Shopify Admin, go to Online Store > Themes > Customize.
2. Select your product template from the top dropdown.
3. In the left panel, confirm that Buy buttons are enabled (not hidden).
4. Click Save.

4. Check your product settings

Make sure the product linked to your event has:

• Status set to Active and published to the Online Store sales channel.
• Track quantity disabled (so it never shows "Sold out").
• Product type set to a digital product or service in Shopify.

5. Switched themes recently?

When you switch to a new theme, the app embed must be re-enabled on that theme. Go to Settings > Theme Integration and click Go to theme editor to turn it back on.

6. Button disappears when switching variants?

Some themes don't update the page URL when a customer switches product variants. The app relies on the URL changing to detect which variant is selected. If the button disappears on variant switch, contact us at support@getservicify.com — it's a quick fix we apply regularly.

7. Conflict with dynamic checkout buttons

Shopify's Buy it now, Apple Pay, and Google Pay buttons can sometimes push the booking button out of position.

1. In the theme editor, open your product page template.
2. In the product section settings, disable Show dynamic checkout buttons.
3. Click Save and check if the button appears correctly.

8. Button loads slowly (switching from "Add to Cart")?

If you see "Add to Cart" flash before the booking button loads, switch to the App Extensions setup described at the top of this article. If you need a quicker interim fix, you can disable the Add to Cart button during loading — see our guide on fixing orders with no bookings.

9. Still not working?

Sometimes the app can't automatically locate the Add to Cart button in a custom theme. You can manually tell it the button's CSS class:

1. Right-click the Add To Cart button on your product page and choose Inspect.
2. Find the button's class attribute and copy the class names.
3. If the class contains spaces, replace each space with a period and add a period at the start. For example, add-to-cart main becomes .add-to-cart.main.
4. In the app, go to Settings > General, scroll to Advanced > Add to Cart Selector, and paste the string.
5. Click Save and reload your product page.

If none of the above steps resolve the issue, contact us — our team is available to help and often fixes custom theme issues within minutes.

Want the button on non-product pages?

The booking button only loads automatically on /products/ pages. To show your calendar on a home page, landing page, or any other page, use the Storefront Widget feature instead.

Next steps

• Show your booking calendar on any page
• Timeslots not appearing correctly