Product media gallery
Detailed guide to the product media gallery and its layout options.
Thumbnail layout
Displays a large main image with smaller thumbnail images below (horizontal) or beside (vertical) it. Clicking a thumbnail switches the main image.
Grid layout
Displays all product images in a grid. Three sub-layouts available:
- Single — one column of full-width images
- First full — first image full width, rest in two columns
- Two column — all images in two columns
Image zoom
When zoom is enabled, clicking a product image opens a PhotoSwipe lightbox for a full-screen, high-resolution view with swipe navigation.
Group images by color
When a product comes in several colors, shoppers should see that color’s photos and nothing else. Feder can filter the product gallery to the selected variant, so picking Sand hides the Olive and Chocolate shots and leaves the Sand ones on screen.
Turn it on
Theme editor → Product page section → Group images by variant.
Turning it off restores the standard Shopify behaviour: every photo stays visible and the gallery simply jumps to the selected variant’s image. Grouping only does anything once at least one variant has an image assigned, so a product whose variants share a single photo set behaves the same either way.
How grouping works
Shopify allows exactly one image per variant. If Feder filtered on that alone, each color would show a single photo and every other shot would disappear. Instead the theme follows Shopify’s own guidance for adding images to product variants: keep a color’s photos together in the gallery and assign one of them to the variant.
Feder reads that arrangement as a set of groups:
- An image assigned to a variant opens a new group.
- Every unassigned image after it belongs to the same group, until the next assigned image starts the next one.
- Unassigned images before the first assigned image belong to no group and stay visible for every color. Use this for shots that are not color-specific — a fabric close-up, a size chart, a lifestyle frame.
So a gallery ordered like this:
| # | Image | Assigned to | Shown for |
|---|---|---|---|
| 1 | Fabric detail | — | every color |
| 2 | Olive, front | Olive / S · M · L | Olive |
| 3 | Olive, back | — | Olive |
| 4 | Olive, side | — | Olive |
| 5 | Sand, front | Sand / S · M · L | Sand |
| 6 | Sand, back | — | Sand |
…shows four images for Olive (1, 2, 3, 4) and three for Sand (1, 5, 6).
Thumbnails follow the same grouping, so the strip never points at a hidden slide.
Setting it up
- Upload every color’s photos to the product and drag them so each color’s shots sit together, in the order you want them browsed.
- Put any shared, color-neutral images at the very front of the gallery.
- In the Variants section, assign the first photo of each color block to that color’s variants. One image per variant is all Shopify allows, and one is all Feder needs — the rest of the block follows automatically.
- Make Color the first option of the product. Grouping keys off option 1, so a product whose Color sits in second place will not filter.
Nothing else needs tagging. You do not need alt-text conventions or an app.
Swatch colors
Feder resolves the dot next to each color name in this order, stopping at the first hit:
- Shopify’s native taxonomy swatch on the option value.
- A product metafield
feder.swatch_<value>— for examplefeder.swatch_sandset to#D8C9AE. Use this when one product’s “Sand” is warmer than another’s. - The value itself, when it is already a hex code such as
#79535B. - The Swatches list in theme settings — one
ColorName:#hexcoderule per line, applied across the whole store. - A CSS color-name fallback from the option value (for example
oliveorrose).
If the option value carries a swatch image, Feder renders that image instead of a flat color. When no native image is set, Feder can also use the variant’s featured media as the swatch face. A value that resolves to neither draws as an empty outline on the product page, so it is worth adding an unusual name to the Swatches list.
Which option counts as the color is itself a setting: Swatch trigger, under Swatches, holds a comma-separated list that ships as Color,Colour,Couleur,Farbe,Renk. Add your own wording there if your products name the option something else.
For more on picker types and card swatches, see Variant picker and swatches and Product card.
On collection pages
Product cards show the first four color swatches by default — raise or lower it with Maximum visible swatches under Product card in theme settings, which accepts 2 to 10. Colors past that limit are simply not drawn on the card.
Hovering a swatch previews that color’s photo on the card; clicking it keeps the preview and re-points the card’s link, so the product page opens already on that color.
Full card settings: Product card → Color swatches.
Troubleshooting
Every photo still shows for every color. No variant on that product has an image assigned, so there are no group boundaries to read. Feder deliberately shows everything rather than emptying the gallery.
A color shows more photos than expected. Its block probably runs on past where you meant it to end. The next color’s first photo has to be assigned to that color’s variants, otherwise it is read as a continuation of the previous block.
A shared image only appears for one color. Shared images have to sit before the first assigned photo. An unassigned image placed after a color block joins that block.
Color is the second option. Grouping keys off option 1. Reorder the options on the product so Color comes first.