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")
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.
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.
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.
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.