Variants & color swatches
Product variants (color, size, material) show up in the Variant picker block. Citera renders them as:
- Color options → swatches — small colored circles
- Everything else → dropdowns (Size, Material, Style, etc.)
Set up variants in Shopify admin
Go to your Shopify admin
Open the product
Products → All products → [pick a product]
Add options
Under the Variants section, click Add options like size or color.
Fill in option names
Name (e.g. “Color”) and values (e.g. “Black, White, Sage”).
Save
Color swatches — two setup methods
Swatches appear on product cards, in collection filters, and on the product page. Citera resolves a color’s swatch in this order:
1 · Native Shopify swatches (recommended)
In your product’s admin page
Scroll to Variants
Click a color value
Attach a color or image
Shopify lets you assign a hex color or upload an image swatch for each option value.
Save
Citera picks this up automatically — no theme setting needed.
2 · Theme color map (fallback)
If you can’t or don’t want to use native swatches, map colors once in the theme settings.
Open the theme editor
Theme settings → Product page
Find Swatch list
Enter one color mapping per line:
- Solid color:
Sage: #9caf88 - Texture image:
Marble: marble.jpg(upload the file in Settings → Files)
Save
The map is store-wide — every product with a “Sage” color option now uses that hex code.
Which options count as colors?
By default, options named Color or Colour render as swatches. To add more:
Theme settings → Product page
Find Swatch option names
Comma-separated list. Add your own: Color, Colour, Shade, Finish, Fabric
Show / hide swatches per placement
Theme settings → Product page
Find Show swatches on…
Toggle independently for:
- Product cards — the collection grid
- Product page — the variant picker
Variant-linked gallery
When a shopper picks a color variant, the product image gallery auto-switches to the images for that variant (if you’ve attached images to variants in Shopify admin).
No images per variant? No problem. If a variant has no attached images, the gallery stays on the main product images. Shoppers can still see the product, just not a color-specific photo.