Changing Variant Selectors From Radio Buttons To Drop Down Menu (Brooklyn Theme)

Tourist
9 0 2

Hi,

I need help changing the  "<form>" section of my brooklyn theme to make the product variant selection in dropdown menu instead of radio buttons.

In other worlds, I'd like to have the same type of variant selector like the Minimal theme (for example).

I already tried to copy the other form code from the other theme, but with no success. Does somebody know how to properly modify it? Thanks

1 Like
New Member
2 0 0

Hello,

I also need an answer to this. I badly need to change the variants to dropdown. I cannot seem to apply the codes I found online. I also cannot find the contents of my product.liquid that's why I cant aply the solutions I found here for previous brooklyn theme. :(

Hope someone here knows how!

Thanks in advance.

0 Likes
Highlighted
Astronaut
1890 0 373

In the Brooklyn theme, you will find a comment block in product.liquid that should guide you through this process.

{% comment %}

  *IMPORTANT:*
  This theme uses a customized version of `option_selection.js` to support using radio inputs for
  color and size variants. The custom version is in `variant_selection.js`.

  If you wish to enable the default dropdowns for size and color
  you can change the liquid asset tag below from:

  {{ 'variant_selection.js' | asset_url | script_tag }}

  to

  {{ 'option_selection.js' | shopify_asset_url | script_tag }}

  If you use the default `option_selection.js` the labels for the dropdowns will
  appear outside the dropdown.

  You will also need to change `.radio-wrapper` to `.selector-wrapper` below.

{% endcomment %}

 

0 Likes
Tourist
9 0 2

I don't see the "variant_selection.js" file in my source files

0 Likes
Tourist
9 0 2

Also I don't see that comment in the product.liquid file:

product.liquid: 

------------------------------------------------

<!-- /templates/product.liquid -->
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}

{% comment %} Added by Jake O at Shopify November 24 2016 {% endcomment %}
{% section 'related-products' %}

{% if collection %}
      <hr class="hr--clear">
      <div class="text-center">
        <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
      </div>
    {% endif %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  };
</script>
{% include 'nosto-element' with 'productpage-nosto-1' %}

{% include 'nosto-element' with 'productpage-nosto-2' %}
 

0 Likes
Excursionist
20 0 4

I am searching for the same answer too. I would love to have a dropdown for my variants but the solutions that I am finding may be outdated. I say that because I can't find the file sources they are referring to make the changes. Hoping someone can help us!

Thanks!

0 Likes
Tourist
3 0 1

Please I would like to know this as well. information is outdated.

0 Likes
New Member
1 0 0

Any updates on this?

0 Likes
Shopify Partner
11 0 7

Hi,

Go to product-template.liquid and find the <fieldset...> tag and comment or delete it, and put this dropdwonlist code in the same place. 

           {% assign option_index = forloop.index %}     
     				<select class="single-option-selector__radio"
                      name="{{ option.name }}"
                      id="ProductSelect-option-{{ forloop.index0 }}" data-index="option{{ option_index }}">
                      
                      {% for value in option.values %}
                        {% assign variant_label_state = true %}
                        {% if product.options.size == 1 %}
                          {% unless product.variants[forloop.index0].available  %}
                            {% assign variant_label_state = false %}
                          {% endunless %}
                        {% endif %}    	
                      	<option
                          {% if option.selected_value == value %} checked="checked"{% endif %}
                          {% unless variant_label_state %} disabled="disabled"{% endunless %}
                          value="{{ value | escape }}"
                          
                          name="{{ option.name }}"
                          id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">{{ value | escape }}</option>
                      {% endfor %}             
                    </select>  

According to theme.js.liquid the tag must have the single-option-selector__radio selector, and some Attr like data-index ... for more details find _onSelectChange, _getVariantFromOptions, _getCurrentOptions function on theme.js.liquid.

Sorry for my english, i hope it can help you.

3 Likes
New Member
25 0 0

Thanks Mounir, this worked for me. As far as I can tell everything is working OK.

0 Likes