Change product option from drop down to buttons?

Store Design
1

Hello

I’m currently using debut. On the product pages, the user has to select from a drop-down menu for the size, they want. This isn’t great as you can’t see all the sizes and what is sold out in a single view…

Matt_feiyue_0-1610187452069.png
Matt_feiyue_0-1610187452069.png602×311 50.7 KB

I want it to be something like this instead…

Matt_feiyue_1-1610187635970.png
Matt_feiyue_1-1610187635970.png830×653 25.6 KB

QUESTIONS:

  1. Can I do this as standard in debut and how?
  2. If not is there code I can add and how?
  3. Alternatively, are there other free themes that have this as standard?
2

I think the Brooklyn theme offers this by default.

In debut you probably need to update the code in your product-template.liquid file in the sections folder file.

You can try adding this code at around line 161, the one that has this line {% form ‘product’, product, class:form_classes, novalidate: ‘novalidate’, data-product-form: ‘’ %}

Replace the the part from {% unless %} and {% endunless %} with this (you will need to update the css between the tags to get it looking the way you like) :

{% unless product.has_only_default_variant %}
              
                {% for option in product.options_with_values %}
                  

                    
                         {% if option.name == "Size" %}
                
                
                {% assign 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 %}
                         
                	
                    
                                  
                {% endfor %}
                

                
                
                
  
                {% else %}
                    
                    
                    
                    
                    
                    
                    {% endif %}
                  

                {% endfor %}
              

        
            {% endunless %}