shopify color and size variants

single-product.liquid

<!--product form-->
        <form action="/cart/add" method="post" enctype="multipart/form-data">

            <!--product variants-->
            {% unless product.has_only_default_variant %}

                {% for option in product.options_with_values %}

                    <div class="single-product__option-wrapper js">

                        <div class="product-option__{{ option.name | downcase }}"
                             id="SingleOptionSelector-{{ forloop.index0 }}">

                            {% for value in option.values %}

                                {% assign option-name = option.name | downcase %}

                                {% assign product-handle = product.handle %}

                                {% assign is_color = false %}

                                {% if option-name contains 'color' or option-name contains 'colour' %}

                                    {% assign is_color = true %}

                                {% endif %}

                                <input type="radio" name="{{ option-name }}-{{ product-handle }}"
                                       class="single-option-selector"
                                       data-single-option-selector
                                       data-index="option{{ option.position }}"
                                       value="{{ value | escape }}"
                                       data-color="{{ value | handleize }}"
                                       {% if option.selected_value == value %}checked="checked"{% endif %}
                                       id="variant_{{ option-name }}-{{ product-handle }}-{{ forloop.index0 }}"/>

                                <label for="variant_{{ option-name }}-{{ product-handle }}-{{ forloop.index0 }}"
                                       {% if is_color %}style="background-color: {{ value | split: ' ' | last | handle }};{% endif %}">{{ value }}</label>

                            {% endfor %}

                        </div>

                    </div>

                {% endfor %}

            {% endunless %}

            <select name="id" class="no-js" data-product-select>
                {% for variant in product.variants %}
                    <option
                            {% if variant == current_variant %}selected="selected"{% endif %}
                            {% unless variant.available %}disabled="disabled"{% endunless %}
                            value="{{ variant.id }}">
                        {{ variant.title }}
                    </option>
                {% endfor %}
            </select>
            <!--end product variants-->

            <!--product add to cart-->
            <button
                    class="single-product__add-to-cart u-b6"
                    type="submit"
                    name="add"
                    data-add-to-cart
                    {% unless current_variant.available %}disabled="disabled"{% endunless %}>

                    <span data-add-to-cart-text>
                        {% if current_variant.available %}
                            {{ 'products.product.add_to_cart' | t }}
                        {% else %}
                            {{ 'products.product.sold_out' | t }}
                        {% endif %}
                    </span>

            </button>
            <!--end product add to cart-->

        </form>
        <!--end product form-->