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 -%}