On my product pages, I would like it if when a person clicks on a thumbnail to get a better look at the variant colour, the variant selector will show that variant (and vice versa). It isn’t native to the Craft theme, and I have 0 exerience for coding.
Yes, I can help with this. It’s possible to sync the variant selector with the product thumbnails so they update each other. Could you share your store URL so I can take a look at the setup?
Hey @SheeplessJon
In Craft, selecting a colour in the variant selector should jump the gallery to that variant’s image automatically, as long as each colour’s image is actually assigned to that variant in your admin. If that isn’t happening, that’s usually the reason and it’s a five minute fix with no code at all.
Share your store URL and I’ll take a look and tell you exactly which part is missing on your setup. And if you’d like it built properly so both directions sync perfectly, that’s exactly the kind of work I do, so I’d be happy to sort it for you quickly and cleanly, no coding knowledge needed on your end.
Cheers,
Moeed
www.sheeplessyarns.ca
You’re already halfway there. On CoBaSi - Solid your images are correctly assigned to their variants, since selecting a colour does pull up the right photo. So the variant to image direction already works.
The only missing piece is the reverse, clicking a thumbnail updating the selector to match. That’s the part that needs custom code, and it’s a small job on Craft.
Since it’s not only standalone possible by CSS so collaborator access would be required for that so feel free to share that in my private messages and I’ll be happy to take care of it.
Best,
Moeed
with craft only one way:
Clicking a thumbnail moves the image, but nothing tells the Color selector to move with it, so the reverse direction does nothing on its own.
Result after applying the following fix:
The fix:
1. Online Store > Themes, then Customize on your Craft theme.
2. Open a product page in the editor, then Product information > Add block.
3. Pick Custom Liquid.
4. Paste this in and Save.
<script>
window.thumbSync = window.thumbSync || {};
window.thumbSync['{{ product.id }}'] = [
{%- for variant in product.variants -%}
{%- if variant.featured_media -%}
{ "m": "{{ variant.featured_media.id }}", "o": {{ variant.options | json }} },
{%- endif -%}
{%- endfor -%}
];
if (!window.thumbSyncReady) {
window.thumbSyncReady = true;
document.addEventListener('click', (event) => {
const thumb = event.target.closest('.thumbnail-list__item[data-target]');
const picker = thumb?.closest('product-info')?.querySelector('variant-selects');
if (!picker) return;
const mediaId = thumb.dataset.target.split('-').pop();
const matches = (window.thumbSync[picker.dataset.productId] || [])
.filter((row) => row.m === mediaId);
if (!matches.length) return;
const groups = [...picker.querySelectorAll('fieldset, .product-form__input--dropdown')];
const current = groups.map((group) =>
group.querySelector('select')?.value ??
group.querySelector('input[type="radio"]:checked')?.value
);
// Keep the options the shopper already chose where the image allows it.
const best = matches.reduce((a, b) =>
b.o.filter((v, i) => v === current[i]).length >
a.o.filter((v, i) => v === current[i]).length ? b : a
);
let changed = null;
groups.forEach((group, i) => {
const value = best.o[i];
const select = group.querySelector('select');
if (select) {
const option = [...select.options].find((o) => o.value === value);
if (!option || option.selected) return;
[...select.options].forEach((o) => o.removeAttribute('selected'));
option.setAttribute('selected', 'selected');
select.value = value;
changed = select;
} else {
const radio = [...group.querySelectorAll('input[type="radio"]')]
.find((r) => r.value === value);
if (!radio || radio.checked) return;
radio.checked = true;
changed = radio;
}
});
changed?.dispatchEvent(new Event('change', { bubbles: true }));
});
}
</script>
Final Result:
- Clicking any thumbnail selects that colour in the dropdown.
- Price, stock and Add to cart update with it, so the right colour is what goes in the cart.
- Extra photos that are not attached to a variant are ignored, so nothing breaks on other products.
- Add it once on the product template and it covers every product.
- With lots of colourways, visible swatches are better than a dropdown. Look at GLO Color Swatch Variant Image and OP Color Swatch Variant Images
Regards,
Ploqo