Better Sold Out Variant Styling On Shopify 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:

class VariantRadios extends VariantSelects {
  constructor() {
    super();
    // Trigger change when loaded
    this.onVariantChange()
  }

  // Overwrite updateOptions method to check for unavailable variants
  updateOptions() {
    const fieldsets = Array.from(this.querySelectorAll('fieldset'));
    this.options = fieldsets.map((fieldset) => {
      return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
    });
    const possibleVariants = this.getVariantData().filter(variant => variant.option1 === this.options[0])
    for (let index = 0; index < possibleVariants.length; index++) {
      const variant = possibleVariants[index]
      const input = document.querySelector(`[value="${variant.option2}"]`)
      if (!variant.available) {
        input.classList.add('unavailable')
      } else {
        input.classList.remove('unavailable')
      }
    }
  }
}

customElements.define('variant-radios', VariantRadios);

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:

.product-form__input input[type='radio']:disabled + label,
.product-form__input input[type='radio'].uanvailable + label {
  border-color: rgba(var(--color-foreground), 0.3);
  color: rgba(var(--color-foreground), 0.4);
  text-decoration: line-through;
}
.product-form__input input[type='radio'].unavailable:checked + label {
  color: rgb(var(--color-background));
}

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.