Variant images display instead of text fix - $30 reward

[zomex]

Hello everyone,

I am happy to donate $30 to anyone who can fix this issue.

I am using the Dawn theme which by default will show text buttons for variants.

The following video provided code which added support for images to be shown:

https://www.youtube.com/watch?v=lacCldZ_iHU

The problem is that the code only works for 1 variant (e.g color).

If you have more than 1 variant such as color and size. The color variant will show the wrong images no longer matching those set in Shopify.

Shop password: bayldo

Example Working: https://decorative-gold.myshopify.com/products/enchanted-gold-rose-dome (as 1 variant)

Example not working: https://decorative-gold.myshopify.com/products/black-gold-animal-canvas-paintings (as there are more than 1 variant - you can see the correct image shows as the main product image but not as the variant).

The code modification is in product-variant-options.liquid:

Default code:

Replaced with:

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

Thanks.

[ThePixelEdge]

Hi @zomex ,

We could look into this for you Can you DM us so we can request for Collaborator access and you can share the Collaborator Pin Securely .

[stefansweb2020]

@zomex Hey there Is a need to change 3 files and maybe add some CSS so your images will show right, I will copy and paste the codes of files just to let you know most of the time we create separate files so we don’t mess with Dawn default code for featured upgrades so you maybe need to change section names accordingly + in code where you see section name so

First file you need to change is pc-product-variant-picker.liquid we use prefix pc- so the original is product-variant-picker.liquid

{% comment %}
  Renders product variant-picker

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- unless product.has_only_default_variant -%}
  
{%- endunless -%}

The second file is pc-product-variant-options.liquid so original was product-variant-options.liquid

{% 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 'pc-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' -%}   

      {% assign image_exist = '' %}
     {% for variant in product.variants %}
        {% if variant.title == value %}
            {% assign image_exist = variant.image %}
          {% break %}
        {% endif %}
     {% endfor %}   
    
    
    

    
       
    
    
    

  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    
  {%- endif -%}
{%- endfor -%}

The final third file will be pc-swatch-input.liquid so original swatch-input.liquid

{% comment %}
  Renders a swatch input component.
  Accepts:
  - id: {String} unique input id
  - name: {String} input name,
  - value: {ProductOptionValueDrop} input value,
  - product_form_id: {String} id of the form associted with the input
  - checked: {Boolean} default checked status
  - disabled: {Boolean} default disabled status
  - shape: {String} swatch shape. Accepts 'square', defaults to circle.
  - help_text: {String} additional content to render inside the label

  Usage:
   {% render 'swatch-input',
      id: input_id,
      name: input_name,
      value: input_value,
      product_form_id: product_form_id,
      checked: checked,
      disabled: disabled,
      shape: 'square'
      help_text: 'help text'
    %}
{% endcomment %}

And here is some CSS that you can add to some files for styles like base.css

.pc-product fieldset.js.product-form__input.product-form__input--pill {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pc-product fieldset.js.product-form__input.product-form__input--pill .photo-variant {
    text-align: center;
}

.pc-product fieldset.js.product-form__input.product-form__input--pill .photo-variant label {
    text-align: center;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
}
.pc-product fieldset.js.product-form__input.product-form__input--pill  label{
  cursor:pointer;
}
.pc-product fieldset.js.product-form__input.product-form__input--pill .photo-variant .var-image {
    display: flex;
    margin-bottom: 10px;
}
.pc-product fieldset.js.product-form__input.product-form__input--pill .photo-variant span.varient-text {
    color: #101010;
    text-align: center;
    font-size: 12px;
    line-height: normal;
}
.pc-product fieldset.js.product-form__input.product-form__input--pill .photo-variant input:checked + label img {
    border: 1px solid #101010;
}
.pc-product .var-outer input:checked + label span.varient-text {
    color: #fff !important;
}

.pc-product .photo-variant input:checked + label span.varient-text {
    color: #101010 !important;
}

I hope this helps If you have any questions or concerns feel free to reach out!

[zomex]

@stefansweb2020

Many thanks for taking the time

I completely agree with editing files directly, not wise but I like doing it this way and keeping note of changes. That way i don’t need to compare files with new versions. I will simply re-apply my edits to the latest version.

Using pc- does Shopify automatically use that new file? Or do I need to update the reference to use the pc- version?

I know it’s asking a lot but would you mind letting me know the edits to each file. That way I can keep a record of it. Otherwise when updates happen I won’t know which changes to make. or if you know of a file comparison tool I can use that to see the differences.

[zomex]

Many thanks for your offer. I will look to use the code example from stefansweb2020.

[stefansweb2020]

The pc- Is just your store prefix for example our client Is Paloceras and we use the prefix pc- for all files we create, and when the update comes to Shopify in those files we created manually we will need to sync them with updated files If it’s needed. Shopify does not automatically use this files you need to reference them In your Shopify theme

[zomex]

Which file contains the references to the files you edited?

I don’t appear to have the file: he second file swatch-input.liquid

Thanks

[stefansweb2020]

What dawn version are you using?

[zomex]

v12. Happy to update to v13 if that is needed

[stefansweb2020]

Update it to v13 I think you will have that file than