Product Page Design - Personalizing variant choice

[WebWeave]

Hi everyone, I'm working on a client store and he ask me to do the same as this website : https://www.aquabumps.com/product/bender/

I need to do like a mix of a dropdown / radio button for variants.

Here are my variants : 

The store I am building is using Motion Theme and can be found here :

www.karencoopergallery.myshopify.com

PW: Karen01$

Here's the link to an exemple product: https://karencoopergallery.myshopify.com/collections/abstracts/products/abstract-aspens-2?variant=21...

I need the variant choices to be like this : 

I need to deliver this project in 2 days I really need your help !!!! 

Thank you

[Pallavi]

Hello WebWeave,
 Do you want Add to cart in both variant similar to reference site. 

[WebWeave]

Hi Pavalli, yes they want it to be exactly like the reference website! Here is the code :

{%- assign swatch_file_extension = 'png' -%}
{%- assign is_color = false -%}
{%- assign color_swatch_drop = option_drop -%}
{%- assign color_option_index = 0 -%}

{% if settings.product_color_swatches %}
  {% for option in product.options_with_values %}
    {% if option == color_swatch_drop %}
      {%- assign color_option_index = forloop.index0 -%}
      {%- assign downcased_option = color_swatch_drop.name | downcase -%}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% assign is_color = true %}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

<div class="variant-wrapper variant-wrapper--{{ settings.variant_type }} js">
  <label class="variant__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless settings.variant_labels_enable %} hidden-label{% endunless %}"
    for="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {{ option.name }}
    {% if is_color %}
      <span class="variant__label-info">
        &mdash;
        <span
          id="VariantColorLabel-{{ section_id }}-{{ forloop.index0 }}"
          data-option-index="{{ color_option_index }}">
          {{ option.selected_value }}
        </span>
      </span>
    {% endif %}
  </label>

  
  {% assign option_index = forloop.index %}
  <fieldset class="variant-input-wrap"
    name="{{ option.name }}"
    data-index="option{{ option_index }}"
    id="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
        
    {% for value in option.values %}
      {%- assign product_available = true -%}
      {% if product.options.size == 1 %}
        {%- assign product_available = product.variants[forloop.index0].available -%}
      {% endif %}

    
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {% if is_color %}
          {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
          {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
          >
            {{ value | escape }}
          </label>
        {% else %}
          <label for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"{% unless product_available %} class="disabled"{% endunless %}>{{ value | escape }}</label>
        {% endif %}
      </div>
    {% endfor %}
  </fieldset>
</div>

Thank you very much for your help and your time! :)

[WebWeave]

Hi everyone, I still need help. Don't ask for money, I'm not paid enough for this project to give a share.