How Disable Auto Select Variant Dawn?

beautybyte
Visitor
1 0 1

How do I Disable Auto Select Variant Dawn theme? I tried looking around the code, but could not find the option. Also, the option does not exist on the product page inside the theme customizer. Thanks!

Replies 6 (6)

NomtechSolution
Astronaut
1245 113 147
  1. In the code editor, navigate to the sections/product-template.liquid file.
  2. Look for the code block that handles the variant selection. It usually starts with something like {% if product.variants.size > 1 %}.
  3. Inside that code block, locate the line that includes the selected attribute. It might look like <option value="{{ variant.id }}" {% if variant == selected_variant %}selected{% endif %}>.
  4. Remove the selected attribute from that line.
Hoodys
Visitor
2 0 2

What if there is no product-template.liquid file

GGAds
Visitor
1 0 0

Is there a solution that works on Dawn version 11?

 

Thanks

SiteBuilder
Excursionist
22 0 8

Can someone provide clear instructions for non-coders?

 

I don't know what an attribute is, please give the line of code that needs to be pasted in place of the old one

HiKimiza
Tourist
4 0 3

Did you find the solution to disable auto variant selection on products? Share with us, please! I have the same problem.

CLaidlaw
Shopify Partner
6 0 0

Figured this out for a client. Their specific request was for the radio-button variant options, other option styles such as swatch and dropdown is similar but slightly different.

 

The file you are looking to modify is:

Snippets/product-variant-options.liquid

The code for the radio button in that file by default is (LoC 85-102):

  {%- elsif picker_type == 'button' -%}
    <input
      type="radio"
      id="{{ input_id }}"
      name="{{ option.name }}"
      value="{{ value | escape }}"
      form="{{ product_form_id }}"
      {% if option.selected_value == value %}
        checked
      {% endif %}
      {% if option_disabled %}
        class="disabled"
      {% endif %}
    >
    <label for="{{ input_id }}">
      {{ value -}}
      {{ label_unavailable }}
    </label>

You want to remove the following lines:

{% if option.selected_value == value %}
  checked
{% endif %}

 

Why this works; since liquid renders HTML server side before it goes to the client this code has nothing to do with the actual selection (click/change) it is purely for initial render (load). By removing the checked value from the liquid render logic then the HTML is rendered without the checked option. However the variant buttons still work and when selected they show as such.

 

FOLLOWING SUGGESTIONS ARE UNTESTED OBSERVATIONS OF THE CODE!!

 

For the dropdown, I would experiment with (remove) this segment:

{% if option.selected_value == value %}
  selected="selected"
{% endif %}

 

For the swatch, I would experiment with (remove) this segment:

{% if option.selected_value == value %}
  {% assign checked = true %}
{% endif %}

This should unset the checked value for the nested swatch render element, however more may need to change in this block, this is untested!

{%
  render 'swatch-input',
  id: input_id,
  name: option.name,
  value: value | escape,
  product_form_id: product_form_id,
  checked: checked,
  disabled: option_disabled,
  shape: block.settings.swatch_shape,
  help_text: label_unavailable
%}

 

If changing these swatch statements are not working, look at the following file to remove the default selection.

Snippets/swatch-input.liquid

 

Again, please test these changes with development stores, not-live themes or preview before pushing to a live store.