Collections

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

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 },
  },
});

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.

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.

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:

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:

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:

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 for the full list of mount.at options.

Get started

Features

Customize

Headless

AI tools

Setup

Styling

Show on hover

Container wrapper

Advanced mounting

Further reading

​Setup

​Styling

​Show on hover

​Container wrapper

​Advanced mounting

​Further reading

Setup

Styling

Show on hover

Container wrapper

Advanced mounting

Further reading