Art Selector

Browse and select artwork to apply to products. Supports artwork of any size or aspect ratio.

Interactive Demo

Try the interactive playground below - select different artworks and see them applied to product images in real-time. Switch to the "DIY" variant to see how to build your own custom art selector using the useShop() hook:

Loading playground...

ArtSelector Props

artworksstring[]
Array of artwork image URLs (must be absolute URLs). The component automatically loads dimensions from each image.
classNamestring
CSS classes to apply to the container.

Installation

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project

Product-Level

ArtSelector can also work at the product level for individual artwork per product.

Make Your Own

ArtSelector is easy to build from scratch using the useShop() hook. Check out the DIY variant in the interactive playground above to see a fully working example.

Key concepts:

  • Use useShop() to access artworks, selectedArtwork, and setSelectedArtwork
  • Call setSelectedArtwork(artwork) to update the shop context - all Product components automatically receive the selected artwork
  • You can pass artworks directly to the Shop component via the artworks prop
  • The Shop component automatically loads each image and extracts width, height, and aspect ratio

How artwork URLs become full objects:

  1. You pass an array of URL strings to Shop or ArtSelector
  2. The component loads each image and automatically extracts width, height, and aspect ratio
  3. It creates full artwork objects and adds them to the shop context
  4. When you call useShop(), you get these enriched objects with id, src, width, height, and aspectRatio