Color Swatch Display Issues on Shopify Store: Image Integration

Question

I have a color metafield on my shopify store, where inserting a specific color should reflect on both the website and phone devices simultaneously. Each color swatch is associated with an image tile corresponding to the title inserted in the color metafield. The issue I'm facing is that a multi-color image named 'multi' displays correctly on the website but appears blank on the phone. I'm having trouble identifying what might be causing this discrepancy. I've included two images for clarity and a relevant piece of code (shown below). Any assistance in resolving this matter is greatly appreciated. Thank you.

{%- comment -%}
  Extract a style from the color swatch config. You must passed two parameters to this snippet:

  - color_swatch_config: extracted from the theme settings
  - value: the actual color
{%- endcomment -%}

{%- assign color_value_downcase = value | downcase -%}
{%- assign color_swatch_style = 'background-color: ' | append: color_value_downcase -%}

{%- for color_swatch_item in color_swatch_config -%}
  {%- assign color_swatch_parts = color_swatch_item | split: ':' -%}
  {%- assign color_swatch_name = color_swatch_parts.first | downcase | strip -%}

  {%- if color_value_downcase == color_swatch_name -%}
    {%- assign color_swatch_value = color_swatch_parts.last | strip -%}

    {%- if color_swatch_value contains '#' -%}
      {%- assign color_swatch_style = 'background-color: ' | append: color_swatch_value -%}
    {%- elsif images[color_swatch_value] != blank -%}
      {%- assign color_swatch_image = images[color_swatch_value] | img_url: '72x72' -%}
      {%- assign color_swatch_style = 'background-image: url(' | append: color_swatch_image | append: ')' -%}
    {%- endif -%}

    {%- break -%}
  {%- endif -%}
{%- endfor -%}

{{- color_swatch_style -}}

screenshot of mobile showing swatch color still blank

screenshot of pc show that multi color image display correctly

Answer 1

I've successfully resolved my problem by following the instructions provided in this link: https://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch

All I did was add my image link as follows: Multi:multi.png in the configuration section of the color swatch, just like it's demonstrated in the linked resource.

Thank you for any assistance offered.

I hope this solution proves helpful to others as well.