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

[vinods]

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

[xnyjyh]

Really? thanks so much!

[xnyjyh]

re-read my post!

[vinods]

you’re welcome

[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.

[xnyjyh]

No instructions or you do not know how to do?

[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.

[xnyjyh]

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

{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    
  {%- else -%}
    
  {%- endif -%}
{%- endunless -%}

{{ 'product-variant-selection-custom.js' | asset_url | script_tag }}

dawn V12.0

[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

[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’ -%}

{{ option.name }}: {{- option.selected_value -}} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- else -%}

{{ option.name }}

{% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {{- 'icon-caret.svg' | inline_asset_content -}}

{%- endif -%} {%- endfor -%} {%- endunless -%}