APIANT

How to Add a Mindbody Booking Widget to Your Shopify Store

Your customers should be able to buy a class on your Shopify store and book it minutes later. Here's how to connect the two without touching a line of code you don't understand.

Shopify logo connected through a glowing booking calendar to the Mindbody logo

A customer finds your studio online, lands on your Shopify store, and buys a 10-class pack. Great. Now what? In a lot of setups, that’s where the experience stalls. The customer has paid, but they have no obvious way to actually book a class, and a few minutes later they get a confusing password email from a company called “Mindbody” they’ve never heard of.

This guide fixes both problems. First, we’ll walk through adding a Mindbody booking widget directly to your Shopify store so customers can book in a few clicks. Then we’ll cover how to sell on Shopify even if you can’t use Mindbody’s payment processing, and how ShopConnect quietly stitches the two systems together behind the scenes.

You don’t need to be a developer. If you can edit a page in Shopify, you can do all of this.


Part 1: Add a Mindbody Booking Widget to Your Shopify Store

The goal here is simple: a “Book Now” page on your Shopify store that shows your live Mindbody schedule, so customers can book without ever leaving your site.

What you’ll need first

  • Your Mindbody Branded Web widget code snippet (you get this from your Mindbody account)
  • A Shopify plan with an online store (Basic, Grow, Advanced, or Plus)
  • Admin access to your Shopify store
  • An Online Store 2.0 theme (like Dawn)

If you have all of that, you’re ready.

Step 1: Create the page

In your Shopify admin, go to Online Store → Pages → Add page.

Give it a title like “Book Now.” That title also creates the page’s web address. You can add a short intro in the Content box if you’d like, then click Save.

The Shopify Pages screen, with the Add page button highlighted

Step 2: Create a custom template

While you’re still editing the page, look at the right-hand side for the Template dropdown. Click it and choose Create template.

Name the template after your page (for example, “book-now”), and use Default page as the base. Click Save.

This gives your booking page its own template so you can drop in the widget without affecting the rest of your store.

Step 3: Add the widget code with a Custom Liquid section

Now go to Online Store → Themes and click Customize on your live theme.

Use the page dropdown at the top to select the new page and template you just created. In the left panel, click Add section → Custom Liquid.

Paste your Mindbody booking widget code into the box. It looks like this:

<div class="mindbody-widget" data-widget-type="Schedules" data-widget-id="XXXXXXXXXXX"></div>
<script async src="https://brandedweb.mindbodyonline.com/embed/widget.js"></script>

Replace the XXXXXXXXXXX with your own widget ID from Mindbody. Click Save, and the booking widget preview will appear right away.

The Dawn theme editor: a Custom Liquid section holding the Mindbody widget code, with the class schedule rendering live in the page preview

Step 4: Make the page visible

Head back to Online Store → Pages and open your page.

Set Visibility → Visible, then click Save. Visit the page’s web address to confirm the widget loads and your schedule shows up.

A Shopify "Book Now" landing page with a how-to-book explanation, links to services, and the Mindbody Schedules booking widget

Step 5: Add the page to your store menu

Last step: make the page easy to find. Go to Online Store → Navigation and open your Main menu.

Click Add menu item, name it “Book Now,” and link it to the page you created. Click Add, then Save.

The Shopify Navigation screen, showing the Main menu with the new Book Now item added

That’s it. Customers can now book straight from your store.

Optional: add a registration page too

If you also want a registration page, repeat Steps 1 through 4 with this registration widget code instead:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>
<healcode-widget data-type="registrations" data-widget-partner="object" data-widget-id="XXXXXXXXXXX" data-widget-version="0"></healcode-widget>

Then cross-link the two pages so customers can move between booking and registration easily.


Part 2: Selling on Shopify Without Mindbody Payment Processing

In some regions, Mindbody’s merchant processing isn’t available, which means you can’t take payment through Mindbody directly. The good news: you can still sell services, packages, and memberships on Shopify and have everything land correctly in Mindbody. The flow just changes slightly to “buy first, book second.”

How the flow works

  1. A customer buys a service, package, or membership on your Shopify store.
  2. ShopConnect creates or matches their Mindbody client record and logs the purchase, so their credit is already on file in Mindbody.
  3. The customer then logs into Mindbody to book their actual appointment or class.

ShopConnect is what bridges the two systems. The customer pays in Shopify, and ShopConnect makes sure that purchase shows up against the right client in Mindbody without you re-keying anything.

The one rough edge, and how to smooth it

There’s a moment that confuses customers if you don’t prepare for it. After they pay on your Shopify store, Mindbody sends them a password email. To a customer who’s never heard of “Mindbody,” that email can look like spam, and they may ignore it. Then they wonder where their class is.

The fix is communication. The docs recommend a single master message you reuse across the emails customers receive after buying:

“Thank you for making this purchase from our online store! Be on the lookout for your password email from our online booking software, Mindbody Online. Once you set your password, click here to book your appointment or class.”

The word “here” links to your booking page (the same Shopify “Book Now” page you built in Part 1, or an equivalent page on another website).

Where to put the message: three emails

The master message gets adapted across the three emails a customer receives after a purchase.

Email 1: the Shopify order confirmation. In Shopify, go to Settings → Notifications → Order confirmation. Add the master message near the top of the email, above the order summary. This sets expectations the moment the customer checks out, while they’re still paying attention.

Email 2: the Mindbody “Forgot Login Information” email. This is a shared automatic email, so you can’t fully replace it. Instead, add a conditional block after the existing content:

Did you just make a purchase from our online store? After logging in with the information above, click here to book the appointment or class you purchased, your purchase is already on file.”

You’ll find this in Mindbody Business automated email settings. It gives the customer their login while connecting it back to the purchase they just made.

Email 3: the Mindbody welcome email. Edit the business-mode version, since ShopConnect creates clients in business mode. Add the same kind of block:

Did you just make a purchase from our online store? Log in to your account, then click here to book the appointment or class you purchased, your purchase is already on file.”

This is also in Mindbody Business automated emails. It reinforces the booking step during onboarding.

Each “here” link should send customers to a page with your embedded Mindbody Branded Web booking widget. You have two options:

  • A Shopify page (requires the Basic plan or higher, not available on Starter). This is exactly the “Book Now” page from Part 1.
  • An external website. If your booking page lives on Squarespace, Wix, WordPress, or another platform, embed the widget there and point the links to it instead.

Either way, it’s the same page shown at the end of Part 1: explanation text up top, the booking widget below.

A setting worth knowing

ShopConnect includes a Send_mbo_password_reset_email setting that controls whether ShopConnect automatically triggers the Mindbody password-reset email. It’s worth knowing this exists so you can align your email messaging with what’s actually being sent.


Why This Matters

A booking widget and three edited emails don’t sound like much. But together they close the most common gap in selling fitness and wellness services online: the moment between “I paid” and “I’m booked.” That gap is where customers get confused, give up, or email you asking where their class went.

Putting the booking widget directly on your Shopify store removes a hand-off. Preparing the post-purchase emails removes the surprise. And ShopConnect removes the manual work in the middle, matching purchases to the right Mindbody client so you’re not reconciling two systems by hand.

Takeaways

  • The booking widget is a five-step Shopify task. Create a page, give it a template, drop in your Mindbody widget code via Custom Liquid, make it visible, and add it to your menu.
  • You can sell on Shopify without Mindbody payment processing. The flow becomes “buy first, book second,” and ShopConnect logs each purchase against the right Mindbody client automatically.
  • Communication is the whole game on the no-payment-processing flow. One master message, adapted across three emails, prevents the “what’s this Mindbody password email?” confusion.
  • Your “here” links and your booking widget should be the same page. Build it once, link to it everywhere.

Running ShopConnect and want a hand getting your Shopify store and Mindbody talking to each other? Reach out to the APIANT team, we’re happy to walk through it with you.