Can someone advise how I can change the default variant for products? For example on the above link, when selecting white colour, you will see an error and the image won’t show white variant as it requires a black logo. Is there a way I can change this so it defaults to the logo option available for that colour?
Thanks
Yes, this can be done. The issue is that the variant selections aren’t being linked properly, so Shopify is trying to keep the unavailable logo option when the colour changes.
You can set it up so selecting a colour automatically switches to the correct available logo variant. I’d be happy to show you on a quick call rather than make you dig through a long explanation.
Hey @HyperactiveDesigns, Shopify does not rematch the other option when you change colour. It keeps the last logo you had selected, so White plus that logo becomes an unavailable combo and the image stays put.
There is no admin setting for “default logo per colour.” The default variant is just whichever variant sits first in the product admin, and that only applies on first load.
Check the product section in the theme editor for a hide unavailable variants setting on the variant picker. That stops people landing on a combo that does not exist. If the theme still keeps the old logo after a colour change, you need a small bit of theme JS that, on colour change, picks the first available logo for that colour.
Shopify only uses a default variant on first load. That is the first variant in the product’s variant list. After that, when someone changes Colour, Shopify keeps the Logo they already had selected. If White + that logo does not exist (e.g. White only works with a black logo), you get the error and the image does not update.
1. Set the variant that opens first
Shopify Admin → product → Variants → drag the variant you want first (e.g. White / Black logo). That is the only native “default variant.”
2. Fix the White + logo mismatch
You need a real variant for each colour + logo combo you want customers to land on. If White should always use the black logo, make sure White / Black logo exists.
That still will not auto-switch Logo when they pick White if they previously had another logo selected.
3. Auto-select the logo that exists for that colour
Shopify does not do this by itself. Options:
If you share the product admin screenshot (Colour + Logo options and which variants exist), we can say whether this is missing variants or just the picker not switching Logo.
I tested the live product page. It opens on Red / S / White Logo. When I switch to White, the picker keeps White Logo selected even though that combination becomes disabled; Black Logo becomes available, but the theme does not auto-select it. That is why the button changes to Unavailable.
So the live test points to a picker-transition issue, not the initial default variant.
If each garment colour should have only one valid logo colour, the cleanest no-code model is to remove Logo as an independent customer choice and label the colour itself clearly (for example, “White — black logo”). That removes impossible combinations entirely.
If Logo needs to remain a separate option, the small theme fix is: after Colour changes, detect whether the selected Logo radio is disabled; if it is, select the first enabled Logo radio and fire the variant-change event.
Which theme and theme version are you using? With that detail, the exact file/section can be identified without guessing.
I am using the horizon theme. Currently 4.1.1 but looking to update to 4.1.4
Thanks — that narrows it down. I would update a duplicate copy to 4.1.4 and retest before editing anything, but I would not rely on the version update alone. On your live Horizon picker, changing Colour keeps the previously checked Logo, then the picker refresh marks that Logo unavailable; it does not automatically choose the enabled Logo.
If the same test still fails in the 4.1.4 duplicate, I would avoid editing assets/variant-picker.js directly, because that makes later theme updates harder. Add a separate small custom script that waits for Horizon’s picker refresh, checks whether the selected Logo input now has aria-disabled="true", and, if so, selects the first enabled Logo input.
Test these four paths in the duplicate theme:
?variant= linkIf each colour only ever has one logo, the no-code product model from my earlier reply is still the safer option.
Would you like the smallest custom-script outline for the 4.1.4 duplicate, or are you leaning toward the no-code product model?
I need to keep the logo variant so have to go with a code model
That makes sense. I retested the live page and the markup gives a clean, non-ID-based hook: both logo radios use data-option-name="Category". After selecting White, the checked White Logo changes to aria-disabled="true" / data-option-available="false", while Black Logo becomes available.
So the patch should run after Horizon refreshes the picker, inspect the checked Category input, and only when it has become unavailable, select the first available Category input inside the same product form. I would keep this in a separate custom asset loaded after the theme scripts rather than edit Horizon’s core picker.
Before making the exact snippet, one scope check: do you use this product in Quick Add or a Featured Product section as well, or only on the main product page? If you want, I can prepare and regression-check the bounded patch in a duplicate theme without touching production.
Yes there is a quick add option on the home page.
Thanks — that makes the smallest safe scope two surfaces: the main product form and homepage Quick Add. The patch also needs to stay inside the active product card so one Quick Add card cannot change another.
I would handle this only in a duplicate Horizon 4.1.4 theme: add the separate script, verify Red → White and White → Red on the product page and Quick Add, test mobile and a direct variant link, then hand back the patch plus rollback notes. No production change.
Would you like me to send you the fixed scope and price for that small paid test?
Tim from Sonder Sites in Melbourne. We write Horizon patches like this quite a bit.
Shopify will not rematch Logo when Colour changes. It keeps the last logo, White plus White Logo becomes unavailable, and Horizon does not pick Black Logo for you. Updating from 4.1.1 to 4.1.4 will not fix that.
Do the work in a duplicate theme, not live. Do not edit assets/variant-picker.js. A small custom script that runs after the picker refreshes, stays inside the active product form, and if the checked Category input has aria-disabled=“true” clicks the first available one, is the safe version. It has to cover the main product page and homepage Quick Add, and it must not let one Quick Add card change another.
Test Red to White, White to Red, a direct ?variant= link, and mobile Quick Add before you publish.
If you get stuck wiring that to Quick Add, we are in Melbourne and happy to look at the duplicate theme with you.
The behaviour you’re fighting is by design: Shopify only uses “first variant in admin order” on initial load. After that, when the shopper changes one option, the theme keeps their other selections — even if that combination doesn’t exist. There is no built-in “snap to nearest valid variant”.
Two ways out, in order of preference:
1. Model it away (no code). If White is only ever sold with the Black logo, the Logo option isn’t really a free choice — it’s determined by Color. Collapse the two options into one: White / Black logo, Black / White logo, etc. Invalid combinations stop existing, quick-add stops erroring, and you never maintain a script through theme updates. This is worth reconsidering even if it means re-creating the product.
2. Auto-snap script. If you keep two options, the logic you want is: on option change, if the resulting combination has no variant, find the first available variant that matches the option the shopper just changed, and set the remaining selects to it. Pseudocode against the product JSON every theme exposes:
const variants = PRODUCT_JSON.variants; // from the product JSON script tag
function snap(changedIndex, changedValue) {
const exact = variants.find(v => selectedOptions().every((val, i) => v.options[i] === val));
if (exact && exact.available) return; // combination is fine
const fallback = variants.find(v => v.available && v.options[changedIndex] === changedValue);
if (fallback) setSelects(fallback.options); // and dispatch 'change'
}
The selectors for selectedOptions/setSelects differ per theme (Horizon renders its picker as a custom element), so wire it in a custom liquid block rather than editing theme files — it survives updates that way. But honestly: if your option matrix is mostly-invalid combinations, option 1 will save you this whole class of bugs, including in search filters and inventory reports.
This looks like a variant selection default variant logic issue, rather than a problem with the product itself.
The theme is likely trying to load a specific logo variant combination that doesn’t exist for the selected colour. Instead of falling back to the first available logo variant, it throws an error.
I’d check the product’s variant configuration first, then inspect how the theme maps colour logo variant ID. The clean fix is to make the theme automatically select a valid variant whenever the customer changes colour, rather than keeping the previously selected/invalid option.
If the variants are configured correctly in Shopify, this can usually be fixed in the theme’s variant picker JavaScript logic without changing the products themselves.
I can help you troubleshoot and fix it . WhatsApp +234 7066786530