> ## Documentation Index > Fetch the complete documentation index at: https://docs.riservahq.com/llms.txt > Use this file to discover all available pages before exploring further. # Add the booking widget to your theme Add Riserva's booking blocks to your online store in the Shopify theme editor. There's no code and no copying IDs. Riserva adds two blocks: | Block | What it does | Where it goes | | - | - | - | | **Experience booking** | A "Check availability" button (or an inline form) that opens the booking window | A product page, or any page | | **Experiences list** | Your bookable experiences as cards, in the order you set, with a search bar above them — date, time of day and guests; pick a date and each card shows that day's open times | A landing page — "Visit us", "Tastings & tours" | Both are **app blocks**. You add them from *Add block → Apps* (or *Add section → Apps*) inside your theme editor. There is nothing to switch on under *App embeds*. ## Before you start * The experience you want to sell online must be **Active**. * Publishing it must have created its Shopify product. See [Publish an experience](/getting-started/publish-an-experience). A Draft experience is invisible to guests, and an experience with no product can't be added to a cart. ## Add the booking button to a product page 1. In Shopify admin, go to **Online Store → Themes → Customize**. 2. Open the **Products → Default product** template (or the specific product's template). 3. Select **Add block → Apps → Experience booking**. 4. Drag it where you want the button to sit — usually just under the price. 5. **Save.** That's it. On a product page, the widget works out which experience it belongs to from the product itself. There is no ID to paste. Riserva does not hide your theme's own *Add to cart* button. On a product that exists only to sell reservations, most wineries hide the theme's buy button. That's a theme setting, or one of your theme's product-template options. Then guests see one clear call to action. The widget handles that gracefully. When it can't find a buy button to measure, it centres itself at a comfortable width instead of stretching edge to edge. ### Putting the booking button somewhere other than a product page Use the block's **Experience ID (advanced)** setting for a landing page, a blog post or a custom section. Paste the experience's ID there. The widget will show that experience wherever the block sits. On a product page, leave it blank. ## Add a list of experiences to a landing page Use the **Experiences list** block for a landing page such as "Visit us" or "Tastings & tours". Add it from *Add section → Apps* (or *Add block → Apps*) in the theme editor, then save. The list needs no setup. It shows every Active experience guests may book. They appear in the order you set with **Reorder** on Riserva's Experiences page, and alphabetically until you reorder. * Unlisted experiences never appear. * One-time events whose date has passed drop off the list. * Members-only experiences appear to recognised members as usual. Everyone else sees them marked "Members only". To give one location, or one theme, its own list, fill in **Only this location** or **Only experiences tagged**. For example, a page per property, or a "Family visits" page. Tags are set on each experience page, in the **Organization** card. A location is matched by its name, and capitals do not matter. A name Riserva does not know lists nothing, and the block then reads "No experiences match this block's location or tag settings yet." Check the name against Riserva's Settings → Venues & floor maps. Members-only experiences appear to recognised members as usual. Everyone else sees the same card, marked "Members only", with no times. For them, **Book** opens a "Reserved for members" notice with your message and your join button. Guests who aren't signed in also get a sign-in link. An experience whose **Show it to non-members as locked, with a link to join** box is unticked is not listed for non-members at all. That box is on the experience's page, under **Who can book**. ## Check it worked 1. Visit the product page (or the page you placed the block on) in a browser. 2. You should see your button. Click it. 3. The booking window should open with a month calendar and shaded, bookable dates. If nothing appears, or the window says the product isn't set up for reservations, see [Troubleshooting](/troubleshooting/troubleshooting#my-product-page-doesnt-show-the-booking-widget). ## What happens next On Riserva's **Home** page, the setup step "Place the booking widget on your storefront" ticks itself off. It does so the first time the widget **loads on your storefront**. Opening your product page (or previewing it in the theme editor) after adding the block is enough. ## Good to know * Guests manage their own reservations on a built-in page. See [The manage-reservation page (built in)](#the-manage-reservation-page-built-in). * Corner style applies to buttons only. Cards, panels and time chips inside the booking window keep Riserva's own shape, so the window stays readable in every theme. * Riserva treats the widget's class names as a stable surface, so Custom CSS customizations hold across updates. If a release ever has to change one, it will be announced ahead of time. ## The manage-reservation page (built in) You don't need to build anything for guests to manage their reservations. Every confirmation email links to a **built-in manage page** on your storefront at `/apps/bookings/manage`. It's rendered inside your theme, so it looks like the rest of your site. The link is personal. It opens the guest's own reservation with nothing to type. There they can **Change date or time** or **Cancel this reservation**, whichever your policy allows. The refund under your policy is shown first. If a guest arrives without their link, the page asks for the reservation code and email from their confirmation instead. ## Style the widget The widget is built to look like it belongs to your theme without you touching CSS. Left on their defaults, the settings copy the look of your store's own buy button. Change them in the theme editor, on the block. | Setting | Options | Default | | - | - | - | | **Display** | *Button that opens the booking window* · *Booking form shown on the page* | Button | | **Button label** | Any text | Blank — shows "Check availability" | | **Accent color** | Any colour | Blank — matches your theme's buttons | | **Button corners** | Match theme buttons · Square · Soft · Round · Pill | Match theme buttons | | **Button width** | Match theme buttons · Full width · Half width · Fit text | Match theme buttons | | **Button alignment** | Left · Center · Right | Center | | **Calendar days** | Match corner style · Round · Square | Match corner style | | **Experience ID (advanced)** | An experience ID | Blank | | **Join link** (under *Members-only experiences*) | Where the members-only notice sends non-members | Blank — uses the link under Riserva → Settings → Memberships | | **Join button label** (under *Members-only experiences*) | Any text | Blank — uses the label from Settings → Memberships | | **Custom CSS** (under *Advanced*) | CSS applied inside the booking window, after Riserva's own styles — the calendar, time list, and forms are all reachable | Blank | | Setting | Options | Default | | - | - | - | | **Cards** | Grid · List — grid suits a few photogenic experiences, list suits a longer program | Grid | | **Show descriptions** | On or off | On | | **Preselected date** | Today · Tomorrow · No date — start empty. Guests can still pick any date | Today | | **Only this location** (under *Which experiences*) | A location's name exactly as it reads in Riserva (Settings → Venues & floor maps) | Blank — every location | | **Only experiences tagged** (under *Which experiences*) | One tag, as set on the experience page under *Organization* — for example kids or napa | Blank — every experience | | **Join link for this list** (under *Members-only experiences*) | Where the booking window's join button sends non-members, for lists on this page | Blank — uses the link under Riserva → Settings → Memberships | | **Join button label** (under *Members-only experiences*) | Any text | Blank — uses the label from Settings → Memberships | | **Book button** | Opens the booking window · Goes to the product page | Opens the booking window | | **Accent color** | Any colour | Blank — matches your theme's buttons | | **Corners** | Match theme buttons · Square · Soft · Round · Pill | Match theme buttons | | **Calendar days** | Match corner style · Round · Square | Match corner style | | **Top spacing** / **Bottom spacing** (under *Spacing*) | 0–120 px | 28 px | | **Custom CSS** (under *Advanced*) | CSS applied inside the list, after Riserva's own styles | Blank | The widget looks at the first real buy button on the page. It copies that button's background colour, its text colour and its corner radius. It skips buttons that are see-through or nearly white, because those give a colour nobody can read. If it finds nothing to copy, it falls back to Riserva's own deep-wine accent and a centred button at a comfortable width. That's normal on a page with no buy button. Anything you set explicitly always wins over the automatic match. **What things mean on this screen:** [What things mean: What your guests see](/reference/guest-surfaces) ## Related * [Publish an experience](/getting-started/publish-an-experience) — an experience has to be Active, with a product, before the widget can sell it * [What guests see](/guest-experience/what-guests-see) — the booking window, step by step * [Guests managing their own reservations](/guest-experience/guest-self-serve) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.