Variant won't get selected

Highlighted
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).

https://i.gyazo.com/047c22e43dec161789960e980927f03e.mp4

 

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.id }}">{{ variant.title | replace: 'Default Title', default_title }}</option>
  {% endfor -%}
</select>

Here's product.liquid

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

<style>
  .product-shop .swatch.swatch-default{display:none;}
  .variant-option{position:relative;}
  .lenght-option-2{height:194px;}
  .lenght-option-3{height:280px;}
  .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.lenght-option-3.option2-default.option3-default{height:250px;}
  .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;}
</style>

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

 

0 Likes
Highlighted

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 .
Email: pallavi@oscprofessionals.com
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
0 Likes