Ecommerce Shopify WordPress Discussion

Color Swatch Display Issues on Shopify Store: Image Integration

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
Just add this CSS to the end of your stylesheet: [data-tooltip="multi"] { background-image: url('//'); }

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.