# CollectionSwipe

> Mobile swipe deck for a live Shopify collection. Swipe right to add to bag, left to pass. Renders nothing at 768px and wider.

Canonical URL: https://bcc38ef904de:3005/islands/commerce/collection-swipe

> One product card at a time over a live collection. Swipe right (or tap the bag button) adds to bag; swipe left passes; Undo brings the last card back. Tap the left or right half of the photo to step through images. Loads more cards automatically and ends with a "seen every piece" state. Use it as the mobile view next to a CollectionGrid with `hideOnMobile`.

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| collection | string | No | - | Collection handle, or `"$resource"` on a collection template. |
| pageSize | number | No | 12 | Cards fetched per page. |
| initialSort | string | No | `manual` | Same values as CollectionGrid. |
| showFilters | boolean | No | `true` | Filter chips above the deck. |
| quickAdd | boolean \| object | No | `true` | Quick Add used by right swipes. `false` makes right swipes "like" only. |
| openCartOnAdd | boolean | No | `false` | `true` opens the cart drawer after each add. |
| likeLabel | string | No | `Add to bag` | Right-swipe stamp and button label. |
| skipLabel | string | No | `Not for me` | Left-swipe stamp and button label. |
| aspectRatio | string | No | `4 / 5` | Photo aspect ratio. |
| metafields | string[] | No | - | Metafields card templates may read. |

## Embed Example

```html
<lx-island name="CollectionGrid">
  <script type="application/json">{ "collection": "festive-jewellery", "hideOnMobile": true }</script>
</lx-island>
<lx-island name="CollectionSwipe">
  <script type="application/json">{ "collection": "festive-jewellery" }</script>
</lx-island>
```

## Card templates

Uses the same `<template data-slot="card">` bindings as CollectionGrid. `<lx-slot name="media">` receives the tap-through photo viewer. Do not add `<lx-slot name="quick-add">`: the deck's own controls add to bag.

## Styling

Theme with `--lx-swipe-*` tokens (`card-bg`, `card-radius`, `card-shadow`, `media-radius`, `like-color`, `skip-color`, `like-bg`, `like-fg`, `control-*`, `width`) and `[data-part]` hooks: `deck`, `card`, `card-media`, `card-photo-bars`, `stamp-like`, `stamp-skip`, `controls`, `skip`, `undo`, `like`, `end`, `empty`, `error`. The island owns card motion; do not add CSS transforms to `[data-part="card"]`.