Artwork Customizer
Interactive controls for artwork alignment and pattern tiling. Automatically adapts UI based on artwork type and product placements.
Interactive Demo
Try the interactive playground below - select different artworks, adjust alignment, and see the changes in real-time:
Loading playground...
ArtworkCustomizer Props
maxHeightnumberRegular artwork only. Maximum print area height in pixels.
Defaults to
Defaults to
120. Used for alignment calculations.classNamestringOptional CSS classes for the container.
Artwork Type
srcstringrequiredImage URL for the artwork.
type"regular" | "pattern"requiredDiscriminator that determines which props are available.
Usage
The component automatically adapts UI based on artwork.typeand manages all state via Design context. Try switching between regular and pattern artworks above, or try product RQNU68 to see automatic placement tabs.
Installation
npx merchify-cli init
This CLI will guide you through setting up Merchify components in your project