@dmwwebartisan,
Thank you for your response.
But this is not what I'm looking for it's the manual way. I want the complete variant image as a swatch image.
Here is my variant-button.liquid 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">
—
<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="variant__button-label 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 }}"
class="variant__button-label{% unless product_available %} disabled{% endunless %}">{{ value | escape }}</label>
{%- endif -%}
</div>
{%- endfor -%}
</fieldset>
</div>
