Problem: A knitwear store selling many made‑to‑order variants wants customers to see, before clicking each option, which variants are in stock versus made to order (lead time). They ask about splitting the variant picker or adding clear visual indicators.
Context: Shopify’s default variant picker doesn’t show variant‑level stock status (per variant availability).
Proposed approach:
Surface variant inventory state directly on the variant selector.
Show short labels like “In stock” when quantity > 0 and “Made to order” when not, or use badges/greyed options for made‑to‑order variants.
Pull status from each variant’s inventory so it auto‑updates and avoids clicking through every variant.
Artifacts: A product page link was provided to illustrate the issue.
Status/outcome: No code or step‑by‑step implementation was given; the suggestion is conceptual (theme customization needed or an app). The thread remains open with the key next step being implementing the UI changes to display per‑variant availability.
I run a knitwear brand and many of my products are made to order so I continue to sell products when they are not in stock (but it clearly says “made to order” when they make a purchase).
My issue is that I have lots of variants of some designs and without clicking through every product you can’t tell what is in stock v what is made to order.
I want to be able to split the variant picker or have a way to identify visually what products are in stock and what ones will have a lead time.
Does anyone know how to do this.
here is a link to a page with the issue. If you click through the variants you will see what I mean:
Thanks for your reply. I already show the variant stock status on the page. But when you look at all the colours you cant tell what ones are in stock and which ones aren’t, without clicking through every variant.
I want to have a way of visually separating the variants or highlighting them in the picker someway to make it easier to buy.
If you check my page then you will see what I mean.
@woolkind The only reliable approach is to style the variant options based on their availability so out-of-stock variants appear greyed out. This uses the existing inventory status, so it updates automatically as stock changes.
The theme already crosses out sold-out swatches, so it’s possible to add separate decoration to option values which are “inventory <= 0 and continue_selling”, or opposite – actually have inventory in stock.
This would require a theme code edit though.
However, if these products have one option only, it’s possible to approach it with a “Custom liquid” code.
You can add a “Custom liquid” block /section to the “Product page” template.
Paste this code:
{% liquid
if product.options.size == 1
assign instock_values = ""
for v in product.variants
if v.inventory_quantity > 0
assign instock_values = instock_values | append: "|" | append: v.option1
endif
endfor
assign instock_values_array = instock_values | remove_first: "|" | split: "|" | uniq
endif
%}
{% if instock_values_array.size > 0 %}
<style>
{% for v in instock_values_array %}
[value="{{ v | escape }}"] + label:after {%- if forloop.last %} { {% else -%} , {%- endif %}
{% endfor %}
content: "";
position: absolute;
aspect-ratio:1;
width: 1.5rem;
top: -0.5rem;
right:-0.5rem;;
z-index: 1;
background: green;
border: 1px solid white;
border-radius: 100%;
}
.swatch-input__label {
position: relative;
}
</style>
{% endif %}
The code will output CSS to put a green dot onto swatches which actually have inventory, like this:
It should work with swatches too, it’s just my test product does not have colors.
You can try it in your store, preferably in theme copy.
Adding an amber dot is possible too. But would effectively double the code size.
I may be able to come up with the code tomorrow, it’s too late right now.
You could also create a completely separate variant option for “Made to Order” products. That way they’re separated from stocked products, essentially “splitting” the variant picker.
@tim_1 I’m, very happy with the green dot only. But i’ve noticed that it doesn’t work when there are 2 selections to make - size and colour. Is there a way to make it work so it shows only on the colour swatch in this situation.
Also I have an example of where one product isnt showing a green dot but when you select it it says it’s in stock! Not sure whats going on?
Yes, there is a problem with option values which have “&”. The code below is amended to use different selectors and it should work fine for those too.
As mentioned previously, original code works for product with only one option, like “Color”.
However, if you have 2 options, like “Color”/“Size”, “Green / Small” may be instock, but “Green / Large” may be sold-out. So it would be necessary to update the instock dot based on both selections dynamically.
This solution is static. But I can make it apply to first product option no matter how many options are there.
It will change the meaning of the dot to say “there are some green variants in stock” for those products rather then “green variant is in stock” for products with single Color option.
