The Collection Widget lets you display a grid of your events and services on any Shopify page. Each card shows the service name, price, duration, and the next available time slots. Customers click a card to go straight to that service's booking page.
This is particularly useful if you run an event-based business — a yoga studio with multiple class types, a winery offering different tours, or a venue with regular workshops — and you want one place on your site where customers can browse everything you offer.
Enabling and configuring the widget
Step 1: Open the Collection Widget settings
In the app, go to Settings > Marketing (or click Widgets in the side navigation).
Find the Collection Widget section.
Step 2: Choose which events to display
Click inside the Add events or services to collection field and search by name.
Click each event you want to include. A badge shows how many you've selected.
Use the Reorder button to drag events into the order you want them to appear on the storefront.
Step 3: Choose what information to show on each card
Use the checkboxes to control what appears on each event card:
Show Product Description — displays the first few lines of your product description
Show Price — shows the starting price (e.g. "From $45.00")
Show Duration — shows the session length (e.g. "60 minutes")
Show Attendees Per Timeslot — shows the maximum number of attendees a customer can book per time slot
Show Filter Bar — lets customers narrow the collection by location, date, time of day, and number of guests
Hide Next Available Times — hides the suggested date pills and leaves only the Select a time button on each card
Step 4: Save
Click Save at the bottom of the settings card. The preview below the settings updates immediately so you can see how the widget will look on your store.
💡 Tip: The widget requires a Pro plan or higher. If the Save button is greyed out, check your plan under Settings > Billing.
Embedding the widget on a page
Once you've saved your settings, you need to place the widget on a Shopify page.
On your homepage (recommended)
Go to Online Store > Themes > Customize.
In the section list on the left, click Add section.
Select Custom Liquid.
Paste the following code inside the Liquid code box:
<div data-servicify="collection"></div>
Drag the section to where you want it on the page.
Click Save.
On any other Shopify page
Go to Online Store > Pages and open the page you want to edit.
Switch the editor to HTML view.
Paste
<div data-servicify="collection"></div>at the point in the page where you want the widget to appear.Save the page.
How customers interact with the widget
The widget renders as a responsive grid — one column on mobile, two on tablet, and three on desktop. Each card shows:
A product image (if one is set on the Shopify product)
The service name (links to the product page)
Duration and starting price
The next available booking slots
Customers click a card (or one of the listed time slots) to go to the product page, where the booking calendar opens automatically.
Letting customers filter the collection
Turn on Show Filter Bar in the Collection Widget settings to help customers find a service with availability that fits their needs. The bar includes:
Location — all locations or a specific location used by one of the services in the collection
Date — a date from today onward
Time — any time or a time-of-day range
No of Guests — the number of attendees the customer wants to book
After the customer clicks Check Availability, the collection shows only services that match all of the selected filters. The selected date replaces the usual upcoming-date pills on each matching card.
When the customer chooses a matching service, the product page opens its booking calendar with the selected date and guest count carried forward. If that date is still available, it remains selected; the guest count also carries into the attendee selector. The location and time-of-day filters are used to find the service but are not carried into the booking calendar.
💡 Tip: If you set a Location filter on the Event Collection Grid app block in the Shopify Theme Editor, the collection is limited to that location. When it resolves to one location, customers won't see a redundant location selector in the filter bar.
Displaying capacity in the widget
The widget shows the next available slots for each event. If you have Show number of available spots enabled in Settings > General, those spots counts are visible when the customer clicks through to the booking calendar.
To show capacity directly on each event card's time slot preview, make sure Show number of available spots for each timeslot is enabled in your general settings — see Showing Spots Remaining Per Timeslot for how to turn that on.
Use cases
Yoga studio: Show every class type — Vinyasa, Restorative, Beginner Flow — in one browsable grid so customers don't have to hunt through separate product pages.
Winery: Surface all your tour options (cave tour, wine and cheese tasting, private blending session) on a single "Plan Your Visit" page.
Events venue: Let visitors browse upcoming workshops and reserve their spot without leaving the homepage.
⚠️ Warning: The Collection Widget only shows events you've explicitly selected in the settings. If you add a new service to the app but don't add it to the widget, it won't appear automatically. Return to Settings > Marketing whenever you add a new service to keep the widget up to date.