A merchant using the Warehouse theme is experiencing visibility issues with white color swatches on product pages due to the site’s white background. The white swatch becomes nearly invisible, even after attempting to darken it slightly.
Proposed Solution:
The merchant wants to add a border or outline around color swatches to make the white option more distinguishable.
Community Response:
Current Status:
The discussion appears to be in progress, with a technical solution offered but no confirmation yet on whether it resolved the visibility issue. The conversation involves sharing Liquid template code for the product variant selector component.
Hello,
My store runs on the warehouse theme. The white color swatch of the product page is invisible because the main background color of my site is white, so I made it a bit darker white but it’s still hard to see. I would like to add some sort of line around the color swatches of the product pages for the white color swatch to become visible.
@matteo_p - can you please share this swatch page link?
Hi @matteo_p ,
Please send me the code of product-variant-selector.liquid file, I will check it.
{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- assign color_label = ‘color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva’ | split: ‘,’ -%}
{%- unless product.has_only_default_variant -%}
{%- assign option_selector_type = ‘select’ -%}
{%- if block.settings.color_mode != ‘block’ and block.settings.color_mode != ‘dropdown’ and color_label contains downcase_option -%}
{%- comment -%}NOTE: even if the merchant is using the mode to display variant images, if ALL variant do not have an associated image, we fallback to color{%- endcomment -%}
{%- assign has_image_attached_to_all_variants = true -%}
{%- for variant in product.variants -%}
{%- unless variant.image -%}
{%- assign has_image_attached_to_all_variants = false -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- if block.settings.color_mode == ‘color’ or has_image_attached_to_all_variants == false -%}
{%- assign option_selector_type = ‘color’ -%}
{%- else -%}
{%- assign option_selector_type = ‘variant’ -%}
{%- endif -%}
{%- else -%}
{%- if color_label contains downcase_option -%}
{%- if block.settings.color_mode == ‘block’ -%}
{%- assign option_selector_type = ‘block’ -%}
{%- endif -%}
{%- elsif block.settings.selector_mode == ‘block’ -%}
{%- assign option_selector_type = ‘block’ -%}
{%- endif -%}
{%- endif -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- when ‘variant’ -%}
{{ option.name }}: {{ option.selected_value }}
{%- for value in option.values -%}
{%- capture variant_swatch_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[option_name] == value and variant.image -%}
{% render ‘icon’, icon: ‘cross-sold-out’ %}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- when ‘block’ -%}
{{ option.name }}: {{ option.selected_value }}
{%- when ‘select’ -%}
{{ option.name }}: {{ option.selected_value }}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- selected_variant.compare_at_price | money -}}
{%- endif -%}
{%- else -%}
{{ ‘product.general.sale_price’ | t }}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
{%- endif -%}
<span class=“unit-price-measurement__reference-value” {%- if selected_variant.unit_price_measurement.reference_value == 1 -%}style=“display: none”{% endif %}>
{{- selected_variant.unit_price_measurement.reference_value -}}
{{ selected_variant.unit_price_measurement.reference_unit }}
{{- form | payment_terms -}}
{%- if block.settings.show_taxes_included -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
{%- if cart.taxes_included -%} {{ 'product.general.include_taxes' | t }} {%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ ‘product.general.shipping_policy_html’ | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- if block.settings.show_inventory_quantity and product.template_suffix != ‘pre-order’ -%}
{%- for tag in product.tags -%}
{%- if tag contains ‘__stock:’ -%}
{%- assign stock_countdown_max = tag | split: ‘__stock:’ | last | times: 1.0 -%}
{%- assign stock_countdown_progress = selected_variant.inventory_quantity | divided_by: stock_countdown_max | times: 100.0 | at_least: 0 | at_most: 100 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if product.template_suffix != ‘contact’ -%}
{%- if block.settings.show_quantity_selector -%}
Hi @matteo_p ,
Please change all code:
{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- capture option_name -%}{{ section.id }}-{{ product.id }}-{{ forloop.index }}{%- endcapture -%}
{%- assign option_selector_type = 'select' -%}
{%- if block.settings.color_mode != 'block' and block.settings.color_mode != 'dropdown' and color_label contains downcase_option -%}
{%- comment -%}NOTE: even if the merchant is using the mode to display variant images, if ALL variant do not have an associated image, we fallback to color{%- endcomment -%}
{%- assign has_image_attached_to_all_variants = true -%}
{%- for variant in product.variants -%}
{%- unless variant.image -%}
{%- assign has_image_attached_to_all_variants = false -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- if block.settings.color_mode == 'color' or has_image_attached_to_all_variants == false -%}
{%- assign option_selector_type = 'color' -%}
{%- else -%}
{%- assign option_selector_type = 'variant' -%}
{%- endif -%}
{%- else -%}
{%- if color_label contains downcase_option -%}
{%- if block.settings.color_mode == 'block' -%}
{%- assign option_selector_type = 'block' -%}
{%- endif -%}
{%- elsif block.settings.selector_mode == 'block' -%}
{%- assign option_selector_type = 'block' -%}
{%- endif -%}
{%- endif -%}
{%- case option_selector_type -%}
{%- when 'color' -%}
{{ option.name }}: {{ option.selected_value }}
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '
' -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- endfor -%}
{%- when 'variant' -%}
{{ option.name }}: {{ option.selected_value }}
{%- capture option_name -%}option{{ option.position }}{%- endcapture -%}
{%- for value in option.values -%}
{%- capture variant_swatch_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[option_name] == value and variant.image -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- when 'block' -%}
{{ option.name }}: {{ option.selected_value }}
{%- for value in option.values -%}
{%- capture block_swatch_id -%}{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- endfor -%}
{%- when 'select' -%}
{%- render 'icon', icon: 'arrow-bottom' -%}
{%- endcase -%}
{%- endfor -%}
{%- else -%}
{%- endunless -%}
{{ 'product.form.price' | t }}:
{%- if selected_variant.compare_at_price > selected_variant.price -%}
{{ 'product.general.sale_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
{{ 'product.general.regular_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- selected_variant.compare_at_price | money -}}
{%- endif -%}
{%- else -%}
{{ 'product.general.sale_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
{%- endif -%}
{{ selected_variant.unit_price | money }}
/
{{- selected_variant.unit_price_measurement.reference_value -}}
{{ selected_variant.unit_price_measurement.reference_unit }}
{{- form | payment_terms -}}
{%- if block.settings.show_taxes_included -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
{%- if cart.taxes_included -%}
{{ 'product.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'product.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if block.settings.show_inventory_quantity and product.template_suffix != 'pre-order' -%}
{{ 'product.form.inventory' | t }}:
{%- if selected_variant.inventory_management -%}
{%- if selected_variant.available -%}
{%- if selected_variant.inventory_quantity <= 0 and selected_variant.requires_shipping -%}
{%- if selected_variant.incoming -%}
{%- capture next_incoming_date -%}{{ selected_variant.next_incoming_date | date: format: 'date' }}{%- endcapture -%}
{{ 'product.form.incoming_stock' | t: next_incoming_date: next_incoming_date }}
{%- else -%}
{{ 'product.form.oversell_stock' | t }}
{%- endif -%}
{%- elsif block.settings.low_inventory_threshold > 0 -%}
{%- if selected_variant.inventory_quantity <= block.settings.low_inventory_threshold -%}
{{ 'product.form.low_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}
{%- else -%}
{{ 'product.form.in_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}
{%- endif -%}
{%- else -%}
{{ 'product.form.in_stock' | t }}
{%- endif -%}
{%- else -%}
{%- if selected_variant.incoming -%}
{%- capture next_incoming_date -%}{{ selected_variant.next_incoming_date | date: format: 'date' }}{%- endcapture -%}
{{ 'product.form.incoming_stock' | t: next_incoming_date: next_incoming_date }}
{%- else -%}
{{ 'product.form.sold_out' | t }}
{%- endif -%}
{%- endif -%}
{%- else -%}
{{ 'product.form.in_stock' | t }}
{%- endif -%}
{%- for tag in product.tags -%}
{%- if tag contains '__stock:' -%}
{%- assign stock_countdown_max = tag | split: '__stock:' | last | times: 1.0 -%}
{%- assign stock_countdown_progress = selected_variant.inventory_quantity | divided_by: stock_countdown_max | times: 100.0 | at_least: 0 | at_most: 100 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if product.template_suffix != 'contact' -%}
{%- if block.settings.show_quantity_selector -%}
{%- else -%}
{%- endif -%}
{%- endif -%}