Hello, I need a solution so I can be able to select a variant by clicking on a picture within the Prestige theme. I have searched and searched for solutions but nothing helps. So please help me! I’ve already tried the link below.
Topic summary
Goal: enable selecting a product variant by clicking its image in the Prestige theme; the standard Shopify (vintage themes) guide didn’t help.
Latest update:
- A contributor shared a Liquid code solution that replaces color swatches with the actual variant images and makes them clickable to select variants.
- Key changes: set variant_image_url (e.g., 600x), use variant_for_value.image data, and apply data attributes (data-variant-url, data-image-id, data-image-url, data-image-widths, data-image-aspect-ratio) so clicking the swatch updates the selected variant and image.
- Implementation: replace the existing ColorSwatch markup with the provided code; can be added where swatches are needed. The contributor placed it in product-item.liquid.
- Visuals: screenshots included to show before/after appearance.
Open items:
- No confirmation from the original requester that this solved the issue; another participant asked if a solution was found. The thread appears unresolved/awaiting feedback.
Did you ever solve this? I’m looking for the same thing.
Using this code show variant color in prestige theme.
{% comment %}
{%- if variant_for_value.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%}{%- endcapture -%}
{%- assign variant_image_url = variant_for_value.image | img_url: '' -%}
{%- endif -%}
{% endcomment %}
{%- assign color_swatch_name = value | handle | append: ‘.png’ -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<input class=“ColorSwatch__Radio” type=“radio” name=“{{ color_name }}” id=“{{ color_id }}” value=“{{ value | escape }}” {% if option.selected_value == value %}checked=“checked”{% endif %} data-variant-url=“{{ variant_for_value.url }}{% if variant_for_value.image %}#Image{{ variant_for_value.image.id }}{% endif %}” {% if variant_for_value.image %}data-image-id=“{{ variant_for_value.image.id }}” data-image-url=“{{ variant_image_url }}” data-image-widths=“[{{ supported_sizes }}]” data-image-aspect-ratio=“{{ variant_for_value.image.aspect_ratio }}”{% endif %} aria-hidden=“true”>
Replace above code with this code for show variant images.
{%- if variant_for_value.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%}{%- endcapture -%}
{%- assign variant_image_url = variant_for_value.image | img_url: '600x' -%}
{%- endif -%}
{%- assign color_swatch_name = value | handle | append: ‘.png’ -%}
{%- assign color_swatch_image = variant_image_url -%}
<input class=“ColorSwatch__Radio” type=“radio” name=“{{ color_name }}” id=“{{ color_id }}” value=“{{ value | escape }}” {% if option.selected_value == value %}checked=“checked”{% endif %} data-variant-url=“{{ variant_for_value.url }}{% if variant_for_value.image %}#Image{{ variant_for_value.image.id }}{% endif %}” {% if variant_for_value.image %}data-image-id=“{{ variant_for_value.image.id }}” data-image-url=“{{ variant_image_url }}” data-image-widths=“[{{ supported_sizes }}]” data-image-aspect-ratio=“{{ variant_for_value.image.aspect_ratio }}”{% endif %} aria-hidden=“true”>
use this code any file you want need to color swatch to image variant.
I added this code in product-item.liquad.