Hi there!
Horizon Theme
I’ve spend approximately 5 hours now trying to make my desktop filters act like they do on phone.
On desktop they are being shown as “size”, “color” & “Product type” on the collectionpages. On phone its just the usual filter hamburger-button.
I want the hamburger button and filter text on desktop as well.
If we squeeze the desktop website window it turns into the hamburger-button.
See attached images for explanation
I’ve added the Filters.liquid code here (It from blocks).
I’ve clipped some of the code from the bottom to be able to upload the question:
{%- doc -%}
Renders the facet filtering component
@param {object} results - The search results object
@param {number} results_size - The number of products in the search results
@param {object} [filters] - The filters object
{%- enddoc -%}
<scr<script
src=“{{ ‘scrolling.js’ | asset_url }}”
type=“module”
fetchpriority=“low”
- liquid
assign block_settings = block.settings
assign products_count = results_size
assign sort_by = results.sort_by | default: results.default_sort_by
assign filters = filters | default: results.filters
assign total_active_values = 0
# Calculate facets margin style
capture facets_margin_style
echo '–facets-margin: 0px ’
if block_settings.filter_style == ‘vertical’
echo block_settings.facets_margin_right | append: ‘px’ | append: ’ 0px’
else
echo ’ 0px ’ | append: block_settings.facets_margin_bottom | append: ‘px’
endif
echo ’ 0px;’
endcapture
for filter in filters
case filter.type
when ‘price_range’
if filter.min_value.value != null or filter.max_value.value != null
assign total_active_values = total_active_values | plus: 1
endif
when ‘boolean’
if filter.active_values[0].value
assign total_active_values = total_active_values | plus: 1
endif
else
assign active_value_count = filter.active_values | size
assign total_active_values = total_active_values | plus: active_value_count
endcase
endfor
if results.url
assign results_url = results.url
else
assign terms = results.terms | escape
assign results_url = ‘?q=’ | append: terms | append: ‘&options%5Bprefix%5D=last&sort_by=’ | append: sort_by
endif
assign is_active = false
assign should_show_pane = true
if block_settings.filter_style == ‘vertical’
assign should_show_pane = block_settings.enable_filtering
endif
assign should_use_select_on_mobile = true
if block_settings.enable_filtering == false and block_settings.enable_sorting
assign should_use_select_on_mobile = false
endif
assign should_show_vertical_clear_all = true
if block_settings.filter_style == ‘vertical’
assign should_show_vertical_clear_all = false
endif
-%}
{% if block_settings.enable_filtering or block_settings.enable_sorting or block_settings.enable_grid_density %}
{% if block_settings.filter_style == ‘vertical’ %}
{% # These elements are always rendered in the horizontal bar that’s why we apply the .facets–horizontal class %}
<divclass=“facets facets–horizontal facets-controls-wrapper spacing-style”
style=“{% render ‘spacing-style’, settings: block_settings %}{% if block_settings.text_label_case == ‘uppercase’ %} --facet-label-transform: uppercase;{% endif %}”
>
{% if block_settings.enable_filtering %}
{{ ‘content.filters’ | t }}
{% endif %}
<divclass=“products-count-wrapper”
data-testid=“products-count”
>
{% if products_count > 25000 %}
{{- ‘content.item_count_cutoff’ | t: count: 25000 -}}
{% else %}
{{- ‘content.item_count’ | t: count: products_count -}}
{% endif %}
{% if block_settings.enable_sorting %}
{% render ‘sorting’,
results: results,
sort_by: sort_by,
filter_style: block_settings.filter_style,
suffix: ‘desktop’,
sort_position: ‘desktop’,
should_use_select_on_mobile: false,
section_id: section.id
%}
{% endif %}
{% if block_settings.enable_grid_density %}
{% render ‘grid-density-controls’, viewport: ‘desktop’ %}
{% endif %}
{% endif %}
<divclass="
{% if should_show_pane == false %}
hidden
{% endif %}
facets-block-wrapper
facets-block-wrapper–{{ block_settings.filter_style }}
{%- if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}
{%- if block_settings.filter_width == ‘full-width’ %} facets-block-wrapper–full-width{% endif %}
"
style="
–grid-column–desktop:
{%- if block_settings.filter_style == ‘horizontal’ -%}
var(–{{ block_settings.filter_width }})
{%- else -%}
2 / var(–facets-vertical-col-width)
{%- endif -%};
{{ facets_margin_style }}
–facets-inner-padding-block: {{ block_settings.padding-block-start }}px {{ block_settings.padding-block-end }}px;
–facets-inner-padding-inline: var(–padding-lg);
"
{{ block.shopify_attributes }}
>
<divclass=“facets facets–{{ block_settings.filter_style }} spacing-style”
style=“{% render ‘spacing-style’, settings: block_settings %}{% if block_settings.text_label_case == ‘uppercase’ %} --facet-label-transform: uppercase;{% endif %}”
aria-label=“{{ ‘accessibility.filters’ | t }}”
>
<facets-form-component
class=“facets__form-wrapper”
section-id=“{{ section.id }}”
form-style=“{{ block_settings.filter_style }}”
>
<formaction=“{{ results_url }}”
id=“FacetFiltersForm–{{ section.id }}-desktop”
class=“facets__form”
ref=“facetsForm”
>
{% if should_show_pane %}
{% render ‘filter-remove-buttons’,
filters: filters,
results_url: results_url,
show_filter_label: block_settings.show_filter_label,
should_show_clear_all: true
%}
{% if block_settings.enable_filtering %}
{% assign total_active_values = 0 %}
{% capture rendered_filters %}
{%- for filter in filters -%}
{% case filter.type %}
{% when ‘price_range’ %}
{%- liquid
if filter.min_value.value != null or filter.max_value.value != null
assign total_active_values = total_active_values | plus: 1
assign is_active = true
endif
if block_settings.filter_style != ‘vertical’
assign should_render_clear = true
else
assign should_render_clear = false
endif
render ‘price-filter’, filter: filter, filter_style: block_settings.filter_style, should_render_clear: should_render_clear
-%}
{% else %}
{% liquid
if filter.active_values.size > 0
assign is_active = true
endif
assign active_value_count = filter.active_values | size
assign total_active_values = total_active_values | plus: active_value_count
if block_settings.filter_style != ‘vertical’
assign should_render_clear = true
else
assign should_render_clear = false
endif
render ‘list-filter’, filter: filter, filter_style: block_settings.filter_style, active_value_count: active_value_count, should_render_clear: should_render_clear, show_swatch_label: block_settings.show_swatch_label, sectionId: section.id
%}
{% endcase %}
{%- endfor -%}
{% endcapture %}
{% if block_settings.filter_style == ‘horizontal’ %}
{% liquid
assign more_attributes = ‘on:click=“#filters-drawer/showDialog”’
if block_settings.text_label_case == ‘uppercase’
assign more_attributes = more_attributes | append: ’ style=“–text-transform: uppercase;”’
endif
%}
{% render ‘overflow-list’,
class: ‘facets__overflow-list’,
children: rendered_filters,
more-attributes: more_attributes,
minimum-items: 2,
data-testid: ‘horizontal-filters-overflow-list’
%}
{% else %}
{{ rendered_filters }}
{% endif %}
{% render ‘facets-actions’,
results_url: results_url,
is_active: is_active,
products_count: products_count,
should_show_clear_all: should_show_vertical_clear_all,
clear_all_button_style: ‘button-unstyled’
%}
{% endif %}
{% if block_settings.filter_style == ‘horizontal’ %}
<divclass=“products-count-wrapper”
data-testid=“products-count”
>
{% if products_count > 25000 %}
{{- ‘content.item_count_cutoff’ | t: count: 25000 -}}
{% else %}
{{- ‘content.item_count’ | t: count: products_count -}}
{% endif %}
{% if block_settings.enable_sorting %}
{% render ‘sorting’,
results: results,
sort_by: sort_by,
filter_style: block_settings.filter_style,
suffix: ‘desktop’,
sort_position: ‘desktop’,
should_use_select_on_mobile: false,
section_id: section.id
%}
{% endif %}
{% if block_settings.enable_grid_density %}
{% render ‘grid-density-controls’, viewport: ‘desktop’ %}
{% endif %}
{% endif %}
{% endif %}
<divclass=“facets-toggle{% if block_settings.enable_filtering == false %} facets-toggle–no-filters{% endif %}{% if block_settings.filter_style == ‘horizontal’ and block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}”
style="
–facets-inner-padding-block: {{ block_settings.padding-block-start }}px {{ block_settings.padding-block-end }}px; --facets-inner-padding-inline: var(–padding-lg);
{{ facets_margin_style }}
"
>
{% if block_settings.enable_filtering %}
<button
class=“button facets-toggle__button button-unstyled button-unstyled–with-icon”
on:click=“#filters-drawer/showDialog”
type=“button”
>
{{ ‘icon-filter.svg’ | inline_asset_content }}
{{ ‘actions.show_filters’ | t }}
{% if total_active_values > 0 %}
<divid=“filter-count-bubble-toggle”
class=“filter-count-bubble”
aria-label=“{{ ‘accessibility.filter_count’ | t: count: total_active_values }}”
>
<span
ref=“cartBubbleText”
class=“filter-count-bubble__text”
aria-hidden=“true”
>
{{ total_active_values }}
{% endif %}
{% endif %}
{% liquid
assign child_count = 0
if block_settings.enable_filtering == false and block_settings.enable_sorting
assign child_count = child_count | plus: 1
endif
if block_settings.enable_grid_density
assign child_count = child_count | plus: 1
endif
%}
{% if block_settings.enable_filtering == false and block_settings.enable_sorting %}
<facets-form-component
section-id=“{{ section.id }}”
id=“FacetFiltersForm–{{ section.id }}-mobile-sorting-only”
>
<formaction=“{{ results_url }}”
id=“FacetFiltersForm–{{ section.id }}-mobile-sorting-only”
ref=“facetsForm”
>
{% render ‘sorting’,
results: results,
sort_by: sort_by,
filter_style: block_settings.filter_style,
sort_position: ‘mobile’,
should_use_select_on_mobile: should_use_select_on_mobile,
section_id: section.id
%}
{% endif %}
{% if block_settings.enable_grid_density %}
{% render ‘grid-density-controls’, viewport: ‘mobile’ %}
{% endif %}
{% else %}
{% endif %}
{% if block_settings.enable_filtering %}
<dialog-component
id=“filters-drawer”
class=“facets-block-wrapper facets-block-wrapper–vertical facets-block-wrapper–drawer color-{{ settings.drawer_color_scheme }}”
>
<dialogref=“dialog”
class=“facets facets–drawer dialog-modal drawer dialog-drawer dialog-drawer–right spacing-style”
style=“{% render ‘spacing-style’, settings: block_settings %}”
scroll-lock
aria-labelledby=“filters-drawer-heading”
>
{% assign form_component = ‘FacetFiltersFormComponent–’ | append: section.id | append: ‘-overflow’ %}
<facets-form-component
class=“facets__form-wrapper facets-drawer__form-wrapper”
section-id=“{{ section.id }}”
id=“{{ form_component }}”
>
<formaction=“{{ results_url }}”
id=“FacetFiltersForm–{{ section.id }}-overflow”
class=“facets__form”
ref=“facetsForm”
>
<divclass=“facets__title-wrapper”
style=“–color-shadow: rgb(var(–color-foreground-rgb) / var(–opacity-10-25));”
>
<h2id=“filters-drawer-heading”
class=“facets-drawer__title h3”
>
{{ ‘blocks.filter’ | t }}
{% if total_active_values > 0 %}
<span
class=“bubble facets__bubble”
aria-hidden=“true”
>
{{ total_active_values }}
{{ ‘accessibility.filter_count’ | t: count: total_active_values }}
{% endif %}
<button
class=“button facets-drawer__close button-unstyled close-button”
on:click=“dialog-component/closeDialog”
type=“button”
>
<span
class=“svg-wrapper svg-wrapper–small”
title=“{{ ‘actions.close’ | t }}”
>
{{ ‘icon-close.svg’ | inline_asset_content }}
<scroll-hint
class=“facets-drawer__filters”
>
{% if block_settings.enable_filtering %}
{% render ‘filter-remove-buttons’,
filters: filters,
results_url: results_url,
show_filter_label: block_settings.show_filter_label,
should_show_clear_all: false
%}
{% assign total_active_values = 0 %}
{% assign is_active = false %}
{%- for filter in filters -%}
{% case filter.type %}
{% when ‘price_range’ %}
{%- liquid
if filter.min_value.value != null or filter.max_value.value != null
assign total_active_values = total_active_values | plus: 1
assign is_active = true
endif
render ‘price-filter’, filter: filter, filter_style: ‘vertical’, should_render_clear: false
-%}
{% else %}
{% liquid
if filter.active_values.size > 0
assign is_active = true
endif
assign active_value_count = filter.active_values | size
assign total_active_values = total_active_values | plus: active_value_count
render ‘list-filter’, filter: filter, filter_style: ‘vertical’, active_value_count: active_value_count, should_render_clear: false, in_drawer: true, sectionId: section.id
%}
{% endcase %}
{%- endfor -%}
{% endif %}
{% if block_settings.enable_sorting %}
{% render ‘sorting’,
results: results,
sort_by: sort_by,
filter_style: block_settings.filter_style,
suffix: ‘overflow’,
should_use_select_on_mobile: should_use_select_on_mobile,
section_id: section.id
%}
{% endif %}
{% render ‘facets-actions’,
results_url: results_url,
is_active: is_active,
products_count: products_count,
form_component: form_component,
should_show_clear_all: true,
clear_all_button_style: ‘button-secondary’
%}
{% endif %}
{% stylesheet %}
.collection-wrapper {
@media screen and (min-width: 750px) {
–facets-vertical-col-width: 6;
}
@media screen and (min-width: 990px) {
–facets-vertical-col-width: 5;
}
}
.facets-block-wrapper {
@media screen and (min-width: 750px) {
margin: var(–facets-margin);
grid-column: var(–grid-column–desktop);
}
}
.facets-block-wrapper–vertical {
@media screen and (min-width: 750px) {
grid-column: var(–grid-column–desktop);
}
}
.facets-toggle {
–icon-offset: -3px;
display: flex;
justify-content: space-between;
align-items: center;
height: var(–minimum-touch-target);
margin: var(–facets-margin);
padding-block: var(–facets-inner-padding-block);
padding-inline: var(–facets-inner-padding-inline);
@media screen and (min-width: 750px) {
display: none;
}
}
.facets-toggle__wrapper {
margin-left: var(–icon-offset);
}
.facets-toggle__button {
box-shadow: none;
@media screen and (min-width: 750px) {
display: none;
}
}
.filter-count-bubble {
position: relative;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
line-height: normal;
place-content: center;
color: var(–color-foreground);
border: var(–icon-stroke-width) solid var(–color-background);
}
.facets-mobile__title-wrapper .h3 {
margin-block-end: 0;
display: inline-flex;
align-items: center;
gap: var(–gap-xs);
}
.facets-mobile__title-wrapper .filter-count-bubble {
width: 22px;
height: 22px;
}
.facets-mobile__title-wrapper .filter-count-bubble__text {
font-size: var(–font-size–xs);
}
.filter-count-bubble__background {
position: absolute;
inset: 0;
background-color: rgb(var(–color-foreground-rgb) / var(–opacity-10-25));
border-radius: var(–style-border-radius-50);
}
.filter-count-bubble__text {
font-size: 11px;
font-weight: var(–font-paragraph–weight);
aspect-ratio: 1 / 1;
}
.facets-toggle–no-filters {
@media screen and (max-width: 749px) {
/* stylelint-disable-next-line declaration-no-important */
justify-content: unset !important;
& > .facets-mobile-wrapper {
width: 100%;
}
}
}
.facets-block-wrapper–vertical + .facets-toggle {
@media screen and (max-width: 749px) {
margin: 0;
}
}
.facets-mobile-wrapper {
display: flex;
align-items: center;
gap: var(–gap-sm);
justify-content: flex-end;
}
.facets-mobile-wrapper–multiple-controls {
justify-content: space-between;
}
dialog-component.facets-block-wrapper:not(:has(.facets–drawer[open])) {
@media screen and (min-width: 750px) {
display: none;
}
}
.variant-option__swatch-wrapper {
position: relative;
overflow: visible;
border-radius: var(–options-border-radius);
}
.variant-option–swatches-disabled .variant-option__swatch-wrapper {
overflow: hidden;
}
.facets {
–facets-form-horizontal-gap: 20px;
–facets-horizontal-max-input-wrapper-height: 230px;
–facets-upper-z-index: var(–layer-raised);
–facets-open-z-index: var(–layer-heightened);
–facets-sticky-z-index: var(–layer-sticky);
–facets-panel-min-width: 120px;
–facets-panel-height: 300px;
–facets-grid-panel-width: 300px;
–facets-clear-padding: var(–padding-md);
–facets-clear-shadow: 0 -4px 14px 0 rgb(var(–color-foreground-rgb) / var(–facets-low-opacity));
–facets-input-label-color: rgb(var(–color-input-text-rgb) / var(–opacity-60));
–facets-clear-all-min-width: 120px;
–facets-see-results-min-width: 55%;
–facets-mobile-gap: 22px;
–facets-low-opacity: 10%;
–facets-hover-opacity: 75%;
top: auto;
bottom: 0;
height: var(–drawer-height);
max-height: var(–drawer-height);
width: var(–drawer-width);
max-width: var(–drawer-max-width);
box-shadow: none;
padding-block: 0;
&:not(.facets–drawer) {
@media screen and (min-width: 750px) {
padding-inline: var(–padding-inline-start) var(–padding-inline-end);
width: 100%;
max-width: 100%;
}
}
}
.facets–horizontal {
display: none;
@media screen and (min-width: 750px) {
padding-block: var(–padding-block-start) var(–padding-block-end);
display: flex;
align-items: center;
position: relative;
z-index: var(–facets-upper-z-index);
border: none;
height: auto;
top: initial;
bottom: initial;
max-height: none;
width: auto;
overflow: visible;
}
}
.facets–vertical {
display: none;
@media screen and (min-width: 750px) {
padding-block: 0 var(–padding-block-end);
display: block;
position: static;
top: auto;
bottom: auto;
height: auto;
max-height: none;
width: auto;
overflow: visible;
}
}
.collection-wrapper–grid-full-width .facets–vertical:not(.facets–drawer) {
@media screen and (min-width: 750px) {
padding-inline-start: max(var(–padding-sm), var(–padding-inline-start));
}
}
.facets–drawer {
border-radius: 0;
border-right: var(–style-border-drawer);
box-shadow: var(–shadow-drawer);
padding-inline: 0;
}
.facets–drawer[open] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.facets-drawer__form-wrapper {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.facets-drawer__form-wrapper .facets__form {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.facets-drawer__filters {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.facets-drawer__filters .facets__filters-wrapper,
.facets-drawer__filters .filter-remove-buttons,
.facets-drawer__filters .sorting-filter-component {
overflow: visible;
}
.facets–drawer .facets__actions {
flex-shrink: 0;
background-color: var(–color-background);
}
.facets.facets-controls-wrapper {
@media screen and (min-width: 750px) {
grid-column: column-1 / column-12;
color: rgb(var(–color-foreground-rgb) / var(–opacity-70));
gap: 0 var(–facets-form-horizontal-gap);
padding-bottom: var(–padding-xs);
}
}
.collection-wrapper:has(.product-grid-mobile–large) .facets-mobile-wrapper.facets-controls-wrapper {
@media screen and (max-width: 749px) {
display: none;
}
}
.facets__inputs {
display: flex;
flex-direction: column;
gap: var(–padding-lg);
width: 100%;
}
:is(.facets–drawer, .facets–vertical) .facets__inputs:not(:has(.show-more)) {
padding-block-end: var(–padding-sm);
}
/* Facets - Form */
.facets__form-wrapper {
display: flex;
flex-direction: column;
color: var(–color-foreground-muted);
width: 100%;
}
.facets–horizontal .facets__form-wrapper {
@media screen and (min-width: 750px) {
flex-direction: row;
height: auto;
}
}
.facets__form {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
}
.facets–horizontal .facets__form {
@media screen and (min-width: 750px) {
flex-flow: row nowrap;
height: auto;
}
}
.facets:not(.facets–drawer) .facets__filters-wrapper {
@media screen and (min-width: 750px) {
margin-inline-end: var(–margin-md);
}
}
.facets–horizontal .facets__filters-wrapper {
@media screen and (min-width: 750px) {
max-width: 60%;
display: flex;
flex-wrap: wrap;
column-gap: var(–gap-xl);
margin-inline-end: 0;
}
}
/* Facets - Summary */
.facets__summary {
–variant-picker-swatch-width: 32px;
–variant-picker-swatch-height: 32px;
–icon-opacity: 0.5;
@media screen and (min-width: 750px) {
–variant-picker-swatch-width: 26px;
–variant-picker-swatch-height: 26px;
}
font-size: var(–font-h5–size);
display: flex;
justify-content: space-between;
&:hover {
–icon-opacity: 1;
}
}
.facets__filters-wrapper:hover .facets__summary,
.facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
opacity: var(–facets-hover-opacity);
}
.facets__filters-wrapper .facets__summary:hover,
.facets__filters-wrapper .facets__panel[open] .facets__summary {
opacity: 1;
}
.facets–horizontal .facets__summary {
@media screen and (min-width: 750px) {
font-size: var(–font-paragraph–size);
justify-content: flex-start;
height: var(–minimum-touch-target);
}
}
.facets__summary .icon-caret {
height: var(–icon-size-xs);
width: var(–icon-size-xs);
color: rgb(var(–color-foreground-rgb) / var(–icon-opacity));
margin-block: var(–margin-2xs);
transition: color var(–animation-speed) var(–animation-easing);
}
.facets–drawer .facets__summary .icon-caret {
margin-inline-start: var(–margin-2xs);
}
/* Facets - Bubble */
.facets__bubble {
display: inline-flex;
font-family: var(–font-paragraph–family);
font-weight: var(–font-paragraph–weight);
aspect-ratio: 1 / 1;
}
/* Facets - Inputs */
.facets__inputs-wrapper {
margin-block: var(–padding-xs) var(–padding-xs);
}
.facets__inputs .show-more {
display: flex;
flex-direction: column;
gap: var(–gap-xl);
margin-block-end: var(–padding-xl);
}
.facets:not(.facets–drawer) .facets__inputs-wrapper {
@media screen and (min-width: 750px) {
gap: var(–gap-sm);
}
}
.facets–horizontal .facets__inputs .show-more {
@media screen and (min-width: 750px) {
display: contents;
}
}
.facets–horizontal .facets__inputs-wrapper {
@media screen and (min-width: 750px) {
max-height: var(–facets-horizontal-max-input-wrapper-height);
scrollbar-width: none;
-ms-overflow-style: none;
overflow-x: auto;
padding: var(–padding-md);
margin-block: 0;
}
}
.facets–vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
padding-block: var(–padding-sm);
padding-inline: var(–padding-sm);
margin-block: calc(var(–padding-sm) * -1);
margin-inline: calc(var(–padding-sm) * -1);
}
@media screen and (max-width: 749px) {
.facets__inputs:has(.show-more) .facets__inputs-wrapper {
padding-block: var(–padding-sm);
padding-inline: var(–padding-sm);
margin-block: calc(var(–padding-sm) * -1);
margin-inline: calc(var(–padding-sm) * -1);
}
}
.facets__inputs-wrapper:not(:has(.facets__inputs-list)),
.facets__inputs-wrapper .facets__inputs-list {
display: flex;
gap: var(–facets-mobile-gap);
flex-direction: column;
@media screen and (min-width: 750px) {
gap: var(–gap-sm);
}
}
@media screen and (min-width: 750px) {
.facets–vertical .facets__inputs-wrapper .facets__inputs-list–swatches {
gap: var(–gap-sm);
}
.facets–horizontal
.facets__inputs-wrapper
.facets__inputs-list–swatches:not(.facets__inputs-list–swatches-grid) {
display: grid;
grid-template-columns: repeat(var(–swatch-columns, 4), 1fr);
}
}
.facets__inputs-wrapper .facets__inputs-list–swatches {
–facets-mobile-gap: var(–gap-sm);
}
.facets__inputs-wrapper .facets__inputs-list–grid {
–min-column-width: 20%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(–min-column-width), 1fr));
gap: var(–gap-sm);
@media screen and (min-width: 750px) {
–min-column-width: 50px;
}
}
.facets-block-wrapper:not(.facets-block-wrapper–vertical) .facets__inputs-list–grid {
@media screen and (min-width: 750px) {
width: var(–facets-grid-panel-width);
}
}
.facets__inputs-wrapper–row:not(:has(.facets__inputs-list)),
.facets__inputs-wrapper–row .facets__inputs-list {
flex-wrap: wrap;
flex-direction: row;
}
.facets__inputs .show-more__button {
–show-more-icon-size: 22px;
–show-more-gap: 8px;
gap: var(–show-more-gap);
@media screen and (min-width: 750px) {
–show-more-icon-size: 16px;
–show-more-gap: 6px;
}
}
.facets__inputs .show-more__button .icon-plus {
width: var(–show-more-icon-size);
height: var(–show-more-icon-size);
svg {
width: var(–icon-size-xs);
height: var(–icon-size-xs);
}
}
/* Facets - Panel */
.facets__panel {
padding: 0 var(–drawer-padding);
}
.facets:not(.facets–drawer) .facets__panel,
.facets-controls-wrapper .facets__panel {
@media screen and (min-width: 750px) {
padding: 0;
}
}
.facets–horizontal .facets__panel {
@media screen and (min-width: 750px) {
position: relative;
}
}
.facets-mobile-wrapper .facets__panel-content {
border-radius: var(–style-border-radius-popover);
}
.facets-mobile-wrapper {
–facets-upper-z-index: var(–layer-raised);
–facets-panel-min-width: 120px;
–facets-panel-height: 300px;
}
.facets–horizontal .facets__panel-content {
@media screen and (min-width: 750px) {
border-radius: var(–style-border-radius-popover);
position: absolute;
top: 100%;
width: max-content;
min-width: var(–facets-panel-min-width);
max-width: var(–facets-panel-width);
max-height: var(–facets-panel-height);
z-index: var(–facets-upper-z-index);
box-shadow: var(–shadow-popover);
border: var(–style-border-popover);
background-color: var(–color-background);
overflow-y: hidden;
gap: 0;
}
}
:is(.facets–drawer, .facets–vertical) :is(.facets__item, .sorting-filter)::before {
content: ‘’;
display: block;
height: 0;
width: calc(100% - var(–drawer-padding) * 2);
border-top: var(–style-border-width) solid var(–color-border);
margin: 0 auto;
}
@media screen and (min-width: 750px) {
.facets:not(.facets–drawer) :is(.facets__item, .sorting-filter)::before {
width: 100%;
}
.facets–horizontal .facets__item:not(:first-of-type)::before,
.facets–horizontal .sorting-filter::before {
content: none;
}
}
@media screen and (min-width: 750px) {
.facets–vertical .facets__item:not(:first-of-type)::before,
.facets–vertical .sorting-filter::before {
content: ‘’;
}
}
/* Facets - Text */
.facets__label,
.facets__clear-all,
.clear-filter {
text-decoration-color: transparent;
text-decoration-thickness: 0.075em;
text-underline-offset: 0.125em;
transition: text-decoration-color var(–animation-speed) var(–animation-easing);
}
.facets__label,
.products-count-wrapper {
text-transform: var(–facet-label-transform);
}
.clear-filter {
background-color: transparent;
box-shadow: none;
padding: 0;
}
/* Facets - Label */
.facets__label {
color: var(–color-foreground);
cursor: pointer;
white-space: nowrap;
@media screen and (min-width: 750px) {
margin-inline-end: var(–margin-2xs);
}
}
/* Products count */
.products-count-wrapper {
display: none;
}
.facets–horizontal .products-count-wrapper {
@media screen and (min-width: 750px) {
display: flex;
margin-left: auto;
flex-shrink: 0;
align-items: center;
height: var(–minimum-touch-target);
}
}
/* Mobile specific components */
.facets__title-wrapper {
background-color: var(–color-background);
color: var(–color-foreground);
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(–padding-xs);
padding-inline-start: var(–drawer-padding);
padding-inline-end: var(–padding-2xs);
z-index: var(–facets-sticky-z-index);
}
:is(.facets–horizontal, .facets–vertical) .facets__title-wrapper {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets-drawer__title {
–variant-picker-swatch-width: 32px;
–variant-picker-swatch-height: 32px;
margin: 0;
display: flex;
align-items: center;
gap: var(–gap-xs);
@media screen and (min-width: 750px) {
–variant-picker-swatch-width: 26px;
–variant-picker-swatch-height: 26px;
}
}
.facets-drawer__close {
position: relative;
top: 0;
right: 0;
padding: 0;
cursor: pointer;
}
/* Status */
.facets__status:not(:empty) {
width: max-content;
display: flex;
margin-inline-start: auto;
font-weight: 500;
color: var(–color-foreground);
}
.facets__panel[open] .facets__status {
display: none;
}
.facets–filters-title {
margin-block-end: 0;
color: var(–color-foreground);
height: fit-content;
@media screen and (max-width: 749px) {
display: none;
}
}
.facets–horizontal .facets__panel .facets__status:has(:not(:empty)) {
@media screen and (min-width: 750px) {
display: flex;
margin-inline-start: var(–margin-xs);
margin-inline-end: var(–margin-xs);
}
}
/* Horizontal filter style */
.facets–horizontal .facets__form {
@media screen and (min-width: 750px) {
gap: 0 var(–facets-form-horizontal-gap);
}
}
.collection-wrapper:has(> .facets–horizontal) .facets__panel[open] {
@media screen and (min-width: 750px) {
z-index: var(–facets-open-z-index);
}
}
{% endstylesheet %}
{% schema %}
{
“name”: “t:names.filters”,
“tag”: null,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_filtering”,
“label”: “t:settings.enable_filtering”,
“info”: “t:info.enable_filtering_info”,
“default”: false
},
{
“type”: “select”,
“id”: “filter_style”,
“label”: “t:settings.direction”,
“options”: [
{
“value”: “horizontal”,
“label”: “t:options.horizontal”
},
{
“value”: “vertical”,
“label”: “t:options.vertical”
}
],
“default”: “horizontal”,
“visible_if”: “{{ block.settings.enable_filtering == true }}”
},
{
“type”: “select”,
“id”: “filter_width”,
“label”: “t:settings.width”,
“options”: [
{
“value”: “centered”,
“label”: “t:options.page”
},
{
“value”: “full-width”,
“label”: “t:options.full”
}
],
“default”: “centered”,
“visible_if”: “{{ block.settings.enable_filtering == true and block.settings.filter_style == ‘horizontal’ }}”
},
{
“type”: “select”,
“id”: “text_label_case”,
“label”: “t:settings.text_label_case”,
“options”: [
{
“value”: “default”,
“label”: “t:options.default”
},
{
“value”: “uppercase”,
“label”: “t:options.uppercase”
}
],
“default”: “default”,
“visible_if”: “{{ block.settings.enable_filtering == true }}”
},
