Image swatches
Use a real photo as the chip, for prints, textures and anything a flat color cannot describe.
An image swatch renders a photo, cropped into the chip. Use it whenever a single color would be a lie: leopard print, oak, marble, tartan, tie-dye, glitter.
Upload a photo#
Set the value's type to Image#
In the Configure step, switch the value from Color to Image.
If the value already has a variant photo, Varn pre-fills it with that photo, which is usually what you want.
Choose a file#
Press the upload control and pick an image. Varn uploads the original file at full quality to Shopify's Files, then stores only the CDN URL.
Save#
The Files permission#
Uploading needs Shopify's file permissions. If Varn does not have them yet, a banner appears with a Grant access button that opens Shopify's own permission dialog. It takes one click and no app restart.
If you skip it, uploads still work using a small local thumbnail instead, so you are never blocked. Grant the permission when you can, for the quality.
Choosing a good crop#
The chip is a small square or circle, so the photo is centre-cropped hard.
- Crop tight before uploading. A full product shot at 40 pixels is a smudge. A close-up of the fabric reads instantly.
- Fill the frame with the pattern. Aim for the texture, not the garment.
- Keep the scale consistent. If one chip is a macro shot and its neighbour is a whole shirt, the row looks broken.
- Square source images avoid surprises about what gets cut.
Image swatches and your gallery#
They are separate things, and both are useful:
- An image swatch is the chip the shopper taps.
- A per-color gallery is the set of photos shown once they have tapped it.
Selecting a swatch commits its image to the main gallery, and Varn holds it through your theme's own re-render so it does not snap back to the previous photo.
Pushing swatch photos into your product#
If you want the photo you uploaded to also become the variant's photo in Shopify, use Set image swatches as variant photos. See Sync to variant photos.
Mixing types in one row#
Perfectly fine, and common. A row can be three solid colors, one gradient and two photos. Varn renders them at the same size with the same shape, so the row still looks deliberate.