Product options probleme / variant probleme

enzosmr
New Member
1 0 0

Hello ! 

I currently trying to create a shopify theme but i have a probleme since 1 week maybe. 

I have two options / variants > the size and the color ( black and white). 

As you can see on the attached picture if have this strange result.

proof.png
The code : 

 {% for product_option in product.options_with_values %}
            <div>
              <span class="block mb-4 font-bold font-heading text-gray-400 uppercase">{{ product_option.name | | capitalize }}</span>
              <select class="pl-6 pr-10 py-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="id" id="productSelect">
                {% for variant in product.variants %}
                {% if variant.available %}
                {% for value in product_option.values %}           
                <option  {% if product_option.selected_value == value %}selected{% endif %}>
                  {{ value }}
                </option>
              {% endfor %}   
              {% endif %}
               {% endfor %}      
              </select>
            </div>
            {% endfor %}

Also tried 

<select class="pl-6 pr-10 py-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="id" id="productSelect">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                  {% else %}
                  <option value="{{ variant.id }}" disabled>
                    {{ variant.title }} - sold out
                  </option>
                {% endif %}
              {% endfor %}
            </select>

But not really the result than i want.

I want two option in different select . Like the first image. 

Thank you!

Replies 0 (0)