Hello,
My store runs on the warehouse theme. The white color swatch 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. Is it possible to add some sort of line around the color swatches for the white color swatch to become visible?
@matteo_p
Share your website url so we get more idea about it.
@matteo_p - can you please share this page link where you have swatches?
Hi @matteo_p
Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?
Kind & Best regards,
GemPages Support Team.
Hi @matteo_p
Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?
Kind & Best regards,
GemPages Support Team.
Hi @matteo_p
May I know your URL store and store password (if your store has password protected), then I can see and suggest something for you?
Kind & Best regards,
GemPages Support Team.
Hi @matteo_p ,
Please go to product-item.liquid file and change all code:
{%- comment -%}Color labels used to detect what is a color swatch{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- capture product_labels -%}
{%- unless hide_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label:' -%}
{{ tag | split: '__label:' | last }}
{%- endif -%}
{%- if tag contains '__label1:' -%}
{{ tag | split: '__label1:' | last }}
{%- endif -%}
{%- if tag contains '__label2:' -%}
{{ tag | split: '__label2:' | last }}
{%- endif -%}
{%- endfor -%}
{%- if settings.show_discount and product.price < product.compare_at_price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- endif -%}
{{ 'collection.product.discount_html' | t: savings: savings }}
{%- endif -%}
{%- endunless -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
{{- product_labels -}}
{%- endif -%}
{%- if settings.show_secondary_image and product.media.size > 1 -%}
{%- assign show_secondary_media = true -%}
{%- else -%}
{%- assign show_secondary_media = false -%}
{%- endif -%}
{%- assign filtered_variant = '' -%}
{%- if product.media.size > 0 -%}
{%- assign primary_media = product.featured_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: primary_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = primary_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- if show_secondary_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[1].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- endif -%}
{%- capture price_list -%}
{%- if product.price < product.compare_at_price -%}
{%- if product.price_varies -%}
{%- if settings.currency_code_enabled -%}
{%- capture price_min -%}{{ product.price_min | money_with_currency }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money_with_currency }}{%- endcapture -%}
{%- else -%}
{%- capture price_min -%}{{ product.price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money }}{%- endcapture -%}
{%- endif -%}
{{ 'product.general.sale_price' | t }}
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
{{ 'product.general.regular_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price_min | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price_min | money -}}
{%- endif -%}
{%- else -%}
{{ 'product.general.sale_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
{{ 'product.general.regular_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- product.compare_at_price | money_with_currency -}}
{%- else -%}
{{- product.compare_at_price | money -}}
{%- endif -%}
{%- endif -%}
{%- elsif product.price_varies -%}
{%- if settings.currency_code_enabled -%}
{%- capture price_min -%}{{ product.price_min | money_with_currency }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money_with_currency }}{%- endcapture -%}
{%- else -%}
{%- capture price_min -%}{{ product.price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money }}{%- endcapture -%}
{%- endif -%}
{{ 'product.general.sale_price' | t }}
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
{%- else -%}
{{ 'product.general.sale_price' | t }}
{%- if settings.currency_code_enabled -%}
{{- product.price | money_with_currency -}}
{%- else -%}
{{- product.price | money -}}
{%- endif -%}
{%- endif -%}
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
{{ product.selected_or_first_available_variant.unit_price | money }}
/
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}
{%- capture vendor -%}
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
{%- unless collection_for_vendor.empty? -%}
{{ product.vendor }}
{%- else -%}
{{ product.vendor }}
{%- endunless -%}
{%- endif -%}
{%- endcapture -%}
{%- if settings.product_price_position == 'before_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ vendor }}
{%- endif -%}
{{ product.title }}
{%- if settings.product_price_position == 'before_title' -%}
{{ vendor }}
{%- endif -%}
{%- if settings.show_color_swatch and template != 'blog' -%}
{%- capture color_swatch -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- assign value_to_match = filtered_variant[variant_option] | default: 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 -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if variant_for_value.featured_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: variant_for_value.featured_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = variant_for_value.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
+{{ option.values.size | minus: forloop.index0 }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
{{ color_swatch }}
{%- endif -%}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.show_reviews_badge -%}
{%- render 'product-rating', product: product -%}
{%- endif -%}
{%- if settings.show_inventory_quantity and product.variants.first.inventory_management != blank and product.template_suffix != 'pre-order' -%}
{%- if product.available -%}
{%- assign should_calculate_inventory = true -%}
{%- for variant in product.variants -%}
{%- comment -%}
If we have one variant that is set to "continue" or that do not have any inventory management, then we skip the calculation of inventory as this
means at least one of the variant is always purchasable
{%- endcomment -%}
{%- if variant.inventory_policy == 'continue' or variant.inventory_management == null -%}
{%- assign should_calculate_inventory = false -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if should_calculate_inventory and settings.low_inventory_threshold > 0 -%}
{%- assign all_inventory = 0 -%}
{%- for variant in product.variants -%}
{%- if variant.inventory_management -%}
{%- assign all_inventory = variant.inventory_quantity | at_least: 0 | plus: all_inventory -%}
{%- endif -%}
{%- endfor -%}
{%- if all_inventory <= settings.low_inventory_threshold -%}
{{ 'collection.product.low_stock_with_quantity_count' | t: count: all_inventory }}
{%- else -%}
{{ 'collection.product.in_stock_with_quantity_count' | t: count: all_inventory }}
{%- endif -%}
{%- else -%}
{%- if product.variants.first.inventory_policy == 'continue' and product.variants.first.inventory_quantity <= 0 and product.variants.first.requires_shipping -%}
{{ 'collection.product.oversell_stock' | t }}
{%- else -%}
{{ 'collection.product.in_stock' | t }}
{%- endif -%}
{%- endif -%}
{%- else -%}
{{ 'collection.product.sold_out' | t }}
{%- endif -%}
{%- endif -%}
{%- if request.page_type == 'collection' or request.page_type == 'search' or show_add_to_cart -%}
{%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign product_form_classes = 'product-item__action-list button-stack' -%}
{%- else -%}
{%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
{%- endif -%}
{%- assign form_id = 'product_form_id_' | append: product.id | append: '_' | append: section.id -%}
{%- if product.template_suffix == 'contact' -%}
[
{{- 'product.form.contact_us' | t -}}
](mailto:{{ shop.email }})
{%- else -%}
{%- form 'product', product, id: form_id, class: product_form_classes -%}
{%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
{%- else -%}
{%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
{%- endif -%}
{%- if product.available -%}
{%- if product.variants.size == 1 -%}
{%- else -%}
{{ 'collection.product.choose_options' | t }}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- if section.settings.show_quick_view == 'list_grid' -%}
{%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
{%- else -%}
{%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- endif -%}
Hope it helps!
This worked for the homepage and recently viewed blocks, etc, but it didn’t work for the product pages. Could you please give a solution to the color swatches of the product pages aswell?