Shopify DROPDOWN变体

问：

我目前正在使用 Dawn 主题自定义 Shopify 商店，并且我面临着产品变体选项的挑战。该主题带有默认设置，其中大小和颜色选项分别显示为下拉列表和复选框。

但是，我想通过将大小变体设置为下拉列表并将颜色选项表示为具有视觉吸引力的色板按钮来增强用户体验。我已经浏览了主题文档，但我找不到一个简单的解决方案。

这是我的 product-variant-options.liquid 文件中现有代码的片段：

{% 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 %}

如何修改此代码以将大小变体设置为下拉列表，将颜色选项设置为具有视觉吸引力的色板按钮？Dawn 主题中是否有特定的 Liquid 标签或 JavaScript 函数，我应该利用这些标签或 JavaScript 函数进行此自定义？

任何见解或代码片段都将非常有帮助。谢谢！