Adding variant image as per selection

Shopify Discussion
1

https://kashco-interiors.myshopify.com/products/chainstitch-rug-2-5-x-4-feet?variant=49792567804210

I want that each image of variant (if the product has one) to be displayed with the SKU. I added some code to do this (from a discussion) and now it even the variant button doesn’t even show the product, forget showing the icon.

Please help me. I would highly appreciate this help kindly.

2

Coul dyou please share the liquid code that you did it?
So that I take a look and provide you solution code.

Thanks

3

{% comment %}
Renders product variant options

Accepts:

  • product: {Object} product object.
  • option: {Object} current product_option object.
  • block: {Object} block object.

Usage:
{% render ‘product-variant-options’,
product: product,
option: option,
block: block
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: ‘available’
assign variants_option1_arr = product.variants | map: ‘option1’
assign variants_option2_arr = product.variants | map: ‘option2’
assign variants_option3_arr = product.variants | map: ‘option3’

assign product_form_id = ‘product-form-’ | append: section.id
-%}

{%- for value in option.values -%}
{%- liquid
assign option_disabled = true

for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
-%}

{%- if block.settings.picker_type == ‘button’ -%}
<input
type=“radio”
id=“{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}”
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled”
{% endif %}

{{ value -}} {{ 'products.product.variant_sold_out_or_unavailable' | t }} {%- elsif block.settings.picker_type == 'dropdown' -%} {% if option_disabled -%} {{- 'products.product.value_unavailable' | t: option_value: value -}} {%- else -%} {{- value -}} {%- endif %} {%- endif -%} {%- endfor -%}
4

Hi @kashco
If I share the link to the video, would you like to watch it? I’m sharing the link because this issue is quite major, and it will require a lot of effort to resolve.

5

Sure

6

It is okay. I reverted the file to original view. https://community.shopify.com/post/2479978 I TRIED using this but it doesn’t work. Anyone have a solution kindly ?

7

@kashco I sincerely apologize for my late reply.

8

Thanks you helped so much. I figured out how to make the images even large relative to the description. How can I make my recommended products images to fit the full width and larger the size.

9

Why does the swatch image doesn’t load for some page ? But it shows the circle