Hi everyone! I sell ties on Shopify and I’m using a color swatch combination app to make separate products look like they share a color+size selector. Each color is its own product (e.g. Red Tie, Green Tie), and each product has a size variant: Regular and Extra Long. The app stitches them together visually so it looks like one product with both color and size options.
Here’s my problem: If the Green Tie is out of stock in Regular but still available in Extra Long, the app crosses out the green swatch entirely — because it sees “green has an OOS variant” and marks the whole color as unavailable.
Now imagine a customer is on the Red Tie page, selects “Extra Long,” and then looks at the color swatches. The green swatch is still crossed out — even though green IS available in Extra Long. The customer assumes green is fully sold out and moves on. But it isn’t — they just can’t get to it.
What I need is for the swatch availability to update based on whichever size the customer currently has selected. If they pick Extra Long, only show a color as crossed out if it’s actually out of stock in Extra Long specifically.
Does any app handle this? Or has anyone solved this with custom code?
You should contact the app developers for issues and questions about that app. You wouldn’t call PepsiCo to inquire about your car’s brakes not working properly. Also, in the future, it’s ok to provide specific information like theme name, website url, and app names. Maybe that app has associates here.
I am in a trial mode for my store.
The theme is “Impulse”
The app involved is SA Variants
We already asked their support, and they were unable to come up with something.
The crux of my question here was really “Does any app handle this? Or has anyone solved this with custom code?” This would be more akin to calling PepsiCo and asking if they or anyone in their company has come across this and may have a solution, as opposed to inquiring about car brakes.
Combining products and sharing the variant selector. I’m sure there are other apps.
You could probably custom code a section or snippet with the help of Shopify Sidekick, and have no need of an app and you can make it do whatever you want. That’s what it’s there for. Or hire a Partner developer.
Sounds like app limitation. You can try our app, Combined Listings & Swatches, it is able to detect variant based stock status so this wont not happen.
Hi there, I work with OP and we downloaded your app but it gave us a message saying that the app doesn’t support development stores anymore. Our store is currently in development mode until we can set up the way we intend it to be. Is there any way that we can test your app while in development mode? Thank you.
Hello and thank you for your reply. Yes, the message is gone but it seems that the app cannot be integrated on themes on trial mode? It says (Intergration Not Available) when I try to set it up on our desired theme, which is on trial mode.
Often under the hood such things have to modify file code directly which is not allowed for a theme you haven’t purchased yet.
So either
first check if the app has a theme-extension method to just replace part of the product-information in the visual editor in the product templates etc.
try the app in a free theme to figure out if if fits the requirements.
Or buy the theme.
If that doesn’t work this can often be done with advanced theme customizations.
apps are great for prototyping but a business shouldn’t pivot around them it’s backwards.
Theme customizations are a one time cost instead of monthly fees, and the business actually owns the process without third party dependence.
Reach out to me for services if you need to delegate this and move on to other business matters.
The important distinction here is that this should not be checked at the color product level. It needs to be checked at the selected size + linked color product’s matching size variant level.
In your example, Green should not be treated as unavailable just because one Green variant is out of stock. The logic needs to do something closer to this:
Customer selects a size, e.g. Extra Long.
For each linked color product, find the variant with that same size.
Only disable/cross out that color if the matching size variant is unavailable.
When the selected size changes, recalculate the color swatches again.
So the app or custom code needs to understand both layers:
Color = separate product
Size = variant inside each color product
If an app only checks whether the linked color product has any unavailable variant, it will create the exact false sold-out behavior you are seeing.
Disclosure: I work on LinkedOption, which is built for linking separate products as storefront options. For a setup like yours, I would configure each color as a linked product group and keep size as the native variant option inside each product, then test whether the color availability follows the currently selected size.
Even if you stay with custom code, the key is to avoid a simple product-level availability flag. You need a small mapping table or lookup that compares the currently selected size against the same size variant in each linked color product.
Yep, this is typical because the swatch app check availability based on the product, it doesn’t match the variant you have currently selected. A better solution is being used as variant aware swatches with linked products (which dynamically updates when you select the size). The likes of Swatch King or GLO Color Swatch are far more capable of this than your run of the mill “combined listing” apps. Some merchants are also addressing it with custom theme logic that queries variant inventory among linked products, and dynamically switching out swatch states based on the size selected, in real time.