I’m currently building my store and have this problem i didn’t find solution yet.
So I use variants to my products:
Let say i sell bikes - Trek Madonne and i have it in 2 sizes M and L, but size M is red and size L is blue and its available only in this variations. So I create those variants in this model and when I’m in product page i see Trek Madonne size M red picture and can add to cart everything is working fine, when im clicking to size L - size is selected correctly but nothing else change - picture is from red option i cannot add to cart, colour option change to blue but i have to click it manualy to switch picture and correctly switch variant to show its avaliability.
My question is: can I setup shopify in a way that when switching size it will show 1st available variant in this size? For now its look like its switching size but showing red variant in this size which is not available (not created either) and its frustrating.
Hi @PrzemekRad . You need to add images to product variant (almost all themes support variant image switcher). If this doesn’t help - need to dig in theme code to check.
Variant pictures are added. So i add screenshots to clarify my situation:
Picture 1 size M selected - colour indicator is light grey - product avaliable to buy
Picture 2 i clicked onm size L (its selected) picture stayed forom previous variant - colour indicator changed to darker grey - product not avaliable to buy
Picture 3 i have to select color indicator - picture changed to assained variant - product avaliable to buy
So now i want to step 3 happens automatically after switching size from M to L to show avaliable variant not one that isnt even crated.
variants doesnt swap and not avaliable variants are not hide, mb its happening because variants are defined by 2 paramets - size and colour and script is lost.
Also just realized:
You need to use only one option.
In you case you use 2 options and they’re crossed with each other. Like M - color 1, M - color 2, L - color1, L -color2.
Better to use maybe variant metafield and add color there (if you want to render color in a same look as now).
So, the point was to always shows all avaliable sizes of product, and hide not avaliable colours variants in each size and after switching size option - display 1st avaliable variant in that size.
In this case i have 1 model, 2 sizes, 2 colours, but in other products i will have 5-6 sizes and 4-5 colours variations.
@PrzemekRad in this case i see 2 models: M gunmetal and L silver. But in option switcher you have 4 variants: M+gun, M+silv, L+gun, L+silv. So you have no 2 images for 2 cases. That’s why images are not switched for these cases.
You need to have 2 variants and 2 options only (not 4) - you can use color or size as root. Also if you want to filter items in collection or render color.
From other side if you want to use color and size selector - you need to have 4 variants for all cases, like M+gun, M+silver, L+gun, L+silver.
From third side - it’s possible to rebuild swatches functionality.
But in list below filter options I deleted variants witch wasn’t existed (M+gun and L+silv) and there are only 2 variant listed - it doesn’t work that way? I thought it should
