Disabling automatic variant selection on Shopify Dawn

A Quick Rant.

Shopify’s dawn theme is, fine to an extent. But the moment you start expanding and exposing your store to more people, you’ll at some point or another find yourself- by law of probability, face to face with dumber, and dumber customers.

One such common customer complaint at my work, has been that they “received the wrong size”. This is is because they never bothered selecting one, and instead just clicked “Add to cart”.

The solution is simple then, disable automatic variant selection! No, this would be too easy. Shopify’s dawn theme doesn’t have a setting for this, and has been ignoring feature requests for this for quite some time.

Interestingly enough, they actually have a reason for this buried in their theme store requirements:

The product page must contain the following buying functions:
- ...
- The first available variant loads on a page.

It’s not that Shopify is lazy, it’s that they’re stupid. Coming up with silly requirements to pad their pride, not thinking about just how many dumb customers are out there.

Doing it ourselves.

Dawn’s codebase is… verbose, but also not the hardest I’ve worked with furtunately enough. After spending some trial and error, I’ve found a not horrible way to disable automatic variant selection.

Giving ourselves a toggle.

What’s the harm in adding a simple toggle to the theme’s settings? Maybe we lose a couple brain cells and want to re-enable the auto select behavior.

{
  "id": "auto_set_variant",
  "label": "Auto select variant",
  "type": "checkbox",
  "default": false,
  "info": "Automatically select the first available variant on the product page."
}

Use whatever wording you want, but this is what I’ve gone with. Now, we can use this setting to determine if we should automatically select the first available variant.

New source of truth.

There is no singe source of truth within the codebase to determine that currently selected variant. Instead, it’s a scattered mess of checks for product.selected_or_first_available_variant.

Let’s change that to make our lives much, much easier…

{% liquid
  assign selected_variant = null
  if product.selected_variant.id or product.has_only_default_variant or section.settings.auto_set_variant == true
    assign selected_variant = product.selected_or_first_available_variant
  endif
%}

This liquid code prepares selected_variant to be our reliable new source of truth. It keeps in mind all the right conditions to determine if we should automatically select the first available variant or not.

Using our new source of truth.

All that realy requires updating in order to prevent customers from buying without intentionally selecting, is variant picker and buy buttons.

<input
  type="radio"
  id="{{ input_id }}"
  name="{{ input_name | escape }}"
  value="{{ value | escape }}"
  form="{{ product_form_id }}"
  {% if value.selected %}
  {% if value.selected and selected_variant %}
    checked
  {% endif %}
  {% if option_disabled %}
    class="disabled"
  {% endif %}
  {{ input_dataset }}
>

{%- form 'product',
  product,
  id: product_form_id,
  class: 'form',
  novalidate: 'novalidate',
  data-type: 'add-to-cart-form'
-%}
  <input
    type="hidden"
    name="id"
    value="{{ product.selected_or_first_available_variant.id }}"
    {% if product.selected_or_first_available_variant.available == false
    {% if selected_variant.available == false
      or quantity_rule_soldout
      or product.selected_or_first_available_variant == null
    %}
      disabled
    {% endif %}
    class="product-variant-id"
  >

  // ...

  <button
    id="ProductSubmitButton-{{ section_id }}"
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
    {% if selected_variant.available == false
      or quantity_rule_soldout
      or product.selected_or_first_available_variant == null
    %}
      disabled
    {% endif %}
    data-segment="buy-buttons"
  >
    <span>
      {%- if selected_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
      {% elsif selected_variant == blank %}
        {% if product.options.size == 1 %}
          {{ 'products.product.choose_option_named' | t: option_name: product.options_with_values.first.name }}
        {% else %}
          {{ 'products.product.choose_options' | t }}
        {% endif %}
      {%- else -%}
        {{ 'products.product.add_to_cart' | t }}
      {%- endif -%}
    </span>
    {%- render 'loading-spinner' -%}
  </button>

I’ve made some modifications to my add to cart button above to show the name of the option that needs to be selected. This is a personal preference, and you can remove it if you’d like.

Voila?

It’s been a minute since I’ve implemented this, so this is mostly from memory and may require some JS to make it work. But, this is the general idea of how you can disable automatic variant selection on Shopify’s Dawn theme.

Will update the post if I feel like.