Size variant dropdown

[xnyjyh]

Try one more time. Need some help getting ONLY the SIZE variant to be a drop down, but KEEP color variant as Color/Image Swatch.

I know its easy and doable, but I just don't know how.

LOOK at my picture guys! there's no option in editor to do one! ONLY both. I NEED only one(SIZE)!

Thanks in advance 🙂

[suyash1]

@xnyjyh - please open this product page in customize settings and please check if you have an option to change variants to drop down

[xnyjyh]

re-read my post!

[vinods]

this can be done via custom coding which will be based on tag 

[xnyjyh]

Really? thanks so much!

[vinods]

you're welcome

[xnyjyh]

No instructions or you do not know how to do?

[niraj_patel]

Hello @xnyjyh 
1  Go to Online Store -> Theme -> click on customize

2 Go and choose product page

3 click variant  picker

4 Here is a option of pills and dropdown click on dropdown

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[xnyjyh]

if you read my thread post, i ONLY need size variant drop down. That in theme editor ONLY does BOTH color and size. no option to do only one.

[Guleria]

Hello @xnyjyh ,

If you looking for an idea please follow:
Find the code and make it conditional 
{% If option.name == "color" %}
use swatch code which is already available in your theme.
{% else %}
use dropdown code which is also already available in your theme
{% endif  %}

If you can modify code in this way result will be as you need. 
But keep note I'm 99% sure after this your variant selection will not work. Means add to cart button will add wrong values to cart.

Thanks

[xnyjyh]

{% If option.name == "color" %}

does not exist. even if it did, I'd have no idea what to do with it lol! That is why I'm on this community to get help.

[Guleria]

You can't find an exact solution for the complex customization you need. 
That's why I mentioned. Follow it if you are looking for an idea
 

[xnyjyh]

thi is my product variant picker code... dawn V12.0 

{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >

      {% assign entry_title = "variant-swatch-mapping" %}

      {% assign target_entry = nil %}
      {% for entry in shop.metaobjects.variant_swatch_map.values %}
        {% if entry.title == entry_title %}
          {% assign target_entry = entry %}
          {% break %}
        {% endif %}
      {% endfor %}
    
      {% if target_entry %}
        {% assign variant_images_data = target_entry.variant_images_json %}
      {% else %}
        {% assign variant_images_data = nil %}
      {% endif %}

      {%- for option in product.options_with_values -%}
        {% assign variant_options_images = variant_images_data.value | where: "variant_name", option.name %}
        
        <fieldset class="js product-form__input {% if variant_options_images.size > 0 %}product-form__special-input{% endif %}">
          <legend class="leo-set--{{ forloop.index }} form__label">
            {{ option.name }}: 
            <span id="selected{{ option.name }}">{{ option.selected_value }}</span>
          </legend>
          {% if variant_options_images.size > 0 %}
            {% render 'product-variant-swatch-custom', product: product, option: option, variant_images_data: variant_options_images %}
          {% else %}
            {% render 'product-variant-options', product: product, option: option, block: block %}
          {% endif %}
        </fieldset>
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              assign cart_quantity = cart | item_count_for_variant: variant.id
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>
{{ 'product-variant-selection-custom.js' | asset_url | script_tag }}

 dawn V12.0 

[Zainalee]

replace your product-variant-picker.liquid code with this code:-

{%- unless product.has_only_default_variant -%}
<variant-selects
id="variant-selects-{{ section.id }}"
data-section="{{ section.id }}"
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: 'swatch' | compact | size
assign picker_type = block.settings.picker_type

if swatch_count > 0 and block.settings.swatch_shape != 'none' and forloop.first
assign picker_type = 'swatch'
else
assign picker_type = 'dropdown'
endif
-%}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">
{{ option.name }}:
<span data-selected-value>
{{- option.selected_value -}}
</span>
</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
{%- else -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</select>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</div>
</div>
{%- endif -%}
{%- endfor -%}

<script type="application/json" data-selected-variant>
{{ product.selected_or_first_available_variant | json }}
</script>
</variant-selects>
{%- endunless -%}