Options to hide unavailable variants from variant selects/drop-downs

[sciascia]

Note: Sorry this issue is long, it was initially short but this lead to endless confusion/discussion so it was expanded.

PROBLEM... The way variants are loaded allows customers to select products that don't exist - not sold out but products don't actually exist!

This not only sounds silly, most of us (including developers) interpret the result, 'Unavailable', to mean 'Sold out'. And if developers are confused, imagine how confused visitors are. This is expensive at this stage in the funnel.

Displaying products that don't exist or allowing visitors to select products that don't exist, also seems like a silly Shopify 2.0 outcome in general - right?

ISSUE OUTCOMES...

• Properly support Shopify's default 3x variant sets (merchants are currently given just enough rope to hang themselves)
• Stop Dawn creating shopper confusion at a critical, expensive stage in the sales funnel
• Leave it to partner apps to provide advanced conditional logic for complex products

BASIC, ONE-WAY VARIANT SEQUENCING COULD...

• Remove products that don't exist so visitors can't see or select them
• Break the task into steps which human brains really like (less funnel drop-off)

CONSIDER THE LEFT EXAMPLE FROM DAWN...

• Yes, many shoppers will easily understand how to choose what they want but...
• Some shoppers focus exclusively on their target (Galaxy S21). This leads to a decision that 'Unavailable' must mean 'Sold out', even though Apple doesn't make the Galaxy. Notice how the first select states Apple? An Apple Galaxy S21 doesn't exist but on page load, the selects display a product that doesn't exist - silly no?
• This often happens quickly, with a return to Google after only a few seconds: LAND –> UNAVAILABLE –> LEAVE
• And finally, the decision area is more cluttered, taking up valuable screen real estate

CONSIDER THE RIGHT EXAMPLE WHICH USES VARIANT SEQUENCING...

• It removes the ability to choose Galaxy S21 before choosing Samsung
• It uses zero brain power by directing shoppers to 'Choose...' without adding extra elements to the page. Our brains like this.
• It removes elements, takes up less room and dramatically reduces visual clutter to aid decision making

BASIC VARIANT SEQUENCING IS WELL-UNDERSTOOD... For each shopper that changes the combinations, or asks when the Galaxy will be in-stock, others exit thinking it's sold-out. Instead, variant sequencing is simple and is understood by all ages like my 70 year-old Dad. It also suits many products...

HOW IT WORKS IF SWITCHED ON...

• Only the first select is active on page load
• Secondary selects are disabled until variants are chosen from proceeding selects
• Variants update based on proceeding selects thereby removing 'not possible' combinations
• Feedback that selects are updating could be included (short animation or a flash of sub-selects)
• Display a 'From price' until final selection is made
• Move option set names into selects as the first item
• Use clear, directional language like 'Choose (option set name)...'
• Display sold-out variants with strike-through

OPT-IN... Setup could be simple, optional and self-explanatory. And if you like how Dawn works currently, don't turn it on.

Or setup could be fully configurable...

VARIANT LINKING... Currently, it seems Dawn is guarding against visitors not finding their preferred variant from a variant link or variant search result - an argument made in comments below.

e.g. A variant link auto-configures the first select to 'Samsung' and the second to 'Galaxy S21'. But say the visitor wants an iPhone case and if variant sequencing is on, they won't see iPhone unless the first select is changed to Apple.

• However, because the visitor can't see what they want (iPhone) anchoring or confirmation bias doesn't come into play like it does currently. i.e. iPhone won't distract visitors from noticing that Samsung needs changing to Apple
• Also, shoppers are less likely to have been shown links for variants they didn't search for, and are less likely to click variants they don't want. Especially when also shown results for variants they do want (as is common in search results)
• And finally, the proposed change is optional, letting merchants choose which solution works best for them

BIAS AND HUMAN DECISION MAKING... Some dismiss fixation, anchoring or confirmation bias. However, plane crashes have been caused by pilots with tens of thousands of flight hours, fixating on one piece of data at the expense of obvious data to the contrary.

In this context, look again at the first screenshot above. Some shoppers fixate on the thing they want (Galaxy S21) at the expense of obvious data to the contrary, the fact that Apple doesn't make the Galaxy S21.

But because our brains don't like to think, people see 'Unavailable' and think 'sold-out', then leave. The path of least resistance wins out more often than not.

DESCRIBE ALTERNATIVES YOU'VE CONSIDERED...

• Splitting variants into multiple products greatly confuses shoppers with certain product-types in our experience
• Splitting variants also breaks stock counts when sub-variants are common across newly split products. e.g. If full sheet sets and half sets are split into separate products, pillowcases (which are typically offered in addition to sets) can only live with one of the newly created products. Otherwise, stock counts will require constant juggling between the two (painful)
• Splitting variants also splits reviews, and more reviews often means more sales
• Apps are bloated in this area, with many complex features that aren't required for basic, one-way variant sequencing
• Apps also introduce different standards, costs, and in our experience, lower page speeds (plus other theme-pain)
• Apps introduce interoperability issues like you pre-order app doesn't work with your product options app etc

HAVE ALSO TRIED...

• https://www.youtube.com/watch?v=vspWDu_POYA
• https://community.shopify.com/c/Shopify-Design/Variants-Link-product-options/td-p/615156
• https://gist.github.com/carolineschnapp/1083007

FINAL THOUGHTS... 'Unavailable' seems like a past hangover or a workaround - or maybe it's a solution to a different problem like development resources or protecting the app ecosystem.

Whatever the reason, letting shoppers choose variants that don't exist seems like a silly development outcome for Shopify 2.0 - right?

[JonoHall]

This feature was added to Dawn a month ago. #1407 and is now available in main/Dawn (official implementation)

Correct me if I'm wrong here, but that looks like a way to hide Sold Out/Unavailable items, which is not what this thread is about.

Shopify treats Sold Out/Unavailable variants as the same problem, where they quite clearly are two different things. We would like to hide only unavailable variants.

As you can see from my example above, my UI keeps out of stock items, but hides unavailable items. Unlike Shopify which shows all available options and you have to take a guess what the right combo is.

[sciascia]

@JonoHall Awesome mate, and good point. Just goes to show how easy it is to confuse sold-out with unavailable - no wonder visitors get confused!

Give me a few days to digest. But in the meantime, thank you so much for persevering, very much appreciated. Cheers

[JonoHall]

@JonoHall Awesome mate, and good point. Just goes to show how easy it is to confuse sold-out with unavailable - no wonder visitors get confused!

This whole issue thread has been filled with comments suggesting how to hide out of stock variants, not invalid ones!

thank you so much for persevering

I don't have a choice! The business I work for has combinations of variants that highlight this issue. We're not able to move forward until this is resolved. I've waited long enough, just had to go for it on my own.

I've updated my code base so it's the main branch of the following repository: https://github.com/JonoHall/Dawn-Enhanced

I've managed to separate my modifications from Shopify's global.js and now it sits in its own .js file. Instructions are laid out on the above repository's description. It should be very easy to install/remove now.

I'll see what I can do about dropdown boxes, but for now it's just radios (which I actually really like now that invalid variants have been removed!). It works for both drop down boxes and radio (pills) now.

[JonoHall]

Sorry for the dredge, but for those who are following my solution to this problem, and to those still looking, a quick update below to my repository.

Since Dawn 8.0 dropped the other day, I was frustrated that I was unable to use the automatic upgrade to the latest version due to my code changes to the root template files (Shopify disables this option if you modify their files, and you have to reinstall the theme completely). So, I decided to update my JavaScript mod to work with the built in theme customization block system, instead of editing theme files. I've successfully modified and tested my enhancement to work with blocks instead.

Check out the new much simpler version, and how-to on the link below. It'll take just a couple of minutes to install, and very easy to turn on/off or delete if you are unsure about the mod: https://github.com/JonoHall/Shopify-Hide-Unavailable-Options

As always, this mod will only remove unavailable combinations, not sold-out ones.

Enjoy!

[kimberlyoleiro]

hi there, we've made a product decision to not hide unavailable variants. This is due to the extensibility of preorder apps that we want to support. I'll keep this in the backlog for future consideration if we have the bandwidth to look into it again

[MrBillium]

That's a shame. How would you deal with JonoHall's phone case demo above such that it is not possible to be presented with a Samsung Iphone 13 case?

I see this functionality all over Amazon so clearly they think it is worth having.

[chadleap]

Foregoing one of the most active issues in the repo in favor of shoving third party apps and extensions on us is, as usual, non preferred over core features in the theme. This could, of course, be turned off for people who enjoy sending customers on adventures through nonexistent variant combinations.

[sciascia]

@kimberlyoleiro But that's also a decision to show visitors products that don’t exist - right?

Why would any merchant or visitor want that?

If you can't choose a product, you can't pay for it! That's the whole point of Shopify and commerce in general - right?

[JonoHall]

hi there, we've made a product decision to not hide unavailable variants. This is due to the extensibility of preorder apps that we want to support. I'll keep this in the backlog for future consideration if we have the bandwidth to look into it again

Seems you also don't understand what this issue is about.

We're talking about hiding UNAVAILABLE COMBINATIONS not out of stock items.

My fix posted above will work with backorder apps because you can't backorder an Android iPhone X case, invalid combinations don't even exist in the Shopify backend, I only hide these invalid combinations, which Shopify should do by default.

[PaulNewton]

@MrBillium How would you deal with JonoHall's phone case demo above such that it is not possible to be presented with a Samsung Iphone 13 case?

By customizing the frontend to meet a merchants use case not supported by the general introductory features.

I see this functionality all over Amazon so clearly they think it is worth having.

Apples and oranges. Amazon controls the entirety of their frontend with a development budget of $56.052 Billion. When you go there your data MUST be by their rules to behave that way. Meanwhile the shopify theme system is a sprawling ecosystem of different special interests. You can bring your data and present it to behave the way you want on the frontend.

@chadleap shoving third party apps and extensions on us

Merchants can build their own apps, or more simply facilitate preorders through theme customizations.

[chadleap]

@PaulNewton we aren't talking about preordering temporarily out of stock variants. We are talking about removing NON-EXISTENT options combinations from variant selectors.

[PaulNewton]

Yes I get that it's about invalid option combinations, a preorder can apply to an item that doesn't exist yet by generating a draft order, or just as a contact form that submits those options at text , or a free utility product that uses cart attributes or line-item-properties.

It's a weird behavior I can't think I've ever seen done without just actually creating the variant because why wouldn't you. But shopify apparently has enough pressure after a decade behind that edge-case to not offer anything at the theme level, or in clear documentation, or blog writing to demystify the WHY everyone is caught up on.

[sciascia]

@PaulNewton You've made these same arguments many times above and they don't wash because...

1. It's ridiculous that custom coding is required just so that your site doesn't display products that aren't real. Yes, that even sounds ridiculous!

2. The argument that Shopify is a platform that needs to appeal to everyone is also silly because NO MERCHANT EVER WANTS TO DISPLAY PRODUCTS THAT DON'T EXIST! So this request IS for everyone on the Shopify platform.

Also, Shopify are being clear that the reason they've decided to ignore this request is to protect the app eco system, not because they have evidence that it doesn't affect sales.

In my experience, the other merchants I've talked to, don't understand why their sites show 'Unavailable' when items are in actually stock.

Their workaround is to split variants into separate products (which is what we've done) but in our experience, it creates endless customer confusion: You sell X but why don't you sell Y? We'll, we do sell Y but it's on a different product page.

And for each person who can be bothered emailing, many more leave thinking we don't sell it.

And splitting variants also splits reviews between separate products which is frustrating because more reviews = more sales.

Fundamentally, commerce is all bout choosing and paying for products - so this issue isn't a nice to have.

[PaulNewton]

@sciascia display products that aren't real. Yes, that even sounds ridiculous!

Important distinction ,themes do not display products that aren't real. They don't generate images, specific descriptions, custom prices, trigger discounts, etc

What happens is themes split a variant into separate UI elements for it's option such as in 's or pills,etc. On set of options does not communicate with another set of options. That's wall all the customization aim to do, make the options-linked.

Anyone that doesn't want the misunderstanding of separate UI elements can use CSS and a custom-liquid block to have a singular unambigous

dropdown.

variant-selects, variant-radios { display: none; }

And pull the dropdown code from the noscript in the product-variant-picker snippet into a custom-liquid block. Remembering to make sure to have the right ID for the form attribute (form="{{ product_form_id }}") to work with the buy-button https://github.com/Shopify/dawn/blob/main/snippets/product-variant-picker.liquid#L72C8-L121

That could even be the starting point of the code for submitting a pull request for this issue.

protect the app eco system

Preorder apps affect sales for merchant as a positive why wouldn't they want continuity of benefit. App conspiracy theory just undermines change. Merchants can make their own apps to affect sales in the same way.

don't understand why their sites show 'Unavailable' when items are in actually stock.

Get them in here, merchant solidarity matters for changing an issues velocity.

You sell X but why don't you sell Y? We'll, we do sell Y but it's on a different product page

Until some platform solution does happen if amerchants losing money in sales or support costs the fix is always improving marketing and messaging in the theme today instead of waiting for some uncertain future to ever happen. Also see the complementary products features.

Their workaround is to split variants into separate products

And don't leave out how if fundamentally changes how a business has to handle SEO which for even small or large inventories is more complicated than customizing a theme to suit needs.

The split into a flat product model, or product-family , style of information architecture for products should not be being recommended without some major caveats on it's side-effects.

[JonoHall]

No offense Paul, but does anyone else struggle with these comments?

It's like they are AI written, lots of words, just absolutely cannot get any meaningful data from it.

[sciascia]

@JonoHall Agreed, his comments drive me nuts.

@PaulNewton I'm the OP, I understand perfectly what is going on and why. However, no matter what you say and how you say it, the end result is that Shopify 2.0 can easily display variant combinations that don't exist. Which to a consumer or merchant translates to a product that doesn't exist.

This has been explained above ad nauseam.

If Shopify decide they don't have resources, or they prefer to protect the app eco-system or the freelance market, that's their prerogative. And no, it's not a conspiracy theory when plenty of other companies do the same or when the Shopify employee states "This is due to the extensibility of preorder apps that we want to support."

However, the end result is that Shopify 2.0 can easily display products that DO NOT ACTUALLY EXIST.

From every angle, that's a silly development outcome because it breaks commerce 101: choosing products and buying them.

@kimberlyoleiro I agree with @JonoHall , it seems you're talking about out-of-stock items because you mention pre-order apps. Just ensuring you guys understand that this issue is about 'Unavailable' products which is an exception caused when the combination of the 3 built-in variants don't equal a product that exists.

This can happen on page-load but also if a customer selects combinations that don't exist (like the Samsung iPhone example above).

[PaulNewton]

@JonoHall it's a dense problem. Boiling it all down would be a good way to clarify the issue but time consuming. Try re-reading my comments under the assumption I'm on your side and this is an issue i'd like to see fixed at the theme level or even better the platform level.

easily display products that DO NOT ACTUALLY EXIST!

Just explained how that's a bad way to word the problem, muddying the waters undermines issues. How many times have you described this to shopify support and they keep confusing it with 'sold out', same thing is happening here. Be precise.

This is a code repo, not a forum, or facebook post. What is actually going on under the hood and being specific matters an incredible amount as that informs any possible solution.

If shopify doesn't want to address it, you are always free to submit a pull request with code for a possible solution if shopify accepts it. Goodluck.

[sciascia]

@PaulNewton I'm fully aware this is a developer forum however, there's no other way to reach Shopify devs because feature requests at Shopify go into a black hole with zero visibility.

And yes, I understand this is a problem that requires both designers and devs to fix but I know of no way to reach the UX team - if you know how, I'm all ears.

However, none of this changes the fact that one of the development outcomes for Shopify 2.0, is that your website can easily display products that don't exist.

And no matter the reason, that's a silly development outcome because it breaks commerce 101: choosing products and buying them.

If you can't choose them, you can't buy them - dumb right?

[sciascia]

And to add insult to injury, it now appears that in Dawn 2.0 'Unavailable' means sold-out, creating even more confusion.

[PaulNewton]

New issue maybe, unavailable showing as default instead of sold-out.

Dawns current version is v11.0.0. To be sure by 2.0 are you 9 versions behind, or maybe conflating dawn2.0 to be the same as Online Store "2.0" (OS2.0); the theme architecture that allows sections everywhere and other new theme features.

I see the same behavior by installing a fresh copy of dawn v11.0 from the theme store to a dev store. A quick check so no old issues for this so far https://github.com/Shopify/dawn/issues?q=is%3Aissue+is%3Aclosed This behavior starts somewhere between v7 and v9 I think, as my v7 doesn't render any product status in the master selector.

For my v11 install the locales have "sold out" for the product sold-out translation so that's not the problem. Possibly some sort of javascript issue/"feature" since when I disable javascript the dropdowns have the correct text. javascript on: javascript off:

# The demo store (v04???*) doesn't show this behavior when javascript is disabled. Disable javascript on demo stores to get variant dropdowns that show per variant status, instead of buttons. https://theme-dawn-demo.myshopify.com/products/pleated-heel-mule?variant=39577000411225

💣 the demo stores view-source indicates it's theme name is "_FINAL Dawn Demo store v04 *Don't delete\"_ but support verified says the dawn themes demo store is v11, ; sigh. So never immediately obvious if the demo store is a stagnant v04 or an updated v11 because they don't bother to rename demo themes anymore 🤷 .

[thagxt]

@PaulNewton

• Dawn's demo store is currently using Dawn v10.0.0 (according to source code)
• It is discussed in this PR: https://github.com/Shopify/dawn/pull/2031

[PaulNewton]

I see no mention of v10 version bumps in that issue . Shopify's theme store demo store https://theme-dawn-demo.myshopify.com/ Dawns github repo's demo store https://os2-demo.myshopify.com/

The repos demo store cannot be used as source of truth by external contributors for examples as it's password protected and subject to unknowable changes.

[PaulNewton]

FYI: in developer preview now is new variant limits and behaviors for options tl;dr developer preview new 2,000 variant limit, more than 3 variant options, signup here , DEVELOPER feedback forum

If unavailable-variant issue or variant combinatorics impacts you now is the time to get access and then start giving feedback to shopify support directly or on the dedicated support subform for developers, do not submit feedback to the dawn repo for that upcoming feature change.

Announced in shopify winter edition 2024 along with sign up form https://www.shopify.com/editions/winter2024#apis-for-2000-variants DEVELOPER feedback forum https://community.shopify.com/c/new-graphql-product-apis/bd-p/new-graphql-product-apis

This upcoming change highlights why having linked variants as a default behavior isn't ideal behavior for a general theme to have as the amount of options scales the impact to customers browsers can increase also as new features are released. But this also highlights why avoiding the "unavailable" problem will become an even larger problem that should try to be fixed at the system level if not also the theme level.

Developers and Partners can make developer preview stores for this feature (note: remember dev preview stores cannot be transferred) https://shopify.dev/docs/api/release-notes/developer-previews#increased-variants-developer-preview https://shopify.dev/docs/api/admin/migrate/new-product-model

Also be aware there are some other upcoming features while tangential may impact those trying to display complicated product models as variant/options or working around the unavailable-variant issue through different methods.

• View and bulk edit variants grouped by option https://www.shopify.com/editions/winter2024#variants-card
• Theme blocks https://www.shopify.com/editions/winter2024#theme-blocks ( imo potential workarounds or performance optimization using the section rendering api for large or complicated variant|option combinations)
• and combined listings (plus stores only) https://www.shopify.com/editions/winter2024#shopify-combined-listings (break down your variant combinations to standalone flat products)
• Swatches https://www.shopify.com/editions/winter2024#color-swatches ( visual pickers instead of dropdowns, etc)