How to add a variant dropdown for style, material, and color?

[DK7]

Hi everyone, 
Hope you're all doing well. I'm trying to add a dropdown for "Style" and "Material" variants. Additionally, for "Color" variants, I'm looking for a wider range of color for my website as the Swatches don't show some specific color.
I'd have some photos attached here so you could easily understand my point.

I also include the code here in case you need it.

{% comment %}
Display options for a product

@param product

@param selected_variant

@param style
{% endcomment %}

<div data-product-options-container>
  <div class="variant_main">
    <label class="form-field-title" class="is-hidden" for="variants">Variants</label>
    <select name="id" id="variants" class="is-hidden">
      {% for variant in product.variants %}
      <option value="{{ variant.id }}" data-variant-img-index="{{ variant.featured_image.position }}">{{ variant.title }}</option>
      {% endfor%}
    </select>
  </div>
  {% for option in product.options_with_values %}
  <div class="form-field form-options js-required variants">
    <div class="form-field-select-wrapper">
      {% if option.name == 'Color' %}
      <legend class="form__label">{{ option.name }}: <span> {{ option.selected_value}} </span> </legend>
      <div class="color_swatch_contaner">
        <div class="color_select" style="display: none  ;">
          <select
                  onChange="onChangeOption(this);"
                  tabindex="0"
                  onkeyup="onChangeOption(this);"
                  class="form-field-input form-field-select"
                  id="{{ option.name }}-selection"
                  data-product-option="{{ forloop.index0 }}">
            {% for value in option.values %}
            <option
                    value="{{ value | escape }}"
                    {% if option.selected_value == value %}selected="selected"{% endif %}
                    {% if value.available %} {% else %} data-disalbe{% endif %}
                    >
              {{ value }}
            </option>
            {% endfor %}
          </select>
          <label class="form-field-title" for="{{ option.name }}-selection">{{ option.name }}</label>
        </div>
        {%- for value in option.values -%}

          {% assign option_image = nil %}
          {% for variant in product.variants %}
          {% if variant.title contains value %}
          {% assign option_image = variant.image %}
          {% endif %}
          {% endfor %}

        <input class="form-field-input swatch_change"
               type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
               name="{{ option.name }}"
               value="{{ value | escape }}"
               form="product-form-{{ section.id }}"
               {% if option.selected_value == value %}checked{% endif %}
               >
        <label   class="vv_image" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" >
     
            <img src="{{ option_image | img_url: '100x' }}">
      
        </label>
        {%- endfor -%}
      </div>

      {%else%}

      <select
              onChange="onChangeOption(this);"
              tabindex="0"
              onkeyup="onChangeOption(this);"
              class="form-field-input form-field-select"
              id="{{ option.name }}-selection"
              data-product-option="{{ forloop.index0 }}">
        {% for value in option.values %}
        <option
                value="{{ value | escape }}"
                {% if option.selected_value == value %}selected="selected"{% endif %}
                {% if value.available %} {% else %} data-disalbe{% endif %}
                >
          {{ value }}
        </option>
        {% endfor %}
      </select>
      <label class="form-field-title" for="{{ option.name }}-selection">{{ option.name }}</label>
      {% include 'icon-chevron-down' %}

      {% endif %}

    </div>
  </div>
  {% endfor %}
</div>

 Thank you very much! Wish you all a beautiful day!

[PageFly-Victor]

Hi @DK7 ,
This is PageFly - Free Landing Page Builder!
You can try our app and the Product Variant element with Dropdown menu, ratio button, color swatches!

PageFly is a group of many small tools and options that save you much time, money and effort. Some examples are Instagram Auto-Token, Countdown timer, Visualized CSS editor, Contact Form, HTML code editor, just to name a few.

Everything is presented with a minimalized interface so that you can easily utilize the features without getting overwhelmed.

If you want to do more customization for your store to increase conversion rate, you can consider using a Shopify page builder. And PageFly, Advanced Page Builder with 24/7 support live chat is a great app that helps you easily customize your Shopify pages and make it more attractive.

If you find my comment useful, please let me know by giving it a Like. Thank you!
PageFly

[DK7]

Hi @PageFly-Victor ,
Thanks for your recommendation. I'll give it a try.

[DK7]

However, I think it'd take much time to finish crafting another page. If only anyone could help me set this up so that I could save time.
Thank you very much!