Enable swatches in the Cama Variant picker block and supply color or image swatch data from Shopify. Product options then render as color or image swatches instead of plain pills or dropdown values. Apply the same steps to the main product page and the Featured product section.
Show color and image swatches for product variants
Updated 3 months ago
Enable swatches in the Cama Variant picker block and supply color or image swatch data from Shopify, and product options render as color or image swatches instead of plain pills or dropdown values. Apply the same steps to the main product page and the Featured product section.
How swatches are supplied
Swatch colors and images come from Shopify, not from Cama. An option value shows a swatch only when that value carries Shopify's native swatch data — a color or an image stored on the product option value. When such data exists and Enable swatches is on, Cama draws the swatch; without native data, the option falls back to the configured pills or dropdown.
A variant's product image is separate from an image swatch. Uploading a normal variant image does not create an image swatch; an image swatch is set on the option value itself.
Add color or image swatch data in Shopify admin
Set up the swatch data in Products before configuring the theme. The product needs a Shopify Standard Product Taxonomy category that exposes a color category metafield.
In Shopify admin, go to Products and open the product.
In Category, assign a category that provides a color category metafield.
In Category metafields, open the relevant color field and select an existing entry or choose Add new entry.
Fill the entry's predefined fields, entering the color as a hex value or supplying an image, and save.
In Variants, click + Add options like size or color and select the category metafield so its entries populate the option values.
Select the values to use and save the product.
For the full Shopify walkthrough, see Shopify's adding color swatches using category metafields guide.
Change the swatch on an existing option
Edit the connected category-metafield entry to change the color or image an option value shows.
On the product, click the variant option, click the option value field, click the entry, click Edit, edit the fields, and click Save.
To update the swatch for every product that uses the same entry, edit it globally under Content → Metaobjects → category-metafield definition and open the entry.
Enable swatches in the theme editor
Turn swatches on per product option in the Variant picker block, which sits in the Product information area of the product template and is also available in the Featured product section.
In Online Store → Themes → Customize, open the product template.
Select the Product information section and open the Variant picker block.
Turn on Enable swatches. It is on by default.
Under Picker type, choose Pills or Dropdown.
How picker type and unavailable options behave
With Enable swatches on and swatch data present, a Pills picker becomes swatch controls and a Dropdown picker shows a selected-swatch preview. Selecting a swatch selects the matching variant and updates the price, media, availability, and add-to-cart state; on the product template it also updates the browser URL, while the Featured product and quick-add surfaces do not.
Unavailable options appear with sold-out or unavailable styling and an off screen label of Variant sold out or unavailable; in a dropdown, an unavailable value shows an "- Unavailable" suffix.
To round the corners of color and image swatches, set Swatch border radius under the theme's General styles to a value from 0 to 100 (the default is 30).
Preview the result
Preview the product page and select each swatch to confirm the expected variant, media, and price update. Then check an option with no Shopify swatch data to confirm it falls back to pills or a dropdown, and select an unavailable option to confirm it is marked as such. Repeat the checks in the Featured product section for the same behavior.
The Variant picker is one of the product blocks available in the product sections.
FAQ
How do I show color and image swatches for product variants in the Cama theme?
Where do swatch colors and images come from?
Swatch colors and images come from Shopify, not from Cama. An option value shows a swatch only when that value carries Shopify's native swatch data — a color or an image stored on the product option value. A variant's normal product image is separate from an image swatch; an image swatch is set on the option value itself.
How do I add color swatch data to a product in Shopify admin?
Set up the swatch data in Products before configuring the theme. The product needs a Shopify Standard Product Taxonomy category that exposes a color category metafield. Assign that category, open the color field under Category metafields, add or select an entry with a hex value or image, then add the category metafield as an option value in Variants.
Why does an option show a pill or dropdown instead of a swatch in Cama?
An option falls back to the configured pills or dropdown when its value has no Shopify native swatch data. When native color or image data exists and Enable swatches is on, Cama draws the swatch; without that data, the option shows as a pill or dropdown.
How do I change the color or image of an existing swatch in Cama?
Edit the connected category-metafield entry. On the product, click the variant option, click the option value field, click the entry, click Edit, edit the fields, and click Save. To update the swatch for every product that uses the same entry, edit it globally under Content → Metaobjects → category-metafield definition.
Was this helpful?
Was this helpful?