Hello,
I added color filters to the collection pages of my store and the white swatch is invisible.
1 Like
Hello,
Actually, it looks white, but it is not visible because the background color of your website is white. You can solve this problem by adding borders to color filters.
If the problem is solved, please click the “Accept as Solution” button 
Hi @matteo_p
You can add gray border to the color filter, so it look clear on white background.
Hi @matteo_p ,
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
- Go to Online Store->Theme->Edit code
- Asset-> base.css
- Paste the below code at the bottom of the file.
.color-swatch span[style="background-color: #ffffff"] {
border: solid 1px black !important;
}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
Thank you, it worked, but I would like to change the color of the border to #d4d6d8
I tried changing the hex code myself but it didn’t work.
Hi @matteo_p ,
Please change all code main-collection.liquid file:
{%- comment -%}We start by creating a lot of useful variables !{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- assign items_per_page = cart.attributes.collection_products_per_page | default: section.settings.default_products_per_page -%}
{%- assign quick_links_menu = section.settings.quick_links -%}
{%- if quick_links_menu.links.size > 0 or section.settings.show_filters and collection.filters != empty -%}
{%- assign has_filters = true -%}
{%- else -%}
{%- assign has_filters = false -%}
{%- endif -%}
{%- if has_filters -%}
{%- capture grid_classes -%}1/3--tablet-and-up 1/{{ section.settings.products_per_row }}--desk{%- endcapture -%}
{%- else -%}
{%- capture grid_classes -%}1/3--tablet 1/{{ section.settings.products_per_row }}--lap-and-up{%- endcapture -%}
{%- endif -%}
{%- assign view_mode = cart.attributes.collection_layout | default: section.settings.default_view_layout -%}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- assign active_filters_count = 0 -%}
{%- for filter in collection.filters -%}
{%- if filter.type == 'list' -%}
{%- assign active_filters_count = active_filters_count | plus: filter.active_values.size -%}
{%- elsif filter.type == 'price_range' and filter.min_value.value or filter.max_value.value -%}
{%- assign active_filters_count = active_filters_count | plus: 1 -%}
{%- elsif filter.type == 'boolean' and filter.true_value.active %}
{%- assign active_filters_count = active_filters_count | plus: 1 -%}
{%- endif -%}
{%- endfor -%}
{%- capture section_settings -%}
{
"currentSortBy": {{ sort_by | json }},
"defaultLayout": {{ section.settings.default_view_layout | json }},
"defaultProductsPerPage": {{ section.settings.default_products_per_page | json }},
"gridClasses": {{ grid_classes | json }}
}
{%- endcapture -%}
{% schema %}
{
"name": "Collection",
"settings": [
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": true
},
{
"type": "checkbox",
"id": "collapse_collection_description",
"label": "Collapse long description",
"default": false
},
{
"type": "select",
"id": "collection_image_size",
"label": "Collection image size",
"options": [
{
"value": "preserve_ratio",
"label": "Original image ratio"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "small"
},
{
"type": "select",
"id": "products_per_row",
"label": "Products per row (desktop)",
"options": [
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
}
],
"default": "4"
},
{
"type": "range",
"id": "default_products_per_page",
"label": "Default products per page",
"min": 24,
"max": 48,
"step": 12,
"default": 24
},
{
"type": "select",
"id": "default_view_layout",
"label": "Default view layout",
"options": [
{
"value": "grid",
"label": "Grid"
},
{
"value": "list",
"label": "List"
}
],
"default": "grid"
},
{
"type": "select",
"id": "show_quick_buy",
"label": "Show quick buy on...",
"options": [
{
"value": "list",
"label": "List view"
},
{
"value": "list_grid",
"label": "List and grid views"
}
],
"default": "list"
},
{
"type": "select",
"id": "show_quick_view",
"label": "Show quick view on...",
"options": [
{
"value": "list",
"label": "List view"
},
{
"value": "list_grid",
"label": "List and grid views"
}
],
"default": "list"
},
{
"type": "header",
"content": "Sidebar"
},
{
"type": "link_list",
"id": "quick_links",
"label": "Quick links"
},
{
"type": "checkbox",
"id": "quick_links_show_products_count",
"label": "Show products count",
"info": "Only for collection links and filters",
"default": true
},
{
"type": "header",
"content": "Filtering"
},
{
"type": "checkbox",
"id": "show_filters",
"label": "Show filters",
"default": true
},
{
"type": "checkbox",
"id": "show_filter_color_swatch",
"label": "Show filter color swatch",
"info": "Requires a filter named \"Color\".",
"default": true
},
{
"type": "select",
"id": "open_group_filters_mode",
"label": "Filter opening mode (desktop)",
"options": [
{
"value": "all_closed",
"label": "All closed"
},
{
"value": "all_open",
"label": "All open"
},
{
"value": "first_open",
"label": "First open"
}
],
"default": "all_closed"
}
]
}
{% endschema %}