Product gallery

Square main image with thumbnails when two or more gallery images are set; arrow keys move the selection.

Product

Pack defaults

With content

In context

Source

import { ProductGallery } from "demo-webshop/components";

const props = {};
<ProductGallery {...props} />

Injected into the previews above. Product gallery

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */