Add Acuity Scheduling to Squarespace e-commerce checkout

🎉 Update: Jun 10 2023

I made a new plugin which adds Acuity Scheduling to Squarespace checkout. Or to be more accurate: before Squarespace checkout and in the cart page. It will replace the checkout button, making users select a date and time before paying. I made this so you can do local delivery, in-store-pickup and other delivery options where a date and time are needed Checkout the demo video below and get in touch to get the early beta version.

UPDATE: November 25th 2021

I added one more method. You can also sell products directly through Scheduling – not using Squarespace E-commerce at all. Check it out as solution number 4 below.

UPDATE: November 24th 2021

I’m updating this blog post after digging a lot deeper into this problem.

I’ve now custom coded various versions of Acuity Scheduling to multiple clients. Usually they’ve wanted to add Acuity Scheduling to Squarespace checkout to enable one these:

• in-store pickup date selection for Squarespace e-commerce orders

• Custom delivery date selection for Squarespace e-commerce orders

• Could also be used for any kind of scheduling related to an e-commerce purchase

Plugin coming up…

I’m now working on a plugin you can buy to add Scheduling as part of the Squarespace checkout process.

I’m available for hire to custom code Acuity scheduling to checkout

I also consult and custom code advanced implementations. For example with the addition of having a specific appointment type depending on products bought. If customers buys a product that takes 5 days to create, they’ll see a different scheduling calendar than if they buy a product that takes just 24h to create. We can also enable scheduling only for orders that have a specific product like a workshop or a catering service for a specific date.

Methods

Use a product form

We can skip Acuity and add a form to a product. We can add a date picker to that and there are pretty good plugins to create a better UI. this approach has a few problems:

1. You’ll need to add a custom form to every product separately. This takes time and is hard to maintain.

2. If customer buys multiple products in one order – things get messy

3. The plugins, although pretty good, still do not provide the user experience acuity scheduling does and they can be difficult to maintain. If you for example want to schedule time off, it’s much easier in Acuity Scheduling.

Add a custom checkout form

You can add a simple form to checkout. To this you could add a date picker, and times as a dropdown.

It’s not nearly as flexible and smart as Acuity Scheduling, you can’t block off dates, send reminders, manage / sync calendars. But it’s a simple and free option for small simple websites to try as a first option before developing something better

Add Acuity Scheduling BEFORE Squarespace ecommerce checkout

Pros and cons
+ Customer can see availability before committing. Might improve conversion rates
+ Customers cannot accidentally miss the scheduling
- Need to add email and name twice. There is a way to fix this though.

Acuity Scheduling AFTER Squarespace ecommerce checkout

Pros and cons
+ We can show different appointment types for different products
+ Or show a different appointment type for different shipping method like Pickup appointment for pickup orders and Delivery appointment for delivery orders
+ We can fill email automatically
- Customer must pay before seeing which dates are available

Sell products directly through Scheduling

Pros and cons
+ Almost perfect user experience for customers
+ Simple
- Impossible to sell multiple types of products in at one time. E.g: not selling a frisbee AND a guitar.
- Can get complex to maintain if you have more than 5 products because you have product landing pages in Squarespace, and products for sale with prices in Scheduling

Use Ecwid

You can add Ecwid e-commerce to Squarespace.

This way, you’ll replace the Squarespace e-commerce features completely with a more flexible system that allows a lot of extra features. E

cwid has complete support for pickup, local delivery, and choosing time and date for both. The user experience has a potential to be a lot smoother. However, it requires that you’ll use Squarespace for designing your website and Ecwid for e-commerce. Also ecwid might look a little bit different and require some CSS customisations to feel like a seamless part of your website.

I’m still investigating the pros and cons of this method and if it’s possible to get “clean urls” when adding Ecwid to Squarespace.

Add the cart products to the Scheduling appointment

This is a wild extra possibility.

What we can do, is we can get the list of all the products and their quantities from the shopping cart. We can then pass the list of products to the appointment booking in a hidden custom field.

So in the appointment the customer has booked, you’ll see the list of products related to that scheduled session – be it delivery, pickup or anything else.

That means, you could for example skip the checkout entirely and only have the customer pay when pickup up the order.

It also makes adding the email and name unnecessary in the Scheduling, because you can now see which Scheduled appointment matches which order by their content and the time they arrived. You could even hide the name and email fields (if you have a powerhouse plan in Acuity) so customers won’t have to add email and name twice.

Modify code below and use see the Dynamic Scheduling Page instructions here to do that

$(cartItemClass).each(function(){  var productName = $(this).find("a").html();  var quantity = $(this).find("input").attr("value"); listOfProductsInCart = listOfProductsInCart + " ——— " + productName + " " + quantity; //console.log(productName);  //console.log(quantity);  })

FAQ

• How to add both delivery AND pickup?

  • You could use one generic appointment type for both delivery and pickup. However naming it can be a bit challenging.

  • If you have Scheduling after payment, use can use javascript to check what was the price of shipping. If price of shipping = 0, it means customer chose pickup in checkout. You can then embed your pickup appointment type to order confirmation page. You’ll need this javascript:
    
    var ecommerceData = Y.Squarespace.CommerceAnalytics._yuievt.events["commerceTrack:commerce-checkout-confirmed"].details[0]

  • If you use scheduling before payment in the cart page, you could also have appointment types for delivery and pickup. However there is a risk that customers will make the wrong choice when paying.

  • You could also add Ecwid to your Squarespace. It would replace the Squarespace e-commerce and add tons of extra features, including local pickup, delivery, and choosing date and time for both.

• Is there a free option to Acuity Scheduling?

  I like Squarespace / Acuity Scheduling because it’s all in one place – everything inside your Squarespace website. Website, email campaigns, Scheduling and Analytics. I trust Squarespace with it’s design.

  However if you really need something that’s free you could try:

  Calendly (seems very good)

  SimplyBook.me
  
  Or Appointy (their landing page is not convincing at the moment)
  

• How to show different appointment type for different products

  You’ll need to add a custom piece of text to the products SKU. So some products would have SKU that contains “example1” . Then in order confirmation page you’ll inject this object:
  
  var ecommerceData = Y.Squarespace.CommerceAnalytics._yuievt.events["commerceTrack:commerce-checkout-confirmed"].details[0]
  
  
  And loop through the purchased items SKUs. If any of them contains “example1” you’ll add an iframe with a different appointment type. If not, you’ll add iframe with the default appointment type.

• Your question here?

  Get in touch at @info and I’ll be happy to answer any questions

If want Acuity Scheduling + Squarespace e-commerce – what should you do?

I’m now working on this. I’m digging deeper to find the best method and figure things out. It’s still quite a complex thing to set up. It has custom code in multiple places and needs all kinds of variables, redirects etc.

I’ll be updating this blog post with more in-depth tutorials, possible plugins, instructions & videos.

In the meantime you can get in touch – I’d love to help you if this is something you’d need implemented on your site. @hire

You can also use the form below.