Changing variant dropdown to boxes in Venture

Richie_Crim1
New Member
1 0 0

I have actually gotten the boxes to show up, but the dropdown is still on top in the product page and it's also what goes to the cart.  How can I get rid of the dropdown? Any ideas?

https://hvrzyv505vfkczvd-11694112834.shopifypreview.com

Thanks!

0 Likes
Alan15
Pathfinder
93 21 25

You need to update the code in your product-template.liquid file.
It looks like you are displaying the sizes but they are not connected to the selected variant.
Try adding this code to the current code between the lines 
{% unless product.has_only_default_variant %} , around line 160, and before the closing {% endunless %} at around 226, with this code:

 

          {% unless product.has_only_default_variant %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                
                {% if option.name == "Size" %}
                <label>{{ option.name }}</label>
                
                {% assign index = forloop.index %}
               
                <div class="size-swatch">
                {% for value in option.values %}
                
                	<input class="single-option-selector-{{ section.id }}" 
                           id="size-{{forloop.index}}" 
                           type="radio" 
                           name="size" 
                           value="{{ value | escape }}" 
                           data-index="option{{ index }}" 
                           {% if option.selected_value == value %}checked{% endif %}/>
                    <label for="size-{{forloop.index}}">
                      
                      {{value}}
                
                    </label>
                
                {% endfor %}
                </div>
                
                
                <style>
                  .size-swatch{
                    display: flex;
                  }       
                   .size-swatch input{
                    display: none;
                  }
                  .size-swatch label{
                    padding:1em;
                    max-height:44px;
                	border: 1px solid lightgray;
                  }
                 .size-swatch input:checked + label {
                   border: 1px solid black;
                  }
                
                </style>
                
                
                
                {% else %}
                <!-- default selector start-->
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                  {% endfor %}
                </select>
                 <!-- default selector end-->
                {% endif %}
                
              </div>
            {% endfor %}
          {% endunless %}

 

It won't look exactly as you want it, but you can change the styling after. That should work, but you might already have made customizations to the code that could complicate it a bit.

0 Likes