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

Highlighted
New Member
25 0 0

Further to Mounir's solution, how can I put the two drop down's on the same line, rather than one under the other? Thanks

0 Likes
Highlighted
New Member
1 0 0

Many thanks to Mounir HAB-ARRIH. It's work great!

0 Likes
Highlighted
New Member
1 0 0

Mounir, thank you so so much!

It worked :) I have spent a very long time to figure the answer out with various forums and your answer was the best by far - Thank you 

0 Likes
Highlighted
New Member
4 0 0

Mounir HAB-ARRIH  the code works perfectly, however I lost the "quantity" button
do you know how to add and in addition to that face the deployables of the variant?

 

0 Likes
Highlighted
New Member
3 0 0

thank you bro working 

0 Likes
Highlighted
Tourist
13 0 1

I am working on this and entered the code which added drop-down lists, but kept the selector options as well. Do I need to delete some code to get rid of those?

0 Likes
Highlighted
Tourist
7 0 0

This happen to me as well. It added the drop down but kept the others and shows the add to cart as unavailable now. Anyone knows how to fix this?

0 Likes
Highlighted
Tourist
3 0 2

Hi Mounir / all,

 

I appreciate that this is an old post and I'm glad that it helped most people here.

 

I've tried applying this to my Brooklyn theme store as well but it didn't work for me. I've previously changed the variant display on my products from radio buttons to dropdown list page using the default Brooklyn theme feature to do this. I have my product variants on my products page show a dropdown list but it still shows the variants as radio buttons when I use the Featured Product option on my homepage.

 

I've followed your instructions below and commented the entire <fieldset...> tag (along with the if statement above). Please see code below - I've attached a snippet of my product-template.liquid code.

 

Please note: I am a beginner in Liquid/Ruby programming, I've fumbled my way around since I started my Shopify journey. I apologise if I've made a clear and obvious mistake.

 

{% form 'product', product, class:form_classes, id:form_id %}
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
                      for="ProductSelect-option-{{ forloop.index0 }}">
                      {{ option.name | escape }}
                    </label>
                    
                     <!-- DROPDOWN LIST DISPLAY -->
                    {% 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>
                    <!-- / DROPDOWN LIST DISPLAY -->                    
                    
                    {% comment %}
                    {% if section.settings.product_selector == 'radio' %}                  
                    
                    <!-- DEFAULT RADIO BUTTON PRODUCT DISPLAY -->
                                        {% comment %}
                      <fieldset class="single-option-radio"
                        name="{{ option.name | handleize }}"
                        id="ProductSelect-option-{{ forloop.index0 }}">
                        {% assign option_index = forloop.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 %}
                          <input type="radio"
                            {% if option.selected_value == value %} checked="checked"{% endif %}
                            {% unless variant_label_state %} disabled="disabled"{% endunless %}
                            value="{{ value | escape }}"
                            data-index="option{{ option_index }}"
                            name="{{ option.name | handleize }}"
                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
                        {% endfor %}
                      </fieldset>
                    {% endcomment %}					
                    <!-- / DEFAULT RADIO BUTTON PRODUCT DISPLAY --> 
                    
                    {% else %}
                      <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                        {% for value in option.values %}
                          <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
                        {% endfor %}
                      </select>
                    {% endif %}
                    {% endcomment %}
                    
                  </div>
                {% endfor %}
              {% endunless %}

Any help would be greatly appreciated. Thank you.

0 Likes