> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Collections

> Add save buttons to product cards on collection pages.

The collections placement adds a save/unsave toggle to each product card in your collection grids. When a customer taps the button, Swish handles variant selection, list assignment, and feedback automatically based on your [intent settings](https://swish.app/docs/guides/customize/intents.md).

By default, Swish places save buttons on product cards through the app embed. You can customize their position and appearance using the placement API.

## Setup

Target your product card selector and use an overlay layout to float the button on top of the card image.

```js theme={null}
swish.placements.create({
  id: "collection-save-button",
  target: {
    selector: ".product-card",
  },
  mount: {
    mode: "append",
  },
  element: {
    name: "save-button",
  },
  // Over a product photo: the icon-only chip. See `style` in the reference.
  style: "on-image",
  layout: {
    type: "overlay",
    anchor: "top-right",
    offset: { x: 8, y: 8 },
  },
});
```

> [!TIP]
>
> The `target.selector` matches every element on the page, including cards added
> dynamically by infinite scroll or quick view modals.

## Styling

Pass design tokens under `design` to match the button to your card style.

```js theme={null}
swish.placements.create({
  id: "collection-save-button",
  target: { selector: ".product-card" },
  mount: { mode: "append" },
  element: { name: "save-button" },
  style: "on-image",
  layout: { type: "overlay", anchor: "top-right", offset: { x: 8, y: 8 } },
  design: {
    background: "rgba(255, 255, 255, 0.8)",
    savedBackground: "rgba(255, 255, 255, 0.8)",
    color: "#1a1a1a",
    savedColor: "#ef4444",
    height: 36,
    radius: 18,
  },
});
```

Design tokens support responsive breakpoints. The default breakpoints are `sm` at 500px and `lg` at 700px.

```js theme={null}
design: {
  height: {
    base: 28,
    sm: 32,
    lg: 36,
  },
},
```

## Show on hover

A common pattern is to hide the save button until the customer hovers over the card. Use the `css` property to achieve this:

```js theme={null}
swish.placements.create({
  id: "collection-save-button",
  target: { selector: ".product-card" },
  mount: { mode: "append" },
  element: { name: "save-button" },
  style: "on-image",
  layout: { type: "overlay", anchor: "top-right", offset: { x: 8, y: 8 } },
  css: `[swish-placement-element="collection-save-button"] { opacity: 0; transition: opacity 0.2s; }
    .product-card:hover [swish-placement-element="collection-save-button"] { opacity: 1; }`,
});
```

## Container wrapper

Wrap the button in a custom container for easier styling or layout control:

```js theme={null}
swish.placements.create({
  id: "collection-save-button",
  target: { selector: ".product-card" },
  mount: { mode: "append" },
  element: { name: "save-button" },
  container: {
    tag: "div",
    classNames: ["my-save-button-wrapper"],
  },
  style: "on-image",
  layout: { type: "overlay", anchor: "top-right" },
});
```

## Advanced mounting

If the save button needs to sit inside a specific child element of the card, use `mount.at` to resolve a different element:

```js theme={null}
swish.placements.create({
  id: "collection-save-button",
  target: { selector: ".product-card" },
  mount: {
    at: { query: ".product-card__image-wrapper" },
    mode: "append",
  },
  element: { name: "save-button" },
  style: "on-image",
  layout: { type: "overlay", anchor: "top-right" },
});
```

See the [placements overview](https://swish.app/docs/guides/customize/placements/overview.md#mount-options) for the full list of `mount.at` options.

## Further reading

* [Placements overview](https://swish.app/docs/guides/customize/placements/overview.md) for mount options, layout types, attributes, and responsive values
* [Intents](https://swish.app/docs/guides/customize/intents.md) to configure save behavior
* [Placements reference](https://swish.app/docs/references/sdk/placements.md) for the full API


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.