Set up and share your overlay checkout

An overlay checkout is a great option for venues that want guests to stay on their website while they shop. It sits as a side panel over your existing site, so guests can keep browsing as they add to cart.

That means less friction, lower cart abandonment, and higher conversions.

In this video, you'll set up an overlay checkout end to end. We'll create the checkout, work through the setup tabs, configure your add ons, and share it from your website.

Before you build, take a moment to think like a guest. How would you find what you want? Which products belong together?

Group similar products into sections like most popular, jump sessions, parties, and memberships so guests can find what they want fast.

Give every product a short, clear description and a high quality, accurate image.

These two things directly drive conversion.

We recommend creating one primary overlay checkout that includes everything you sell online so guests have one place to browse and one place to manage their bookings.

If you have an area of your website where you market and sell a specific product or group of products, for example, a party's page on your website, you don't need to create separate overlay checkouts.

We recommend having one checkout with all your products, and you can link call to action buttons to specific products or sections.

This allows your guests to find the right product based on where they are in your website without scrolling, but also allows you to cross sell other products.

To create the checkout, go to apps, then progressive checkouts. Select create checkout and choose online checkout.

Enter a name. This name becomes part of your checkout URL and can't be changed later, so choose something you'll be happy with long term.

Select done. Your checkout setup area opens at the basics tab.

From here, you'll configure three tabs, basics, products, and options. Before getting started on the basics tab, it's important to disable enable homepage within the option settings.

This will allow you to save the checkout without completing compulsory fields for the homepage checkout and save you time.

Use the basics tab to style your checkout. To add your branding, overwrite the existing primary button colors with hex codes that match your brand colors.

Because the overlay checkout opens directly into your products page and doesn't use the homepage feature, you don't need to configure homepage widgets, override your background image, override your logo, or change your overlay colors. These sections only apply to full page checkouts with a homepage.

Next, head to the products tab.

This is where you add everything you sell online into your overlay checkout. Select add section and give it a name, like jump sessions, then add your products.

You can select products one by one, pull in a whole product category, or use product tags.

Categories and tags are a great choice if you want products to flow into your checkout automatically when they're added to a category or tag during creation.

We recommend putting your most popular products at the top of the checkout. Repeat until all your sections are built, and use drag and drop to reorder them in the order you want guests to see them. When you're finished, select save.

Scroll down to the add ons area. This is where you control how add ons appear to guests.

Add ons need to be attached to a product first, which you do inside the product under additional options.

If an add on isn't showing up within the checkout configuration, that's the first place to check.

Use the display position settings to choose where each add on appears, on the product details page, on a dedicated add ons page, or both.

A good rule of thumb, essential items like grip socks for a jump session work best on the product details page so guests don't miss them. For conversion reasons, impulse items like f and b combos, photo packages, or locker hire work better on a dedicated add ons page once the guest has committed to purchasing the core product. Put higher value items at the top, keep descriptions short and benefit led, and only show add ons that are actually relevant.

Jump socks on a laser tag session creates friction, not value.

When you're finished, select save.

The options tab lets you fine tune how the overlay behaves. Who's between a date led or product led flow?

Date led asks the guest to pick a date first, then shows what's available on that date.

Product led lets the guest pick from all available products first, then a date and time.

Choose whichever feels more natural for how guests think about their visit.

If product availability is likely to influence which day a guest visits, we recommend choosing product led. Whereas, if you feel a guest is choosing to visit your venue based on whenever is most convenient to them, we recommend choosing a date led checkout.

Finally, you can also adjust how the products, details, and payments pages work.

Common high value configurations include setting a preselection message or pre purchase message to provide guests with critical information before they commit to a product or purchase. Display call to book so guests can still reach out easily if their product isn't available.

This is great for products like parties or corporate events.

Show number of tickets remaining, minimum ticket value, and booking timer to increase conversion and drive urgency.

Capture postcode to enhance your marketing data.

When you're finished, select save.

Before you go live, always preview and test.

Select view checkout to walk through the flow exactly as a guest would. Confirm that availability, pricing, and session times display correctly, that your sections and product images look the way you want, and that add ons appear in the right place at the right time.

We recommend testing on mobile as this is how most of your guests will be booking.

Once you've thoroughly tested your checkout, including taking payment, it's ready to implement on your website.

Always remember when implementing checkouts on your website that the goal should be to allow your guests to access the checkout they need in two clicks or less and avoid scrolling to find the call to action button where possible.

To access the instructions for implementing the overlay checkout, edit your checkout and click share.

Follow the steps under integrate with your website, which includes adding a script and a trigger to your website.

On your website, overlay buttons can open at different points in the checkout.

A book now button opens the full product list.

A book a party button opens straight to the party section.

A purchase a gift card button opens that exact product.

Our support article, add the overlay checkout experience to your website, will guide you on the steps required to implement your overlay checkout based on your intended outcome. That's your overlay checkout built, tested, and ready to share.

You've worked through the basics, products, and options tabs, placed your add ons where they'll convert best, and set up buttons that get guests to the right product fast.

You're ready to share your checkout with guests.