Better Sold Out Variant Styling On Shopify Dawn Theme
This blog will guide you through building a better UI/UX for showing sold out variants without disabling them on Shopify's Dawn theme.
Here at Barstool we recently launched a new Shopify store for the podcast brand Call Her Daddy. We chose the Shopify built Dawn theme as a starting point for this new project and it has performed very well for us through our busy holiday season.
When building out the theme for our use case we have made some customizations like creating a more traditional product image gallery for the Dawn theme, and building a better way to display sold out variants for a product without disabling selection of these variants. This blog will guide you through completing the latter.
Our inventory changes quite frequently, especially during the holidays so we use a CTA to sign up for a back in stock email when someone is viewing an out of stock variant. Out of the box the Dawn theme disables the add to cart button and adds a subtle 'Sold out' label.
What we prefer is to show the user what variants are out of stock and keep them clickable so they can open the back in stock email signup form.
Edit the JS for the `VariantRadios` class:
Here we are editing the
updateOptions class method to check for unavailable variants. For example if we have a product with size and color options we want to check all colors for size: small and add a classname to any that are unavailable. We get all variants with
this.getVariantData() and filter those results to find variants with the first selected option, in this example the selected size option.
Once we have those variants we simply check if
variant.available is falsy and add/remove the
.unavailable class accordingly. One thing to note is that we invoke this method in the
constructor so this check is done when the page loads and then on each subsequent selection.
Adding the CSS to style the radio buttons:
We add some CSS to designate unavailable variants with gray strikethrough text.
The finished experience:
We are hiring a full-time Shopify Engineer to join our team. If you have experience creating custom Shopify experiences like this one please apply.