I'm trying to build a Shopify theme from scratch and I am new to this. I am already filtering collections using the storefront filtering. It works fine, I want to customize the collection filters to display colors as color swatches instead of text labels though. Right now, the filter is rendering the colors as text, but I want the checkboxes to be hidden and the colors to be shown as clickable swatches.. I get my code looking at the Shopify documentation at https://shopify.dev/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering#the-filter-display I tried to add a when conditional for color as: {%- when 'color' -%} and add a inline style to set the background from the filter color label as <span class="color-swatch" style="background-color: {{ filter_value.label | downcase }};"></span> it does not change anything on the html that is rendered. My code at the moment looks like: <form class="filters-form-container"> <div class="active-filters"> <a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="clear-all-filters">Clear all</a> {%- for filter in collection.filters -%} <details class="filter-group"> <summary> <div> <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%} <span>({{ filter.active_values.size }})</span> {%- endif -%} </div> </summary> {%- case filter.type -%} {%- when 'price_range' -%} <div class="price-range-slider"> <div class="price-inputs"> <div class="price-input"> <span>{{ cart.currency.symbol }}</span> <input name="{{ filter.min_value.param_name }}" id="Filter-{{ filter.min_value.param_name }}" class="min-price-input" {% if filter.min_value.value -%} value="{{ filter.min_value.value | money_without_currency | replace: ',', '' | divided_by: 100 }}" {%- endif %} type="number" placeholder="0" min="0" max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" > </div> <div class="price-input"> <span>{{ cart.currency.symbol }}</span> <input name="{{ filter.max_value.param_name }}" id="Filter-{{ filter.max_value.param_name }}" class="max-price-input" {% if filter.max_value.value -%} value="{{ filter.max_value.value | money_without_currency | replace: ',', '' | divided_by: 100 }}" {%- endif %} type="number" placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" min="0" max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" > </div> </div> <div class="range-slider"> <input type="range" class="min-price" value="{{ filter.min_value.value | default: 0 | money_without_currency | replace: ',', '' | divided_by: 100 }}" min="0" max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" > <input type="range" class="max-price" value="{{ filter.max_value.value | default: filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" min="0" max="{{ filter.range_max | money_without_currency | replace: ',', '' | divided_by: 100 }}" > </div> <button type="submit" class="filter-submit">Apply</button> </div> {%- when 'boolean' -%} <div class="filter-header"> <p>{{ filter.active_values.size }} selected</p> {%- if filter.active_values.size > 0 -%} <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p> {%- endif -%} </div> <ul class="filter-group"> <li> <input type="checkbox" name="{{ filter.param_name }}" value="{{ filter.true_value.value }}" id="Filter-{{ filter.param_name }}" {% if filter.true_value.active -%}checked{%- endif %} {% if filter.true_value.count == 0 and filter.true_value.active == false -%}disabled{%- endif %}> <label for="Filter-{{ filter.param_name }}">{{ filter.true_value.label }}</label> </li> <li> <input type="checkbox" name="{{ filter.param_name }}" value="{{ filter.false_value.value }}" id="Filter-{{ filter.param_name }}-false" {% if filter.false_value.active -%}checked{%- endif %} {% if filter.false_value.count == 0 and filter.false_value.active == false -%}disabled{%- endif %}> <label for="Filter-{{ filter.param_name }}-false">{{ filter.false_value.label }}</label> </li> </ul> <button type="submit" class="filter-submit">Apply</button> {%- when 'color' -%} <div class="filter-header"> <p>{{ filter.active_values.size }} selected</p> {%- if filter.active_values.size > 0 -%} <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p> {%- endif -%} </div> <ul class="filter-group teste-cores" syle="background: red;"> {%- for filter_value in filter.values -%} <li> <input type="checkbox" name="{{ filter_value.param_name }}" value="{{ filter_value.value }}" id="Filter-{{ filter.param_name }}-{{ forloop.index }}" {% if filter_value.active -%}checked{%- endif %}> <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}"> <span class="color-swatch" style="background-color: {{ filter_value.label | downcase }};"></span> {{ filter_value.label }} </label> </li> {%- endfor -%} </ul> <button type="submit" class="filter-submit">Apply</button> {%- when 'list' -%} <div class="filter-header"> <p>{{ filter.active_values.size }} selected</p> {%- if filter.active_values.size > 0 -%} <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p> {%- endif -%} </div> <ul class="filter-group"> {%- for filter_value in filter.values -%} <li> <input type="checkbox" name="{{ filter_value.param_name }}" value="{{ filter_value.value }}" id="Filter-{{ filter.param_name }}-{{ forloop.index }}" {% if filter_value.active -%}checked{%- endif %} {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}> <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}"> <span class="visual-display"> </span> {{ filter_value.label }} </label> </li> {%- endfor -%} </ul> <button type="submit" class="filter-submit">Apply</button> {%- else -%} <div class="filter-header"> <p>{{ filter.active_values.size }} selected</p> {%- if filter.active_values.size > 0 -%} <p><a href="{{ filter.url_to_remove }}" class="reset-link">Reset</a></p> {%- endif -%} </div> {%- endcase -%} </details> {%- endfor -%} </div> </form> I feel that it has been generated automatically by Shopify. I want to learn how to customize the Colors, so I can change the style for Sizes as well. I woudl like to change the style to something near to: https://themes.shopify.com/themes/king/styles/castle/preview?surface_detail=new-themes&surface_inter_position=1&surface_intra_position=3&surface_type=all