Display styles: shop, category, product, card & popup

The same snippet can show different things depending on a couple of optional attributes. Add them to the <div>, and the widget adapts.

Show one category or one item

Add an attribute to pin the embed to a single category, product, or bundle — handy for putting the right thing on the right page of your site.

<!-- Just one category -->
<div data-lettably-shop="YOUR-SHOP-ID" data-lettably-category="lawn-games"></div>

<!-- Just one product -->
<div data-lettably-shop="YOUR-SHOP-ID" data-lettably-product="giant-jenga"></div>

<!-- Just one package -->
<div data-lettably-shop="YOUR-SHOP-ID" data-lettably-bundle="big-games-package"></div>

Choose how it looks

A single product or package can show as a full booking form, or as a neat card/tile or a 'book now' popup button that opens the booking form over your page. Set a default for your whole shop in Settings, or override any single embed with one attribute.

• tile — a category-style card with photo, name, price and a 'Book now' button (the default).
• card — a compact card with a thumbnail and button.
• popup — a button that opens the full booking form in a pop-over.
• classic — the full booking form inline on the page.

<div data-lettably-shop="YOUR-SHOP-ID"
     data-lettably-product="giant-jenga"
     data-lettably-template="card"></div>