Variant picker and swatches
Feder offers multiple ways for customers to select product variants.
Picker types
| Type | Description |
|---|---|
| Dropdown | Standard select dropdown for each option |
| Button | Clickable buttons/pills for each option value |
Color swatches
When enabled, color options display as circular color swatches instead of text buttons.
| Setting | Description |
|---|---|
| Enable color swatches | Show swatches for color options |
| Swatch size | Small / Medium / Large |
Configuring swatches
Feder resolves each color swatch in this order (first match wins):
- Shopify’s native taxonomy swatch on the option value
- Product metafield
feder.swatch_<value>(for examplefeder.swatch_sand) - The value itself when it is already a hex code
- The store-wide Swatches list in theme settings (
ColorName:#hexcodeper line) - A CSS color-name fallback from the option value
Swatch trigger (under Swatches) is a comma-separated list of option names that count as color — default Color,Colour,Couleur,Farbe,Renk.
Full resolution order and edge cases: Product media gallery → Swatch colors.
Variant images and gallery grouping
By default, selecting a variant scrolls the gallery to that variant’s assigned image while every photo stays visible.
When Group images by variant is on, Feder filters the gallery to the selected color’s photos only — shared images at the front stay for every color, and each color block follows Shopify’s one-assigned-image-per-variant pattern. Setup steps, the grouping table, and troubleshooting live under Product media gallery → Group images by color.