Blog

Color Swatch With Dropdown Menu For Sizes in Shopify

1. Go to theme -> Edit code -> Snippets -> product-variant-picker.liquid

2. Find below code:

<fieldset class="js product-form__input product-form__input--pill">
  <legend class="form__label">{{ option.name }}</legend>
  {% render 'product-variant-options',
    product: product,
    option: option,
    block: block,
    picker_type: picker_type
  %}
</fieldset>

3. Replace above code with below code:

{%- liquid
  assign optionNames = settings.optionName | split:","
  assign useColor = false
  for optionColor in optionNames
    if optionColor == option.name
        assign useColor = true
        break
    endif
  endfor
-%}

{% if useColor %}

<fieldset class="js product-form__input product-form__input--pill">
<legend class="form__label">{{ option.name }}</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: "swatch_dropdown"
    %}
  </select>
  {% render 'icon-caret' %}
</div>
</div>
{% endif %}