How to add on product page variant image swatch without app like this in dawn theme

[satyapal49]

How to add on product page variant image swatch without app like this in dawn theme

[websensepro]

Hello Satyapal,

I’m giving you the code for Add On Product Page Variant Image Swatch, and also giving you a video tutorial

I am giving you a video that will make it easier for you to understand.

Here’s a code:

{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %}
      
    {% else %}
      
    {% endif %}

And here’s a video on how to add this code:https://youtu.be/lacCldZ_iHU

[satyapal49]

I checked this but getting the issue code that you told to replace is not getting

[satyapal49]

see code not exact like you told please help me to solve issue

[websensepro]

[websensepro]

Please check You selected the right file.

[satyapal49]

showing different please check in updated version 13.0.1

[websensepro]

My version is also 13.0.1

[satyapal49]

but i don’t know why its not matching please copy all code product-variant-options.liquid and send here

[websensepro]

{% 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' -%}
    
    
  {%- elsif block.settings.picker_type == 'dropdown' -%}
    
  {%- endif -%}
{%- endfor -%}

[satyapal49]

again install delete current and install new

[chaubalmisra]

I am also trying on my liquid file from Spotlight theme but its not working when I just copy and paste the specific section. But when I use your code, it partially works and shows same image for all variants.

Here is my liquid file

{% comment %}
  Renders product variant options

  Accepts:
  - product: {Object} product object.
  - option: {Object} current product_option object.
  - block: {Object} block object.
  - picker_type: {String} type of picker to dispay

  Usage:
  {% render 'product-variant-options',
    product: product,
    option: option,
    block: block
    picker_type: picker_type
  %}
{% 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 value.swatch.image
      assign image_url = value.swatch.image | image_url: width: 50
      assign swatch_value = 'url(' | append: image_url | append: ')'
    elsif value.swatch.color
      assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
    else
      assign swatch_value = nil
    endif
  -%}

  {%- capture input_id -%}
    {{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
  {%- endcapture -%}

  {%- capture label_unavailable %}
    
      {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
    
  {%- endcapture %}

  {%- if picker_type == 'swatch' -%}
    {% assign checked = false %}
    {% if option.selected_value == value %}
      {% assign checked = true %}
    {% endif %}
    {%
      render 'swatch-input',
      id: input_id,
      name: option.name,
      value: value | escape,
      product_form_id: product_form_id,
      checked: checked,
      disabled: option_disabled,
      shape: block.settings.swatch_shape,
      help_text: label_unavailable
    %}
  {%- elsif picker_type == 'button' -%}
    
    
  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    
  {%- endif -%}
{%- endfor -%}

[Yarnforward]

Having added your code to my theme Spotlight, I get this

If I set Variantpicker to hide and show again I get

When I go to Product Page I get

If I refresh page I momentarily get the swatches correct but it goes back to last picture.

Any ideas to what I can do?

[caos-brand-3128]

Is there a way to do it without using code? Thanks for sharing!!!

[kashco]

Doesn’t work in mine. Why ?

https://community.shopify.com/post/2479978