With this color swatches filter i want to write its names also i am using search and discovery app i have wacthed many videos what they did i have also done it but still name is not comming
website : https://a4fmj9-bx.myshopify.com/
password : rohbla
Hi,
Hope this will help
Swatches are fine; theme hides label when swatches show.
Print label right after the swatch and remove visually-hidden.
Add a tiny CSS rule so it lines up nicely.
code patterns example
{%- for value in filter.values -%}
<label class="facet-checkbox{% if filter.presentation == 'swatch' %} facet-checkbox--visual{% endif %}">
<input type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value | escape }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
>
{%- if value.swatch or filter.presentation == 'swatch' -%}
<span class="facet-checkbox__swatch"
style="
{%- if value.swatch and value.swatch.image -%}
background-image:url({{ value.swatch.image | image_url: width: 40 }});
{%- elsif value.swatch and value.swatch.color -%}
background-color: {{ value.swatch.color }};
{%- endif -%}
">
</span>
{%- endif -%}
{#-- THIS is the visible name (do NOT keep 'visually-hidden' here) --#}
<span class="facet__value-name">{{ value.label | escape }}</span>
</label>
{%- endfor -%}
Hi @learning141,
Please go to Search & Discovery > Filters > Color > Manage values.
You just need to disable these options, it will display fine
@namphan i did it but it did not fix is there any code solution please ?
i found this some here dont know if its true or not
that’s exactly how Shopify’s Search & Discovery app works by default:
If you choose Color swatch (variant metafield) → Shopify only shows circles (no text labels).
If you choose Color (category metafield / product metafield) → Shopify shows text labels only (no circles).
The app doesn’t support showing both text + circle out of the box.
Custom Code (Circle + Text Together)
You’ll need to tweak your theme filter template.
Hi @learning141,
Can I send you a collaborator invitation? It will help me check things better.
This file have all the code for the color swatches if you can look at this and help me out please
{%- doc -%}
Renders a list or swatch filter.
@param {object} filter - The filter to render
@param {string} filter_style - The filter style (‘horizontal’ | ‘vertical’)
@param {number} active_value_count - The number of active values
@param {number} sectionId - The section ID
@param {boolean} [autofocus] - Whether to autofocus the filter
@param {boolean} [should_render_clear] - Whether to render the clear button
@param {boolean} [show_swatch_label] - Whether to show the swatch label
@param {boolean} [in_drawer] - Whether the filter is in a drawer
{%- enddoc -%}
{% liquid
assign is_swatch = false
assign swatch_index = filter.values | find_index: ‘swatch’
if swatch_index != null
assign is_swatch = true
endif
assign is_image = false
if filter.presentation == ‘image’
assign is_image = true
endif
%}
<accordion-custom
class=“facets__item”
{% if filter_style == ‘horizontal’ %}
data-disable-animation-on-desktop="true"
data-close-with-escape="true"
{% endif %}
open-by-default-on-mobile
{% if filter_style == ‘vertical’ %}
open
open-by-default-on-desktop
{% endif %}
data-filter-param-name=“{{ filter.param_name | escape | replace: ‘.’, ‘-’ }}”
>
<detailsid="Facet-Details-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
class="facets__panel"
{% if filter_style == 'horizontal' %}
data-auto-close-details="desktop"
{% endif %}
<summary class="facets__summary">
<span class="facets__label">{{ filter.label }}</span>
<div class="facets__status-wrapper">
{% if is_swatch %}
<facet-status-component
class="facets__status facets__status--swatches"
facet-type="swatches"
>
<span
class="facets__swatch-wrapper{% if active_value_count > 3 %} bubble facets__bubble{% endif %}"
ref="facetStatus"
>
{%- liquid
if active_value_count > 3
echo active_value_count
elsif active_value_count > 0 and active_value_count <= 3
for value in filter.active_values
render 'swatch', swatch: value.swatch, mode: 'filter'
endfor
endif
-%}
</span>
</facet-status-component>
{% else %}
<facet-status-component
class="facets__status"
facet-type="list"
>
<span
{% if active_value_count > 1 %}
class="bubble facets__bubble"
{% endif %}
hide-when-empty
ref="facetStatus"
>
{%- liquid
if active_value_count == 1
echo filter.active_values\[0\].label
elsif active_value_count > 1
echo active_value_count
endif
-%}
</span>
</facet-status-component>
{% endif %}
<span class="svg-wrapper icon-caret icon-animated">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</div>
</summary>
<floating-panel-component
{% unless filter_style == 'vertical' %}
data-close-on-resize
{% endunless %}
class="facets__inputs facets__panel-content details-content{% if filter_style == 'horizontal' %} color-{{ settings.popover_color_scheme }}{% endif %}"
id="facet-inputs-{{ filter.param_name | escape | replace: '.', '-' }}"
>
<facet-inputs-component
on:change="/updateFilters"
id="facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}"
>
{% liquid
assign has_active_values = false
assign inital_visible_values = 10
if is_swatch
assign inital_visible_values = 22
endif
if is_image
assign inital_visible_values = 6
endif
assign max_visible_values = inital_visible_values | plus: 1
assign render_show_more = false
assign should_render_for_swatch = is_swatch
if is_swatch and show_swatch_label
assign should_render_for_swatch = false
endif
if filter.values.size > max_visible_values and should_render_for_swatch == false
assign render_show_more = true
endif
%}
{% liquid
if render_show_more
if filter_style == 'horizontal'
echo '<show-more-component class="show-more" data-expanded="false" data-disable-on-desktop="true" data-skip-node-update="true">'
else
echo '<show-more-component class="show-more" data-expanded="false" data-skip-node-update="true">'
endif
endif
assign should_use_pills = true
for value in filter.values
if value.label.size > 3
assign should_use_pills = false
break
endif
endfor
if filter.type == 'boolean'
assign should_use_pills = false
endif
%}
<div
class="facets__inputs-wrapper{% if is_swatch or is_image or should_use_pills %} facets__inputs-wrapper--row{% endif %}"
ref="showMoreContent"
>
{% liquid
if is_swatch
assign swatch_columns = filter.values.size
if swatch_columns > 4
assign swatch_columns = 4
\# Balance the number of columns based on the number of values, i.e. try to avoid one or two items in
\# the last row if the number of values is (almost) divisible by 3.
assign mod4 = filter.values.size | modulo: 4
assign mod3 = filter.values.size | modulo: 3
if mod4 != 0 and mod4 != 3
if mod3 == 0 or mod3 == 2
assign swatch_columns = 3
endif
endif
endif
endif
if is_image
assign image_columns = 3
if filter.values.size < 3
assign image_columns = filter.values.size
endif
endif
%}
<ul
id="filters-list-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
class="facets__inputs-list{% if should_use_pills %} facets__inputs-list--grid{% endif %} list-unstyled{% if is_swatch %} facets__inputs-list--swatches{% if show_swatch_label %} facets__inputs-list--swatches-grid{% endif %}{% endif %}{% if is_image %} facets__inputs-list--images{% endif %}"
{% if is_swatch %}
style="--swatch-columns: {{ swatch_columns }};"
{% endif %}
{% if is_image %}
style="--image-columns: {{ image_columns }};"
{% endif %}
name="{{ filter.label }}"
>
{%- for value in filter.values -%}
{% liquid
assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index | replace: '.', '-' | append: '-' | append: filter_style | append: '-' | append: in_drawer
assign is_disabled = false
if value.count == 0 and value.active == false
assign is_disabled = true
endif
assign hidden_class = null
if forloop.index > inital_visible_values and render_show_more
assign hidden_class = 'hidden'
if filter_style == 'horizontal'
assign hidden_class = 'mobile:hidden'
endif
endif
%}
<li
data-skip-node-update="true"
class="facets__inputs-list-item{% if hidden_class %} {{ hidden_class }}{% endif %}"
{% if hidden_class %}
ref="showMoreItems\[\]"
{% endif %}
>
{% if value.active %}
{% assign has_active_values = true %}
{% endif %}
{% if is_image %}
<fieldset
class="variant-option variant-option--buttons variant-option--images"
aria-label="{{ value.label }}"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<div class="facets__image-wrapper">
{% if value.image %}
{{ value.image | image_url: width: 300 | image_tag: alt: value.alt }}
{% endif %}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</div>
<input
tabindex="0"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
aria-label="{{ value.label }}"
id="{{ input_id }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs\[\]"
>
<label
class="facets__image-label"
for="{{ input_id }}"
tabindex="-1"
>
{{- value.label }}
</label>
</fieldset>
{% elsif is_swatch %}
<fieldset
class="variant-option variant-option--buttons variant-option--swatches {% if is_disabled %}variant-option--swatches-disabled{% endif %}"
aria-label="{{ value.label }}"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<label
class="variant-option__button-label variant-option__button-label--has-swatch swatch-rounded"
on:pointerenter="/prefetchPage"
on:pointerleave="/cancelPrefetchPage"
>
<div
class="variant-option__swatch-wrapper"
>
<input
tabindex="0"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
aria-label="{{ value.label }}"
id="{{ input_id }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs\[\]"
>
{% render 'swatch', swatch: value.swatch, mode: 'filter' %}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</div>
<label
class="{% if show_swatch_label %}facets__swatch-label{% else %}hidden{% endif %}"
for="{{ input_id }}"
tabindex="-1"
>
{{- value.label }}
</label>
</label>
</fieldset>
{% else %}
{% if should_use_pills %}
<div
class="facets__pill-wrapper"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="{{ input_id }}"
class="facets__pill-input"
data-label="{{ value.label }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs\[\]"
tabindex="-1"
>
<label
class="facets__pill-label"
for="{{ input_id }}"
tabindex="0"
>
{{- value.label }}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</label>
</div>
{% else %}
{% render 'checkbox',
name: value.param_name,
value: value.value,
label: value.label,
checked: value.active,
id: input_id,
disabled: is_disabled,
inputRef: 'facetInputs\[\]',
events: 'on:pointerenter="/prefetchPage" on:pointerleave="/cancelPrefetchPage"',
autofocus: autofocus
%}
{% endif %}
{% endif %}
</li>
{%- endfor -%}
</ul>
</div>
{% if render_show_more %}
<button
class="show-more__button button-unstyled button-unstyled--with-icon{% if filter_style == 'horizontal' %} desktop:hidden{% endif %}"
ref="showMoreButton"
on:click="/toggle"
aria-expanded="false"
aria-controls="filters-list-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
>
<span class="svg-wrapper icon-plus">
{{- 'icon-plus.svg' | inline_asset_content -}}
</span>
<span class="show-more__label show-more__label--more">
{{- 'actions.show_more' | t -}}
</span>
<span class="show-more__label show-more__label--less">
{{- 'actions.show_less' | t -}}
</span>
</button>
{% echo '</show-more-component>' %}
{% endif %}
{% if should_render_clear %}
<facet-clear-component>
<div
class="facets__clear {% if has_active_values %}facets__clear--active{% endif %}"
ref="clearButton"
>
<button
type="button"
on:click="/clearFilter"
on:keydown="/clearFilter"
class="clear-filter button button-secondary"
>
{{- 'actions.clear' | t -}}
</button>
</div>
</facet-clear-component>
{% endif %}
</facet-inputs-component>
</floating-panel-component>
{% stylesheet %}
.facets input:checked + label {
font-weight: 500;
}
.facets .checkbox .icon-checkmark {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
.facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}
.facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
}
.facets .checkbox .checkbox__label-text {
transition: color 0.2s ease, font-weight 0.2s ease;
}
/* Pill style */
.facets__pill-label {
--pill-label-padding-inline: var(--padding-xs);
--pill-label-border-radius: var(--style-border-radius-md);
--pill-label-border-width: var(--variant-picker-button-border-width);
--pill-label-height: var(--button-size-md);
--pill-label-focus-outline-color: var(--color-foreground);
--pill-label-color: var(--color-foreground);
--pill-label-color-rgb: var(--color-foreground-rgb);
--pill-label-background-color: var(--color-background);
--pill-label-background-color-rgb: var(--color-background-rgb);
--pill-label-border-opacity: var(--facets-low-opacity);
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
border-radius: var(--pill-label-border-radius);
height: var(--pill-label-height);
width: 100%;
padding-inline: var(--pill-label-padding-inline);
color: rgb(var(---pill-label-color-rgb));
background-color: rgb(var(--pill-label-background-color-rgb));
cursor: pointer;
transition: color var(--animation-speed) var(--animation-easing),
background-color var(--animation-speed) var(--animation-easing);
outline-color: var(--pill-label-focus-outline-color);
&:hover {
--pill-label-border-opacity: 100%;
}
}
.facets__pill-input {
&:checked + .facets__pill-label {
--pill-label-color: var(--color-background);
--pill-label-background-color: var(--color-foreground);
--pill-label-border-opacity: 0;
font-weight: 500;
}
&:disabled + .facets__pill-label {
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
--pill-label-border-opacity: var(--facets-low-opacity);
}
}
}
.facets__status-wrapper {
display: flex;
align-items: center;
}
.facets–drawer .facets__status-wrapper {
@media screen and (max-width: 749px) {
gap: var(--gap-3xs);
}
}
.facets–vertical .facets__status-wrapper {
gap: var(--gap-xs);
}
.facets–horizontal .facets__status-wrapper {
gap: 0;
}
.facets__pill-input:disabled + .facets__pill-label svg {
position: absolute;
top: 0;
left: 0;
border-radius: var(--style-border-radius-md);
}
.facets__pill-label svg line {
stroke-width: 1.5px;
stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
}
.facets__pill-wrapper {
position: relative;
}
.facets__pill-input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
/* Swatches */
.facets__status–swatches {
display: none;
}
.facets__swatch-wrapper {
display: flex;
}
.facets__inputs-list–swatches .variant-option__button-label {
--color-variant-text: var(--color-foreground);
}
.facets__inputs-list–swatches {
--variant-picker-swatch-width: 32px;
--variant-picker-swatch-height: 32px;
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 26px;
--variant-picker-swatch-height: 26px;
}
}
.facets–vertical .facets__inputs-wrapper .facets__inputs-list–swatches-grid {
gap: var(--gap-sm);
}
.facets–vertical .facets__inputs-list–swatches .facets__inputs-list-item {
display: flex;
}
.facets__inputs-wrapper .facets__inputs-list–swatches-grid {
--columns: 2;
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
}
.facets__inputs-wrapper .facets__inputs-list–swatches-grid .variant-option–swatches {
cursor: pointer;
overflow: visible;
&.variant-option--swatches-disabled,
&:has(input:disabled) {
cursor: not-allowed;
}
}
.facets__inputs-wrapper .facets__inputs-list–swatches-grid label {
cursor: pointer;
word-break: break-word;
white-space: normal;
.variant-option--swatches-disabled &,
.variant-option--swatches:has(input:disabled) & {
cursor: not-allowed;
}
}
.facets__inputs-wrapper .facets__inputs-list–swatches-grid .variant-option__button-label–has-swatch {
align-items: center;
overflow: visible;
justify-content: flex-start;
display: flex;
width: 100%;
flex-basis: unset;
gap: var(--gap-sm);
}
.facets__inputs-wrapper .facets__inputs-list–swatches-grid .variant-option__button-label:has(:checked) {
color: rgb(var(--color-foreground-rgb));
background-color: rgb(var(--color-background-rgb));
font-weight: 500;
transition: font-weight 0.2s ease;
}
.facets .variant-option–swatches {
--options-border-radius: var(--variant-picker-swatch-radius);
width: auto;
}
.facets–horizontal .facets__status–swatches {
@media screen and (min-width: 750px) {
display: flex;
}
}
.facets–horizontal .sorting-filter .facets__status {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets__status–swatches .swatch {
width: calc(var(--variant-picker-swatch-width) / 1.5);
height: calc(var(--variant-picker-swatch-height) / 1.5);
}
.facets__status–swatches .swatch + .swatch {
margin-left: calc(var(--variant-picker-swatch-width) / -3);
outline: 1px solid rgb(var(--color-background-rgb));
}
.variant-option–images {
position: relative;
}
.variant-option–images {
--image-facet-border-width: var(--variant-picker-button-border-width);
--image-facet-border-opacity: var(--facets-low-opacity);
--image-facet-border-radius: var(--style-border-radius-xs);
border-radius: var(--image-facet-border-radius);
box-shadow: inset 0 0 0 var(--image-facet-border-width)
rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));
&:hover:not(:has(input:disabled)),
&:has(input:checked) {
--image-facet-border-opacity: 100%;
}
&:has(input:checked) {
font-weight: 500;
transition: font-weight 0.2s ease;
}
&:has(input:checked):hover {
--image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
}
&:has(input:focus-visible) {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
&:has(input:disabled),
&:has(input:disabled):hover {
--image-facet-border-opacity: 0;
opacity: var(--disabled-opacity);
cursor: not-allowed;
img {
opacity: var(--disabled-opacity);
}
input,
label,
.facets__image-label {
cursor: not-allowed;
}
.facets__image-wrapper {
border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
border-radius: var(--image-facet-border-radius);
}
}
}
.facets__inputs-wrapper .facets__inputs-list–images {
display: grid;
grid-template-columns: repeat(var(--image-columns), 125px);
gap: var(--gap-sm);
}
.facets–drawer .facets__inputs-wrapper .facets__inputs-list–images {
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 750px) {
grid-template-columns: repeat(4, 1fr);
}
}
.facets–vertical .facets__inputs-wrapper .facets__inputs-list–images {
grid-template-columns: repeat(2, 1fr);
}
.facets–drawer .facets__inputs-list–images {
padding-top: var(--padding-xs);
}
.facets__image-wrapper {
aspect-ratio: 1/1;
width: 100%;
padding: var(--padding-xs);
position: relative;
overflow: hidden;
}
.facets__image-wrapper img {
height: 100%;
width: 100%;
object-fit: contain;
border-radius: calc(var(--border-radius) / 2);
}
/* Position disabled-svg */
.variant-option–images svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
stroke-width: var(--border-width);
stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
/* Position label text and handle overflow */
.facets__inputs-list-item,
.variant-option–images {
min-width: 0;
}
.facets__image-label {
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-block-end: var(--padding-xs);
cursor: pointer;
.variant-option--images:has(input:disabled) & {
cursor: not-allowed;
}
}
.facets__inputs-list–swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
font-weight: 500;
}
.variant-option–images:not(:has(input:disabled)) .facets__image-label:hover {
font-weight: 500;
}
{% endstylesheet %}
Hi @learning141,
The file is not showing the correct format, it will be difficult for me to check, can you resend it?
{%- doc -%}
Renders a list or swatch filter.
@param {object} filter - The filter to render
@param {string} filter_style - The filter style ('horizontal' | 'vertical')
@param {number} active_value_count - The number of active values
@param {number} sectionId - The section ID
@param {boolean} [autofocus] - Whether to autofocus the filter
@param {boolean} [should_render_clear] - Whether to render the clear button
@param {boolean} [show_swatch_label] - Whether to show the swatch label
@param {boolean} [in_drawer] - Whether the filter is in a drawer
{%- enddoc -%}
{% liquid
assign is_swatch = false
assign swatch_index = filter.values | find_index: 'swatch'
if swatch_index != null
assign is_swatch = true
endif
assign is_image = false
if filter.presentation == 'image'
assign is_image = true
endif
%}
<accordion-custom
class="facets__item"
{% if filter_style == 'horizontal' %}
data-disable-animation-on-desktop="true"
data-close-with-escape="true"
{% endif %}
open-by-default-on-mobile
{% if filter_style == 'vertical' %}
open
open-by-default-on-desktop
{% endif %}
data-filter-param-name="{{ filter.param_name | escape | replace: '.', '-' }}"
>
<details
id="Facet-Details-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
class="facets__panel"
{% if filter_style == 'horizontal' %}
data-auto-close-details="desktop"
{% endif %}
>
<summary class="facets__summary">
<span class="facets__label">{{ filter.label }}</span>
<div class="facets__status-wrapper">
{% if is_swatch %}
<facet-status-component
class="facets__status facets__status--swatches"
facet-type="swatches"
>
<span
class="facets__swatch-wrapper{% if active_value_count > 3 %} bubble facets__bubble{% endif %}"
ref="facetStatus"
>
{%- liquid
if active_value_count > 3
echo active_value_count
elsif active_value_count > 0 and active_value_count <= 3
for value in filter.active_values
render 'swatch', swatch: value.swatch, mode: 'filter'
endfor
endif
-%}
</span>
</facet-status-component>
{% else %}
<facet-status-component
class="facets__status"
facet-type="list"
>
<span
{% if active_value_count > 1 %}
class="bubble facets__bubble"
{% endif %}
hide-when-empty
ref="facetStatus"
>
{%- liquid
if active_value_count == 1
echo filter.active_values[0].label
elsif active_value_count > 1
echo active_value_count
endif
-%}
</span>
</facet-status-component>
{% endif %}
<span class="svg-wrapper icon-caret icon-animated">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</div>
</summary>
<floating-panel-component
{% unless filter_style == 'vertical' %}
data-close-on-resize
{% endunless %}
class="facets__inputs facets__panel-content details-content{% if filter_style == 'horizontal' %} color-{{ settings.popover_color_scheme }}{% endif %}"
id="facet-inputs-{{ filter.param_name | escape | replace: '.', '-' }}"
>
<facet-inputs-component
on:change="/updateFilters"
id="facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}"
>
{% liquid
assign has_active_values = false
assign inital_visible_values = 10
if is_swatch
assign inital_visible_values = 22
endif
if is_image
assign inital_visible_values = 6
endif
assign max_visible_values = inital_visible_values | plus: 1
assign render_show_more = false
assign should_render_for_swatch = is_swatch
if is_swatch and show_swatch_label
assign should_render_for_swatch = false
endif
if filter.values.size > max_visible_values and should_render_for_swatch == false
assign render_show_more = true
endif
%}
{% liquid
if render_show_more
if filter_style == 'horizontal'
echo '<show-more-component class="show-more" data-expanded="false" data-disable-on-desktop="true" data-skip-node-update="true">'
else
echo '<show-more-component class="show-more" data-expanded="false" data-skip-node-update="true">'
endif
endif
assign should_use_pills = true
for value in filter.values
if value.label.size > 3
assign should_use_pills = false
break
endif
endfor
if filter.type == 'boolean'
assign should_use_pills = false
endif
%}
<div
class="facets__inputs-wrapper{% if is_swatch or is_image or should_use_pills %} facets__inputs-wrapper--row{% endif %}"
ref="showMoreContent"
>
{% liquid
if is_swatch
assign swatch_columns = filter.values.size
if swatch_columns > 4
assign swatch_columns = 4
# Balance the number of columns based on the number of values, i.e. try to avoid one or two items in
# the last row if the number of values is (almost) divisible by 3.
assign mod4 = filter.values.size | modulo: 4
assign mod3 = filter.values.size | modulo: 3
if mod4 != 0 and mod4 != 3
if mod3 == 0 or mod3 == 2
assign swatch_columns = 3
endif
endif
endif
endif
if is_image
assign image_columns = 3
if filter.values.size < 3
assign image_columns = filter.values.size
endif
endif
%}
<ul
id="filters-list-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
class="facets__inputs-list{% if should_use_pills %} facets__inputs-list--grid{% endif %} list-unstyled{% if is_swatch %} facets__inputs-list--swatches{% if show_swatch_label %} facets__inputs-list--swatches-grid{% endif %}{% endif %}{% if is_image %} facets__inputs-list--images{% endif %}"
{% if is_swatch %}
style="--swatch-columns: {{ swatch_columns }};"
{% endif %}
{% if is_image %}
style="--image-columns: {{ image_columns }};"
{% endif %}
name="{{ filter.label }}"
>
{%- for value in filter.values -%}
{% liquid
assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index | replace: '.', '-' | append: '-' | append: filter_style | append: '-' | append: in_drawer
assign is_disabled = false
if value.count == 0 and value.active == false
assign is_disabled = true
endif
assign hidden_class = null
if forloop.index > inital_visible_values and render_show_more
assign hidden_class = 'hidden'
if filter_style == 'horizontal'
assign hidden_class = 'mobile:hidden'
endif
endif
%}
<li
data-skip-node-update="true"
class="facets__inputs-list-item{% if hidden_class %} {{ hidden_class }}{% endif %}"
{% if hidden_class %}
ref="showMoreItems[]"
{% endif %}
>
{% if value.active %}
{% assign has_active_values = true %}
{% endif %}
{% if is_image %}
<fieldset
class="variant-option variant-option--buttons variant-option--images"
aria-label="{{ value.label }}"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<div class="facets__image-wrapper">
{% if value.image %}
{{ value.image | image_url: width: 300 | image_tag: alt: value.alt }}
{% endif %}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</div>
<input
tabindex="0"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
aria-label="{{ value.label }}"
id="{{ input_id }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs[]"
>
<label
class="facets__image-label"
for="{{ input_id }}"
tabindex="-1"
>
{{- value.label }}
</label>
</fieldset>
{% elsif is_swatch %}
<fieldset
class="variant-option variant-option--buttons variant-option--swatches {% if is_disabled %}variant-option--swatches-disabled{% endif %}"
aria-label="{{ value.label }}"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<label
class="variant-option__button-label variant-option__button-label--has-swatch swatch-rounded"
on:pointerenter="/prefetchPage"
on:pointerleave="/cancelPrefetchPage"
>
<div
class="variant-option__swatch-wrapper"
>
<input
tabindex="0"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
aria-label="{{ value.label }}"
id="{{ input_id }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs[]"
>
{% render 'swatch', swatch: value.swatch, mode: 'filter' %}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</div>
<label
class="{% if show_swatch_label %}facets__swatch-label{% else %}hidden{% endif %}"
for="{{ input_id }}"
tabindex="-1"
>
{{- value.label }}
</label>
</label>
</fieldset>
{% else %}
{% if should_use_pills %}
<div
class="facets__pill-wrapper"
on:keydown="#facet-inputs-component-{{ filter.param_name | escape | replace: '.', '-' }}/handleKeyDown"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="{{ input_id }}"
class="facets__pill-input"
data-label="{{ value.label }}"
{% if value.active %}
checked
{% endif %}
{% if is_disabled %}
disabled
{% endif %}
{% if autofocus %}
autofocus
{% endif %}
ref="facetInputs[]"
tabindex="-1"
>
<label
class="facets__pill-label"
for="{{ input_id }}"
tabindex="0"
>
{{- value.label }}
{% if is_disabled %}
<svg
aria-hidden="true"
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<line x1="100" y1="0" x2="0" y2="100" vector-effect="non-scaling-stroke" />
</svg>
{% endif %}
</label>
</div>
{% else %}
{% render 'checkbox',
name: value.param_name,
value: value.value,
label: value.label,
checked: value.active,
id: input_id,
disabled: is_disabled,
inputRef: 'facetInputs[]',
events: 'on:pointerenter="/prefetchPage" on:pointerleave="/cancelPrefetchPage"',
autofocus: autofocus
%}
{% endif %}
{% endif %}
</li>
{%- endfor -%}
</ul>
</div>
{% if render_show_more %}
<button
class="show-more__button button-unstyled button-unstyled--with-icon{% if filter_style == 'horizontal' %} desktop:hidden{% endif %}"
ref="showMoreButton"
on:click="/toggle"
aria-expanded="false"
aria-controls="filters-list-{{ sectionId }}-{{ filter.param_name | escape | replace: '.', '-' }}"
>
<span class="svg-wrapper icon-plus">
{{- 'icon-plus.svg' | inline_asset_content -}}
</span>
<span class="show-more__label show-more__label--more">
{{- 'actions.show_more' | t -}}
</span>
<span class="show-more__label show-more__label--less">
{{- 'actions.show_less' | t -}}
</span>
</button>
{% echo '</show-more-component>' %}
{% endif %}
{% if should_render_clear %}
<facet-clear-component>
<div
class="facets__clear {% if has_active_values %}facets__clear--active{% endif %}"
ref="clearButton"
>
<button
type="button"
on:click="/clearFilter"
on:keydown="/clearFilter"
class="clear-filter button button-secondary"
>
{{- 'actions.clear' | t -}}
</button>
</div>
</facet-clear-component>
{% endif %}
</facet-inputs-component>
</floating-panel-component>
</details>
</accordion-custom>
{% stylesheet %}
.facets input:checked + label {
font-weight: 500;
}
.facets .checkbox .icon-checkmark {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
.facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}
.facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
}
.facets .checkbox .checkbox__label-text {
transition: color 0.2s ease, font-weight 0.2s ease;
}
/* Pill style */
.facets__pill-label {
--pill-label-padding-inline: var(--padding-xs);
--pill-label-border-radius: var(--style-border-radius-md);
--pill-label-border-width: var(--variant-picker-button-border-width);
--pill-label-height: var(--button-size-md);
--pill-label-focus-outline-color: var(--color-foreground);
--pill-label-color: var(--color-foreground);
--pill-label-color-rgb: var(--color-foreground-rgb);
--pill-label-background-color: var(--color-background);
--pill-label-background-color-rgb: var(--color-background-rgb);
--pill-label-border-opacity: var(--facets-low-opacity);
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
border-radius: var(--pill-label-border-radius);
height: var(--pill-label-height);
width: 100%;
padding-inline: var(--pill-label-padding-inline);
color: rgb(var(---pill-label-color-rgb));
background-color: rgb(var(--pill-label-background-color-rgb));
cursor: pointer;
transition: color var(--animation-speed) var(--animation-easing),
background-color var(--animation-speed) var(--animation-easing);
outline-color: var(--pill-label-focus-outline-color);
&:hover {
--pill-label-border-opacity: 100%;
}
}
.facets__pill-input {
&:checked + .facets__pill-label {
--pill-label-color: var(--color-background);
--pill-label-background-color: var(--color-foreground);
--pill-label-border-opacity: 0;
font-weight: 500;
}
&:disabled + .facets__pill-label {
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
--pill-label-border-opacity: var(--facets-low-opacity);
}
}
}
.facets__status-wrapper {
display: flex;
align-items: center;
}
.facets--drawer .facets__status-wrapper {
@media screen and (max-width: 749px) {
gap: var(--gap-3xs);
}
}
.facets--vertical .facets__status-wrapper {
gap: var(--gap-xs);
}
.facets--horizontal .facets__status-wrapper {
gap: 0;
}
.facets__pill-input:disabled + .facets__pill-label svg {
position: absolute;
top: 0;
left: 0;
border-radius: var(--style-border-radius-md);
}
.facets__pill-label svg line {
stroke-width: 1.5px;
stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
}
.facets__pill-wrapper {
position: relative;
}
.facets__pill-input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
/* Swatches */
.facets__status--swatches {
display: none;
}
.facets__swatch-wrapper {
display: flex;
}
.facets__inputs-list--swatches .variant-option__button-label {
--color-variant-text: var(--color-foreground);
}
.facets__inputs-list--swatches {
--variant-picker-swatch-width: 32px;
--variant-picker-swatch-height: 32px;
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 26px;
--variant-picker-swatch-height: 26px;
}
}
.facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
gap: var(--gap-sm);
}
.facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
display: flex;
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid {
--columns: 2;
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
cursor: pointer;
overflow: visible;
&.variant-option--swatches-disabled,
&:has(input:disabled) {
cursor: not-allowed;
}
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
cursor: pointer;
word-break: break-word;
white-space: normal;
.variant-option--swatches-disabled &,
.variant-option--swatches:has(input:disabled) & {
cursor: not-allowed;
}
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
align-items: center;
overflow: visible;
justify-content: flex-start;
display: flex;
width: 100%;
flex-basis: unset;
gap: var(--gap-sm);
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
color: rgb(var(--color-foreground-rgb));
background-color: rgb(var(--color-background-rgb));
font-weight: 500;
transition: font-weight 0.2s ease;
}
.facets .variant-option--swatches {
--options-border-radius: var(--variant-picker-swatch-radius);
width: auto;
}
.facets--horizontal .facets__status--swatches {
@media screen and (min-width: 750px) {
display: flex;
}
}
.facets--horizontal .sorting-filter .facets__status {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets__status--swatches .swatch {
width: calc(var(--variant-picker-swatch-width) / 1.5);
height: calc(var(--variant-picker-swatch-height) / 1.5);
}
.facets__status--swatches .swatch + .swatch {
margin-left: calc(var(--variant-picker-swatch-width) / -3);
outline: 1px solid rgb(var(--color-background-rgb));
}
.variant-option--images {
position: relative;
}
.variant-option--images {
--image-facet-border-width: var(--variant-picker-button-border-width);
--image-facet-border-opacity: var(--facets-low-opacity);
--image-facet-border-radius: var(--style-border-radius-xs);
border-radius: var(--image-facet-border-radius);
box-shadow: inset 0 0 0 var(--image-facet-border-width)
rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));
&:hover:not(:has(input:disabled)),
&:has(input:checked) {
--image-facet-border-opacity: 100%;
}
&:has(input:checked) {
font-weight: 500;
transition: font-weight 0.2s ease;
}
&:has(input:checked):hover {
--image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
}
&:has(input:focus-visible) {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
&:has(input:disabled),
&:has(input:disabled):hover {
--image-facet-border-opacity: 0;
opacity: var(--disabled-opacity);
cursor: not-allowed;
img {
opacity: var(--disabled-opacity);
}
input,
label,
.facets__image-label {
cursor: not-allowed;
}
.facets__image-wrapper {
border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
border-radius: var(--image-facet-border-radius);
}
}
}
.facets__inputs-wrapper .facets__inputs-list--images {
display: grid;
grid-template-columns: repeat(var(--image-columns), 125px);
gap: var(--gap-sm);
}
.facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 750px) {
grid-template-columns: repeat(4, 1fr);
}
}
.facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
grid-template-columns: repeat(2, 1fr);
}
.facets--drawer .facets__inputs-list--images {
padding-top: var(--padding-xs);
}
.facets__image-wrapper {
aspect-ratio: 1/1;
width: 100%;
padding: var(--padding-xs);
position: relative;
overflow: hidden;
}
.facets__image-wrapper img {
height: 100%;
width: 100%;
object-fit: contain;
border-radius: calc(var(--border-radius) / 2);
}
/* Position disabled-svg */
.variant-option--images svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
stroke-width: var(--border-width);
stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
/* Position label text and handle overflow */
.facets__inputs-list-item,
.variant-option--images {
min-width: 0;
}
.facets__image-label {
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-block-end: var(--padding-xs);
cursor: pointer;
.variant-option--images:has(input:disabled) & {
cursor: not-allowed;
}
}
.facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
font-weight: 500;
}
.variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
font-weight: 500;
}
{% endstylesheet %}
@namphan did you get the code did you find any solution please ?