Setting up Variants as buttons

WhipCityBreaks
New Member
2 0 2

So I am having a issue figuring out how to change my variants from a drop down menu into individual buttons.  I run a card breaking service and sell the single teams per product so there is only one available team per product and it make it much more user friendly to have all the teams laid out.  The first example is how the products work now and the second is going to be something similar to what I would it to look at ultimately.  

Thank You for the help

Rich@WhipCityBreaks

KetanKumar
Shopify Partner
14384 1670 5172

@WhipCityBreaks 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WhipCityBreaks
New Member
2 0 2

This is my site:

2020 Contenders Football 3 Hobby Box PYT #1 Pre-Sale! – Whip City Breaks

This is something similar to what we are trying to achieve:

2020 Panini Impeccable Football Hobby 3 Box Case #60 - PICK YOUR TEAM 

I want to be able to get rid of the drop down menu and have buttons that get crossed out when they become unavailable

Your help is greatly appreciated

Rich from Whip City Breaks

Alan15
Explorer
76 12 16
Hi,
You can try making this change to the code of the product-template-liquid file in your sections folder:
 
Find the line starting with {%unless at around line 162 for Debut theme:
 {% unless product.has_only_default_variant %}
 
and ending with the matching {% endunless %} at line 180, and replace 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 == "Title" %}
                <label>{{ option.name }}</label>
                
                {% assign index = forloop.index %}
               
                <div class="team-swatch">  
                {% 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 class="single-option-selector-{{ section.id }}" 
                           id="title-{{forloop.index}}" 
                           type="radio" 
                           name="title" 
                           value="{{ value | escape }}" 
                           data-index="option{{ index }}" 
                           {% if option.selected_value == value %} checked="checked"{% endif %}
                           {% unless variant_label_state %} disabled="disabled"{% endunless %}
              />
                    <label for="title-{{forloop.index}}">{{value}}</label>
                                  
                {% endfor %}
                </div>
                 
                {% else %}
             
                <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>
              
                {% endif %}
                
              </div>
            {% endfor %}
          {% endunless %}
          
 Then, in your theme.css in the assets folder, add these styles to the end (change to suit your site):
 
 .team-swatch{
  display: flex;  
  flex-wrap: wrap;
  }       
  .team-swatch input{
    opacity: 0;
    width: 0;
    height: 0;
  }
  .team-swatch label{
    padding:1em;
    margin:0 5px 5px 0;
    border: 1px solid lightgray;
  }
 .team-swatch input:disabled + label {
   opacity: 0.35;           
   cursor: default;
   text-decoration: line-through;
   }
 .team-swatch input:checked + label {
    box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em green;
  }
  .team-swatch input:focus + label {
    box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em green;
  }
 
 
 
0 Likes
KetanKumar
Shopify Partner
14384 1670 5172

@WhipCityBreaks 

are your check this option on theme customization?

also try this 

https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/td-p/616...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes