Variant won't get selected

New Member
3 0 0

I'm having a problem where I have two variants (colors) and the first one is selected always, as default. If I click on the second color it doesn't select it, you can see an example here (it's a gif).


Here's the product-get-variants-liquid

{% capture default_title -%}{{ 'products.product.default_variant_title' | t }}{%- endcapture %}
<select name="id" class="m-0" data-js-product-variants{% unless show_custom_options %}="control"{% endunless %}>
  {% for variant in product.variants %}
  <option{% if variant == current_variant and variant.available %} selected="selected"{% endif %}{% unless variant.available %} disabled="disabled"{% endunless %} value="{{ }}">{{ variant.title | replace: 'Default Title', default_title }}</option>
  {% endfor -%}

Here's product.liquid

{% section 'product-template' %}
{% section 'product-related' %}
{% section 'recently-viewed-products' %}

  .fixed-infor .product-dynamic-checkout,.fixed-infor .product-label-wr,.fixed-infor .product-shop .producttop-meta .total-sold-pr, .fixed-infor .prodcuct-vendor, .fixed-infor .product-sku, .fixed-infor .product-information, .fixed-infor .product-dynamic-checkout, .fixed-infor .wishlist-detail, .fixed-infor .compare-detail,
  .fixed-infor .pr-view-countdown, .fixed-infor .product-visitors, .fixed-infor .spend-shiping, .fixed-infor .badge-image, .fixed-infor .product_meta, .fixed-infor .product-share-links{display:none;}
  #add-to-cart-form .option1-default .selector-wrapper:nth-child(1){display:block;}
  #add-to-cart-form .option2-default .selector-wrapper:nth-child(2){display: block;position: absolute;top: 97px;width: 100%;}
  #add-to-cart-form .option2-default .sw-2{padding-top:107px;}
  #add-to-cart-form .option3-default .selector-wrapper:nth-child(3){display:block;position: absolute;bottom: 0;width: 100%;}
  .variant-option.option1-text.option2-default{height: 180px;}
  .option1-default .swatch1-default{display:none;}
  .option2-default .swatch2-default{display:none;}
  .option3-default .swatch3-default{display:none;}
  .fixed-infor #add-to-cart-form .selector-wrapper{display:none !important;}
  .fixed-infor #add-to-cart-form .option2-default .sw-2 { padding-top: 0;}

I'm not sure if any of this is helping, I can also provide access to the store if someone could fix this, please. 



Hello blackskarab,
Please share your site url so that I can check and let you know exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit