A user needs help configuring product variants so that only the SIZE option displays as a dropdown while keeping the COLOR option as an image/color swatch. The theme’s customizer only allows changing both variants simultaneously, not individually.
Key Points:
{% if option.name == "color" %}), but warns it may break the add-to-cart functionalityproduct-variant-picker.liquid that automatically applies swatches to the first option and dropdowns to remaining optionsTechnical Approach:
The solution involves modifying the variant picker code to conditionally render different picker types based on option names or positions. The provided code snippet uses liquid logic to detect swatch availability and apply appropriate formatting.
Status: A code solution has been shared, though implementation requires editing theme files and carries risk of affecting cart functionality if not properly tested.
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 
@xnyjyh - please open this product page in customize settings and please check if you have an option to change variants to drop down
this can be done via custom coding which will be based on tag
Really? thanks so much!
re-read my post!
you’re welcome
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.
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.
No instructions or you do not know how to do?
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
{% 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.
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
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
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’ -%}