Shopify DROPDOWN Variant

Question

I'm currently customizing a Shopify store using the Dawn theme, and I'm facing a challenge with the product variant options. The theme comes with a default setup where both size and color options are presented as a dropdown and checkboxes, respectively.

However, I'd like to enhance the user experience by setting the size variant as a dropdown and representing the color options as visually appealing swatch buttons. I've explored the theme documentation, but I couldn't find a straightforward solution.

Here's a snippet of the existing code in my product-variant-options.liquid file:

{% if option.name == 'Color' %}
      {% assign variant_image_url = product.variants[forloop.index0].metafields.variant.image_url %}
      <label
        class="swColor"
        for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
        {% if variant_image_url %}
        style="background-image: url({{ variant_image_url }});"
        {% endif %}></label>
    {% else %}
      <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
        {{ value -}}
        <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
      </label>
    {% endif %}

How can I modify this code to set the size variant as a dropdown and the color options as visually appealing swatch buttons? Are there specific Liquid tags or JavaScript functions within the Dawn theme that I should leverage for this customization?

Any insights or code snippets would be immensely helpful. Thank you!