How can I make filters more visible on my Warehouse theme site?

Store Design
, , ,
1

Hi!

i have filters setup on my site but they look very hidden. I am using warehouse theme.

THIS IS HOW THEY LOOK NOW:

planetjuniorseo_0-1670007300957.png
planetjuniorseo_0-1670007300957.png173×193 4.37 KB

This is not good for mobile users and especially for any lay man.

i would like to change the style if possible to something like this that is more prominent:

planetjuniorseo_1-1670007358192.png
planetjuniorseo_1-1670007358192.png434×395 13.9 KB

Anything that is more prominent and user friendly will work.

Thanks!

2

Hello @planetjuniorseo

Actually, the filter there isn’t looking good enough.

You can try to make use of other theme as well.. but if you were not able to do it, I can help you out..

3

isn’t there a way to do it by code or any other way except changing the theme?

4

Here is the code which i think need to be changed:

{%- comment -%}

MOBILE FILTERS

{%- endcomment -%}

{%- if has_filters and active_filters_count > 0 -%}

{%- for filter in collection.filters -%} {%- if filter.type == 'list' -%} {%- for active_filter_value in filter.active_values -%} {% render 'icon', icon: 'close' %} {{- active_filter_value.label -}} {%- endfor -%} {%- elsif filter.type == 'price_range' and filter.min_value.value or filter.max_value.value -%} {% render 'icon', icon: 'close' %} {{- filter.min_value.value | default: 0 | money_without_trailing_zeros }} - {{ filter.max_value.value | default: filter.range_max | money_without_trailing_zeros -}} {%- endif -%} {%- endfor -%}

{%- if active_filters_count > 1 -%}
{{ ‘collection.filter.clear_all’ | t }}
{%- endif -%}

{{ ‘collection.general.results_count’ | t: count: collection.products_count }}

{%- endif -%}
5

@planetjuniorseo

Not sure of the coding though..