How to fix variant issues on single product page?

[marketplace026]

https://l06uo7vcz4efs808-1939374189.shopifypreview.com/products/babyphone-mary-by-sticklett-smart-fa...

<product-form>
{%- form 'product',
product_card_product,
id: product_form_id,
class: 'element--full-width',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}

<select name="id" class="option-cus" style="display:none;">
{% for variant in product_card_product.variants %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>

<input min="1" type="number" id="quantity" name="quantity" value="1" class="display--hidden" tabindex="-1">
<button
type="submit"
class="button--tag flex--none"
{% if product_card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span class="space--mr--xsmall">
{{ add_to_cart_label }}
</span>
<span>
{{- cart.currency.symbol -}}
{{- product_card_product.selected_or_first_available_variant.price | money_without_currency -}}
</span>
</button>
<div data-error-message-wrapper role="alert" hidden class="space--mb--small">
{%- render 'icons', icon: 'error', class: 'form-message__icon space--mr--xsmall' -%}
<span data-error-message class="form-message"></span>
</div>
{%- endform -%}
</product-form>

This show is happening right now
https://postimg.cc/hJysS2qf
but i want to do a show like this
https://postimg.cc/9rYGmLdC

[Himanshu7]

Try this

{% assign product_card_product = product %}
{{ product_card_product.variants }}
<product-form>
{%- form 'product',product_card_product,
id: product_form_id,
class: 'element--full-width',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}


<select name="option1" class="option-cus" style="display:block;">
  {% assign unique_option1_values = product_card_product.variants | map: 'option1' | uniq %}
  {% for option1_value in unique_option1_values %}
    {% if option1_value != blank %}
      <option value="{{ option1_value }}">{{ option1_value }}</option>
    {% endif %}
  {% endfor %}
</select>


<select name="option2" class="option-cus" style="display:block;">
  {% assign unique_option2_values = product_card_product.variants | map: 'option2' | uniq %}
  {% for option2_value in unique_option2_values %}
    {% if option2_value != blank %}
      <option value="{{ option2_value }}">{{ option2_value }}</option>
    {% endif %}
  {% endfor %}
</select>



<input min="1" type="number" id="quantity" name="quantity" value="1" class="display--hidden" tabindex="-1">

<button
type="submit"
class="button--tag flex--none"
{% if product_card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span class="space--mr--xsmall">
{{ add_to_cart_label }}
</span>
<span>
{{- cart.currency.symbol -}}
{{- product_card_product.selected_or_first_available_variant.price | money_without_currency -}}
</span>
</button>
<div data-error-message-wrapper role="alert" hidden class="space--mb--small">
{%- render 'icons', icon: 'error', class: 'form-message__icon space--mr--xsmall' -%}
<span data-error-message class="form-message"></span>
</div>
{%- endform -%}
</product-form>