An Image swatch option lets customers choose from visual samples — fabric textures, wood grains, material finishes, or style thumbnails — instead of plain text or a flat color chip. If you searched for a Shopify image swatch option, this guide explains how it differs from a color dropdown and how to set one up in a few minutes with Optionify, a free product options app.
How do I add an image swatch option in Shopify?
Shopify's native variants can only show text or basic color swatches, so they can't display a real material photo per choice. With Optionify, create an option set, add an Image swatch option, add each value with its own thumbnail image, assign the set to your products, and enable the theme app embed. Customers then select from visual samples on the product page.
Fabric texture swatches on a live product page, each a selectable image with a label
How is an image swatch different from a color dropdown?
Both are visual pickers, but they solve different problems:
- Color dropdown — shows solid color chips or named colors. Perfect when the choice is a plain, uniform color like "Navy" or "Forest Green."
- Image swatch — shows an actual picture for each choice. Use it when the choice has pattern, texture, or material a flat color can't convey: linen vs. velvet, oak vs. walnut, matte vs. glossy, or a printed pattern.
If a customer needs to see the surface to decide, use an image swatch. If a single solid color says it all, a color dropdown is simpler. And if you don't need a visual at all, a dropdown menu of text choices may be enough.
How to set up image swatches in Optionify
- Click Create option set and name the set (e.g. "Upholstery fabric").
- Add an option and choose the Image swatch type.
- Enter the option label, such as "Choose your fabric" or "Select a finish."
- Add each choice as a value — "Linen," "Velvet," "Boucle" — and upload a thumbnail image for each one.
- Give any premium choice an add-on price (details below).
- Decide whether the option is required so customers must pick a material before adding to cart.
- Assign the set with the right assignment method — All Products, Tagged Products, Collections, or Individual Products.
- Set the set to Active and save with Shopify's save bar.
Adding image swatch values, each with its own uploaded thumbnail and optional add-on price, in the Option Set Editor
Swatches only appear on the storefront once the theme app embed is enabled in your theme editor, so switch it on before you preview.
Can each image swatch add to the price?
Yes. Every image swatch value can carry an add-on price in one of two modes:
- Fixed — a set amount, e.g. "Velvet (+$25.00)."
- Percent — a percentage of the product price, e.g. "Premium leather (+20%)."
This is ideal for material upgrades where premium options cost more than the standard choice. The add-on charge carries to checkout through a hidden companion product, so it works with Buy it Now and Shop Pay too. See pricing variants for how the total reaches the order.
What image size should I use for swatches?
Use small, square, evenly sized images so the swatches align cleanly in a row. Tightly cropped close-ups of the texture or material read far better than full product shots, because the customer is judging the surface, not the whole item. Keep the crop and lighting consistent across every swatch in the option so the set looks deliberate rather than mismatched.
Real use cases for image swatches
Furniture and upholstery. A sofa product offers linen, velvet, and boucle fabric swatches, with premium fabrics priced higher than the standard weave.
Made-to-order apparel. A made-to-measure shirt shows real fabric close-ups — oxford, poplin, twill — so customers pick the weave they want.
Materials and finishes. A cabinetry or countertop store shows oak, walnut, and marble finishes as image swatches, each priced by material.
Style and design thumbnails. A custom sign, invitation, or print shop shows style thumbnails so shoppers pick a look at a glance.
Because each selection is saved as a line item property on the order, your fulfillment team sees the exact fabric or finish the customer chose — no ambiguity between similar-sounding names. Since swatches aren't variants, they never create SKUs or count against Shopify's 3-options-per-product limit, so you can offer a wide material range on a single product.
FAQ
How do I add an image swatch option in Shopify? Shopify variants only show text or basic color swatches. With Optionify, create an option set, add an Image swatch option, add each value with its own thumbnail, assign it to your products, and enable the theme app embed.
How is an image swatch different from a color dropdown? A color dropdown shows solid color chips, ideal for plain colors. An image swatch shows an actual picture per choice — a fabric texture, wood grain, or style photo — for patterns and materials a flat color can't represent.
Can each image swatch add to the price? Yes. Every value can carry a fixed amount or a percentage of the product price, so premium fabrics or materials cost more than the standard choice, and the charge carries through to checkout.
Do image swatches create Shopify variants? No. They live outside the variant system, so they never create SKUs or count against Shopify's 3-options-per-product limit.
What image size should I use for swatches? Use small, square, evenly sized images. Tightly cropped texture or material close-ups read better than full product photos.
Get started with Optionify
Want to show fabrics, finishes, and styles as visual samples? Install Optionify — it's free, forever, with all 17 option types, per-choice pricing, and image swatches included.
Install Optionify on the Shopify App Store
New here? Start with creating your first product option, then compare color swatch options for plain colors and dropdown options for text choices.