Shopify color swatches: free setup, apps and a one-time option

Shopify color swatches are free in most current themes. Connect a product's Color option to Shopify's color category metafield, and the theme's Variant picker shows each color as a circle or square. Apps add collection-page swatches and link separate products. A one-time section adds photo tiles.

Section Store is a Shopify app with theme sections, bundles, a cart drawer and AI Pages. Its Product variants section costs $9 once. We make Section Store, and this guide says when you don't need it.

How do you add color swatches in Shopify for free?

You add free color swatches in Shopify by connecting your Color option to the color category metafield. A color swatch is a small circle or square that stands for one color choice. Shoppers click it instead of reading a dropdown. Shopify's help page on adding color swatches using category metafields sets out five steps. We read it on October 24, 2026.

1. Pick a product category. Open the product in your Shopify admin. In the Category section, choose a category with a color attribute, such as Apparel & Accessories > Clothing > Clothing Tops > Shirts. Click Save.
2. Add the color entries. In the Category metafields section, open Color and pick the entries you sell. Edit an entry to change its name, for example black to graphite. Add a new entry for a color that isn't listed.
3. Connect the option. In Variants, add an option and choose the Color category metafield. The values fill in from your entries. For an existing product, click the option and connect it with the dynamic source icon.
4. Turn on swatches in the theme. Open Online Store, then Edit theme, and go to the product. Click the Variant picker block and choose Circle or Square for the swatch display. Click Save.
5. Add swatches to filters (optional). In the Search & Discovery app, edit the color filter and tick "Include swatch". Tick "Use images when available" to show images you added for your colors.

Shopify's help page says the swatches "should display by default" when your theme has a variant picker block. Most current themes have that block. Test a product in preview before you move the whole catalog.

What can't Shopify's native swatches do?

Shopify's native swatches can't run on a theme without swatch support, and they only work on color options. The help page names both limits. These are the gaps merchants hit most:

• Vintage themes. Shopify says that with "vintage themes" you edit the theme code or hire a Shopify Partner.
• Color options only. "Swatches can only be used with a variant connected to color category metafield and related color entries." A Material or Pattern option stays a text button.
• A category with a color attribute. The product needs a category whose attributes include a color, such as Color, Frame color or Upholstery color. Shopify lists about 50 of them.
• Separate products per color. Native swatches switch variants inside one product. A store that lists each color as its own product needs a combined-listing app or custom code.
• Collection pages. Swatches on product cards depend on your theme. Some current themes show them, others don't. Apps such as Swatchy and Platmart add them to collection pages.

What is the Product variants section?

Product variants is a one-time Section Store section that shows each variant's photo as a clickable tile on the product page. It costs $9 once. It is a photo tile picker, not a color swatch tool. It draws no color circles. Stores had added it to a theme 3,061 times by October 15, 2026, from Section Store's catalog data.

A section is different from an app. Buying it copies the section's code into your theme. It then runs like any built-in section, with no app server between your shopper and the page. Section Store's purchase page says it plainly: "Buy once and keep it forever."

We read the section's code on October 24, 2026. You can see it on the Product variants demo product. This is what it does:

• One tile per variant. Each tile shows the variant's featured image. A variant without an image shows a placeholder. The section appears only on products with more than one variant.
• The selected variant is marked. Its tile gets the "Border active color" you choose.
• Tiles are links. A click opens that variant's URL, so the page reloads on the chosen variant. Your theme's own variant picker stays where it is.
• Grid or slider. Choose Grid or Slider under "Type". Set 2 to 6 "Items per row" for desktop and mobile separately.
• Seven positions. Above or below the buy buttons, the product title or the description, or below the price. "Below price" is the default.
• Custom tiles. Tick "Use custom blocks" and add Item blocks, each with an image and a URL. A tile can then link to a different product, such as the same shirt listed in another color.
• Styling. Padding, roundness, border thickness, aspect ratio (four shapes, set apart for desktop and mobile) and colors.

The section's own description names its limit: "Best with unique photos per variation. Not ideal for non-unique variation photos." A shirt in 3 colors and 4 sizes has 12 variants, so it shows 12 tiles, and many repeat the same photo. Custom blocks solve that. Add one Item per color and point each URL at that color's variant, such as /products/linen-shirt?variant=123. In our code check, a custom tile shows as selected only when its URL ends in the current variant's id. A tile that links to another product never shows as selected.

How do you set up Product variants?

You set up Product variants in four steps, and the first is giving each variant its own photo. The section reads the variant's featured image from your Shopify admin.

1. Assign variant images. In the product's Variants list, click each variant and choose its image. Our Shopify product image size guide covers the sizes.
2. Install Section Store and buy the section. Install from the Shopify App Store. The app is free to install. Buy Product variants in the app. Shopify bills the one-time charge.
3. Add it to your product template. Pick the theme in the app. Open the theme editor, go to the product template and click Add section. Choose a Position, such as "Below price".
4. Style and test. Choose Grid or Slider and the items per row. Click Save, because the section notes "Save settings to view updates". Then open a product in preview and click each tile.

The section finds the price, title and buy buttons by common theme class names. If it can't find your theme's buy button, use custom placement. Add a Custom Liquid block where you want the tiles and paste <div id='ss-product-variants'></div>, as the section's settings say.

Native swatches, an app or a section: which fits your store?

Native swatches fit most stores, a swatch app fits stores with separate products per color, and Product variants fits stores whose variants have their own photos. The table sets the three routes side by side.

Product variants and native swatches can run together. The native picker sets the option, and the tiles above it show the photos. Keep both only if the page still reads cleanly on a phone.

What do color swatch apps cost over three years?

Color swatch apps cost about $180 to $720 over three years on their paid plans, while native swatches cost nothing. The table prices four apps at list price for 36 months. It is an example, checked on each App Store listing on October 24, 2026.

The plans differ in what they count. Swatchy is free for 1 product, then $8.99 a month or $59.88 a year for unlimited variants. Platmart Color Swatches charges by product groups: $9.99 for 100, $19.99 for 500 and $49.99 for 5,000. Its free plan is only for development and partner stores.

Easify Custom Product Options has a Free Forever plan with 15 option types. Its listing puts "Image and Color swatch sliders" on Premium at $19.99. Easify adds its own options on top of Shopify variants, which suits personalized products. SA Variant Image Automator isn't a swatch app. It shows only the chosen variant's photos in your gallery, and its price rises with your Shopify plan, from $14.90 on Basic to $99.90 on Plus.

When is a swatch app the better choice?

A swatch app is the better choice when each color is a separate product or you need swatches beyond the product page. These are the cases where we'd pay monthly:

• Separate products per color. Platmart builds the groups for you, by hand, by collection or by metafield. Product variants needs a custom block per link, set up by hand.
• Swatches on collection pages. If your theme's product cards show no swatches, Swatchy and Platmart add them. Product variants only runs on the product page.
• Non-color options as swatches. Swatchy turns size and text options into buttons. Native swatches only cover color.
• Personalized products. Easify adds engraving text, file uploads and add-on prices, with swatches on its Premium plan.
• Stock signals. Swatchy can hide out-of-stock variants. Product variants doesn't mark sold-out tiles.

Our picks by need:

Product variants is a one-time purchase and needs no Section Store subscription. Section Store Plus, at $15 a month flat at any revenue, is a separate plan for bundles, quantity breaks, the cart drawer and AI Pages. Our Shopify bundle builder with no monthly fee guide covers another one-time section.

How we compared

We read Shopify's category metafields help page and the Product variants section code on October 24, 2026. Rival prices and ratings come from each Shopify App Store listing that day. The 3-year figures are list price times 36 with monthly billing, without annual-plan savings. We make Section Store, rated 4.9 from 2,900+ reviews.

More on product pages: our Shopify product page customization guide, product page design that converts and theme section apps compared. Next to the variant picker, shoppers also look for a size chart and an estimated delivery date.