Reference

Filter Editor Appearance Reference

Appearance options for layout dimensions, title styles, block styles, buttons, loaders, overlays, and custom code.

Updated May 25, 2026SEO-ready98 options

This Reference page covers the Appearance tab in the Filter Editor. It is a manual draft for the full option Reference, not a standalone public release of the whole Reference set.

The Appearance tab controls how the filter looks on the storefront. It includes layout dimensions, preset styling, block and button styling, loader and overlay behavior, and custom frontend code hooks.

Global Preset

Theme Preset

Public label: Theme Preset
Location: Filter Editor > Appearance > Global Preset
Type: Select
Default value: Inherit / Light / Dark
Shown when: Always.
Availability: Free
What it does: Applies a broad visual preset to the filter before more specific style options are used.
When to use: Use it as the first styling decision when the filter should inherit the theme or quickly switch between light and dark presentation.
Side effects / performance notes: More specific custom styles can override the preset, so the final appearance depends on later settings too.
Related options: Swatch Shape, Filter Padding, Customize Block Styles.

Swatch Shape

Public label: Swatch Shape
Location: Filter Editor > Appearance > Global Preset
Type: Visual picker
Default value: Square / Rounded / Circle
Shown when: Always.
Availability: Pro
What it does: Sets the shape used by visual swatches such as color or image choices.
When to use: Use it when swatches should match the visual language of the storefront.
Side effects / performance notes: Shape changes can affect how tightly swatches fit inside compact filter blocks.
Related options: Theme Preset, Checkbox Type, Touch-friendly swatch settings.

Dimensions

Filter Width Desktop

Public label: Filter Width (Desktop)
Location: Filter Editor > Appearance > Dimensions
Type: Number with unit
Default value: 100%
Shown when: Always.
Availability: Free
What it does: Sets the filter container width on desktop layouts.
When to use: Adjust it when the filter needs to fit a sidebar, a full-width row, or a custom page-builder column.
Side effects / performance notes: Fixed desktop widths can overflow narrow containers if the theme column is smaller than the chosen value.
Related options: Filter Width (Mobile), Block Width (Desktop), Filter Padding.

Filter Width Mobile

Public label: Filter Width (Mobile)
Location: Filter Editor > Appearance > Dimensions
Type: Number with unit
Default value: 100%
Shown when: Always.
Availability: Free
What it does: Sets the filter container width on mobile layouts.
When to use: Keep it at full width for most mobile pages, or reduce it only when the surrounding layout provides enough space.
Side effects / performance notes: Narrow mobile widths can make labels, buttons, and swatches wrap more often.
Related options: Filter Width (Desktop), Block Width (Mobile), Mobile Layout.

Block Width Desktop

Public label: Block Width (Desktop)
Location: Filter Editor > Appearance > Dimensions
Type: Number with unit
Default value: 100%
Shown when: Always.
Availability: Free
What it does: Sets the width of each filter block on desktop layouts.
When to use: Use it to create multi-column block arrangements or align filter blocks with a theme grid.
Side effects / performance notes: Multiple blocks can wrap when their combined width and gaps exceed the available container width.
Related options: Block Width (Mobile), Gap Between Blocks, Block Padding.

Block Width Mobile

Public label: Block Width (Mobile)
Location: Filter Editor > Appearance > Dimensions
Type: Number with unit
Default value: 100%
Shown when: Always.
Availability: Free
What it does: Sets the width of each filter block on mobile layouts.
When to use: Keep it at full width unless the mobile layout intentionally uses compact side-by-side controls.
Side effects / performance notes: Smaller widths can reduce tap comfort and increase text wrapping.
Related options: Block Width (Desktop), Default Mobile Breakpoint, Collapse Blocks on Mobile.

Block Height

Public label: Block Height
Location: Filter Editor > Appearance > Dimensions
Type: Number
Default value: 0 (auto)
Shown when: Always.
Availability: Free
What it does: Sets a fixed block height or leaves the block height automatic.
When to use: Use a fixed value only when several blocks must align visually in a grid.
Side effects / performance notes: Fixed heights can clip long option lists unless scrolling or collapsible behavior is configured.
Related options: Content Padding, Show Scrollbar, Hide By Title Click.

Gap Between Blocks

Public label: Gap Between Blocks
Location: Filter Editor > Appearance > Dimensions
Type: Number
Default value: 15 px
Shown when: Always.
Availability: Free
What it does: Sets the space between filter blocks.
When to use: Increase it for airy layouts or reduce it for dense sidebars.
Side effects / performance notes: Larger gaps consume vertical space and can push important filters below the first viewport.
Related options: Block Width (Desktop), Block Padding, Content Padding.

Filter Padding

Public label: Filter Padding
Location: Filter Editor > Appearance > Dimensions
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Always.
Availability: Free
What it does: Adds inner spacing around the whole filter container.
When to use: Use it when the filter needs breathing room inside a theme column or page-builder section.
Side effects / performance notes: Padding reduces the available space for filter blocks and may affect mobile wrapping.
Related options: Block Padding, Content Padding, Filter Width (Desktop).

Block Padding

Public label: Block Padding
Location: Filter Editor > Appearance > Dimensions
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Always.
Availability: Free
What it does: Adds inner spacing around each filter block.
When to use: Use it when block backgrounds, borders, or cards need spacing around their content.
Side effects / performance notes: Larger padding can make dense filters significantly taller.
Related options: Filter Padding, Content Padding, Customize Block Styles.

Content Padding

Public label: Content Padding
Location: Filter Editor > Appearance > Dimensions
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Always.
Availability: Free
What it does: Adds spacing inside the content area of a filter block.
When to use: Use it to separate option lists from titles, borders, or block backgrounds.
Side effects / performance notes: Extra padding reduces room for long labels and compact option lists.
Related options: Block Padding, Title Padding, Block Styles Padding.

Title Styles

Customize Title Styles

Public label: Customize Title Styles
Location: Filter Editor > Appearance > Title Styles
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Enables the custom style controls for filter block titles.
When to use: Turn it on when titles need custom typography, borders, spacing, or icons beyond the theme default.
Side effects / performance notes: Custom title styles can override theme CSS and should be checked against desktop and mobile layouts.
Related options: Title Font Family, Title Font Size, Title Toggle Icon.

Title Font Family

Public label: Font Family
Location: Filter Editor > Appearance > Title Styles
Type: Select
Default value: inherit
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the font family for filter block titles.
When to use: Use it when titles should match a custom brand typeface already loaded by the site.
Side effects / performance notes: The font must be available from the theme or page; this option does not load external font files by itself.
Related options: Customize Title Styles, Title Font Size, Title Font Style.

Title Font Size

Public label: Font Size
Location: Filter Editor > Appearance > Title Styles
Type: Number
Default value: inherit
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the title text size.
When to use: Increase it for prominent filter sections or reduce it in dense sidebars.
Side effects / performance notes: Large title sizes can collide with toggle icons or narrow mobile containers.
Related options: Title Font Family, Title Min Height, Title Padding.

Title Font Style

Public label: Font Style
Location: Filter Editor > Appearance > Title Styles
Type: Select
Default value: Normal / Bold / Italic / Bold Italic
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the title weight and italic treatment.
When to use: Use it to make titles more prominent or to match theme heading styles.
Side effects / performance notes: Bold and italic combinations can change text width and wrapping.
Related options: Title Font Size, Title Font Color, Checked Items Bold.

Title Font Color

Public label: Font Color
Location: Filter Editor > Appearance > Title Styles
Type: Color picker
Default value: #1d2327
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the text color for filter block titles.
When to use: Use it when the title color needs stronger contrast or brand alignment.
Side effects / performance notes: Check contrast against the title background color.
Related options: Title Background Color, Title Border Color, Theme Preset.

Title Background Color

Public label: Background Color
Location: Filter Editor > Appearance > Title Styles
Type: Color picker
Default value: transparent
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the background behind each filter block title.
When to use: Use it when titles should read as headers or clickable accordion bars.
Side effects / performance notes: A background color can make padding and border settings more visible.
Related options: Title Font Color, Title Padding, Title Border Width.

Title Border Width

Public label: Border Width
Location: Filter Editor > Appearance > Title Styles
Type: Number
Default value: 0 px
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the width of the title border.
When to use: Use it when titles need a visible divider or framed header treatment.
Side effects / performance notes: Border width has no visible effect unless a border style and color are also set.
Related options: Title Border Style, Title Border Color, Title Padding.

Title Border Style

Public label: Border Style
Location: Filter Editor > Appearance > Title Styles
Type: Select
Default value: None / Solid / Dashed / Dotted
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the title border pattern.
When to use: Use solid borders for standard dividers, or dashed and dotted styles for custom visual systems.
Side effects / performance notes: Border style is visible only when border width is greater than zero.
Related options: Title Border Width, Title Border Color, Block Border Style.

Title Border Color

Public label: Border Color
Location: Filter Editor > Appearance > Title Styles
Type: Color picker
Default value: #ccc
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the title border color.
When to use: Use it to match title dividers with theme borders or brand accents.
Side effects / performance notes: Low contrast border colors can disappear against similar backgrounds.
Related options: Title Border Width, Title Background Color, Block Border Color.

Title Padding

Public label: Padding
Location: Filter Editor > Appearance > Title Styles
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets inner spacing inside the title area.
When to use: Add padding when the title has a background, border, or accordion-like click target.
Side effects / performance notes: Padding increases the height of every title row.
Related options: Title Min Height, Title Background Color, Content Padding.

Title Margin

Public label: Margin
Location: Filter Editor > Appearance > Title Styles
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets outer spacing around the title area.
When to use: Use it to separate titles from neighboring blocks or option lists.
Side effects / performance notes: Margins can create uneven vertical rhythm if combined with block gaps.
Related options: Gap Between Blocks, Title Padding, Block Margin.

Title Min Height

Public label: Min Height
Location: Filter Editor > Appearance > Title Styles
Type: Number
Default value: auto
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets a minimum height for title rows.
When to use: Use it when title rows need consistent height across blocks.
Side effects / performance notes: Large minimum heights can waste space in sidebars.
Related options: Title Font Size, Title Padding, Hide By Title Click.

Title Toggle Icon

Public label: Toggle Icon
Location: Filter Editor > Appearance > Title Styles
Type: Select
Default value: Arrow / Plus / Chevron / None
Shown when: Customize Title Styles is on.
Availability: Pro
What it does: Sets the icon used for expandable or collapsible title rows.
When to use: Use it when title-click behavior should look consistent with the storefront's accordion patterns.
Side effects / performance notes: Removing the icon can make collapsible blocks less discoverable.
Related options: Hide By Title Click, Show Title Label (Desktop), Show Title Label (Mobile).

Block Styles

Customize Block Styles

Public label: Customize Block Styles
Location: Filter Editor > Appearance > Block Styles
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Enables the custom style controls for filter block content and option rows.
When to use: Turn it on when option labels, checks, counts, borders, or backgrounds need a custom treatment.
Side effects / performance notes: Custom block styles can override theme CSS and should be checked on every filter block type used by the filter.
Related options: Block Font Family, Checkbox Type, Count Font Color.

Block Font Family

Public label: Font Family
Location: Filter Editor > Appearance > Block Styles
Type: Select
Default value: inherit
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the font family for option labels inside blocks.
When to use: Use it when filter values should use a specific storefront typeface.
Side effects / performance notes: The selected font must already be available on the page.
Related options: Block Font Size, Block Font Color, Theme Preset.

Block Font Size

Public label: Font Size
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: inherit
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the text size for option labels inside blocks.
When to use: Tune it for dense sidebars, large touch targets, or storefront typography consistency.
Side effects / performance notes: Smaller text can reduce readability; larger text can increase filter height.
Related options: Block Font Family, Checkbox Size, Child Items Padding.

Block Font Color

Public label: Font Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #1d2327
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the default text color for option labels.
When to use: Use it when the theme default is too faint or does not match the filter background.
Side effects / performance notes: Check contrast against the block background and hover background.
Related options: Hover Font Color, Selected Font Color, Block Background Color.

Block Selected Font Style

Public label: Selected Font Style
Location: Filter Editor > Appearance > Block Styles
Type: Radio
Default value: Normal / Bold / Italic
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the text style for selected filter values.
When to use: Use it to make selected values more visible.
Side effects / performance notes: Bold selected labels can change row width and wrapping.
Related options: Selected Font Color, Checked Items Bold, Checkbox Color.

Block Selected Font Color

Public label: Selected Font Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #2271b1
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the text color for selected values.
When to use: Use it to create a clear visual difference between selected and unselected values.
Side effects / performance notes: Selected text should remain readable against hover and selected row backgrounds.
Related options: Selected Font Style, Checkbox Color, Hover Font Color.

Block Background Color

Public label: Background Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #ffffff
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the background color for block content.
When to use: Use it when blocks need a card-like or separated visual treatment.
Side effects / performance notes: Background color makes padding, border radius, and borders more visible.
Related options: Block Border Color, Block Padding, Hover Background.

Block Hover Background

Public label: Hover Background
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #f0f6ff
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the background color for option rows on hover.
When to use: Use it to make interactive option rows feel responsive.
Side effects / performance notes: Hover styling is less relevant on touch devices but still affects hybrid devices.
Related options: Hover Font Color, Hover Border Color, Block Background Color.

Block Hover Font Color

Public label: Hover Font Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #2271b1
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the text color for option rows on hover.
When to use: Use it with hover background to create a clear pointer state.
Side effects / performance notes: Make sure hover color has enough contrast against the hover background.
Related options: Hover Background, Block Font Color, Selected Font Color.

Block Border Width

Public label: Border Width
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: 0 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the border width for block content.
When to use: Use it when blocks need visible separation from the page background.
Side effects / performance notes: Border width is visible only with a border style and color.
Related options: Block Border Style, Block Border Color, Block Border Radius.

Block Border Style

Public label: Border Style
Location: Filter Editor > Appearance > Block Styles
Type: Select
Default value: None / Solid / Dashed / Dotted
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the border pattern for block content.
When to use: Use solid borders for most storefront UI; use other styles only when they match the theme.
Side effects / performance notes: Border style has no visible effect when border width is zero.
Related options: Block Border Width, Block Border Color, Title Border Style.

Block Border Color

Public label: Border Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #ccc
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the border color for block content.
When to use: Use it to match theme dividers, cards, or form borders.
Side effects / performance notes: A low-contrast border may not be visible on similar backgrounds.
Related options: Block Border Width, Block Background Color, Hover Border Color.

Block Border Radius

Public label: Border Radius
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: 0 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Rounds the corners of block backgrounds and borders.
When to use: Use it when filter blocks should match rounded theme cards or form controls.
Side effects / performance notes: Radius is most visible when the block has a background or border.
Related options: Block Background Color, Block Border Width, Button Border Radius.

Block Style Padding

Public label: Padding
Location: Filter Editor > Appearance > Block Styles
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets inner spacing for styled block content.
When to use: Use it when custom backgrounds or borders need space around option rows.
Side effects / performance notes: Padding adds to the global block padding and can make blocks taller.
Related options: Dimensions Block Padding, Content Padding, Block Margin.

Block Margin

Public label: Margin
Location: Filter Editor > Appearance > Block Styles
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets outer spacing around styled block content.
When to use: Use it to adjust spacing when the general gap setting is not specific enough.
Side effects / performance notes: Margins can interact with Gap Between Blocks and create unexpected spacing in grids.
Related options: Gap Between Blocks, Block Padding, Filter Padding.

Checkbox Type

Public label: Checkbox Type
Location: Filter Editor > Appearance > Block Styles
Type: Select
Default value: Default / Custom / Circle / Square
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the visual style of checkbox-like selection controls.
When to use: Use it when default browser controls do not match the storefront design.
Side effects / performance notes: Custom checkbox styles should be checked for keyboard focus and contrast.
Related options: Checkbox Size, Checkbox Color, Checkbox Border Color.

Checkbox Size

Public label: Checkbox Size
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: 16 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the size of checkbox-like selection controls.
When to use: Increase it for touch-friendly filters or reduce it for dense desktop sidebars.
Side effects / performance notes: Very small controls can hurt accessibility; very large controls can crowd option labels.
Related options: Checkbox Type, Checkbox Color, Block Font Size.

Checkbox Color

Public label: Checkbox Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #2271b1
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the selected or accent color for checkbox-like controls.
When to use: Use it to align selected controls with the store's brand accent color.
Side effects / performance notes: Check the selected state against the checkbox border and background.
Related options: Checkbox Border Color, Selected Font Color, Swatch Shape.

Checkbox Border Color

Public label: Checkbox Border Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #ccc
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the border color for checkbox-like controls.
When to use: Use it when the checkbox border needs stronger contrast or brand alignment.
Side effects / performance notes: The border should remain visible in both selected and unselected states.
Related options: Checkbox Color, Checkbox Type, Block Border Color.

Category Icon

Public label: Category Icon
Location: Filter Editor > Appearance > Block Styles
Type: Toggle
Default value: Off
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Shows an icon next to category-style values.
When to use: Use it when category filters need stronger visual hierarchy.
Side effects / performance notes: Icons add horizontal width and can crowd long category names.
Related options: Category Icon Size, Child Items Padding, Filter Categories List.

Category Icon Size

Public label: Category Icon Size
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: 20 px
Shown when: Customize Block Styles is on and Category Icon is enabled.
Availability: Pro
What it does: Sets the size of category icons.
When to use: Adjust it so icons align with the option text size and row height.
Side effects / performance notes: Oversized icons can make rows uneven and reduce scanability.
Related options: Category Icon, Block Font Size, Child Items Padding.

Child Items Padding

Public label: Child Items Padding
Location: Filter Editor > Appearance > Block Styles
Type: Number
Default value: 15 px
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets indentation for nested or child filter values.
When to use: Use it for category trees or hierarchical values that need visible nesting.
Side effects / performance notes: Large indentation can leave little room for long labels on mobile.
Related options: Category Icon, Display Only Descendants, Block Width (Mobile).

Count Font Color

Public label: Count Font Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #a7aaad
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the color of product count text shown next to values.
When to use: Use it to make counts quieter than labels or more visible when counts are important.
Side effects / performance notes: Very faint count colors can be hard to read on low-contrast displays.
Related options: Show Counts in Filters, Count Display After Filtering, Block Font Color.

Hover Border Color

Public label: Hover Border Color
Location: Filter Editor > Appearance > Block Styles
Type: Color picker
Default value: #2271b1
Shown when: Customize Block Styles is on.
Availability: Pro
What it does: Sets the border color for option rows or blocks on hover.
When to use: Use it when hover state should be indicated by border color rather than only background or text.
Side effects / performance notes: It is visible only where the styled element has a border to change.
Related options: Hover Background, Hover Font Color, Block Border Color.

Button Styles

Customize Button Styles

Public label: Customize Button Styles
Location: Filter Editor > Appearance > Button Styles
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Enables custom styling for apply, clear, and related filter buttons.
When to use: Turn it on when filter buttons should match storefront buttons or stand apart from theme defaults.
Side effects / performance notes: Button styles affect important actions, so check hover, mobile width, and contrast.
Related options: Filter Button Text, Clear Button Text, Button Background Color.

Button Font Family

Public label: Font Family
Location: Filter Editor > Appearance > Button Styles
Type: Select
Default value: inherit
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the font family for filter buttons.
When to use: Use it when buttons need to match the store's button typography.
Side effects / performance notes: The font must already be loaded by the theme or page.
Related options: Button Font Size, Button Font Style, Theme Preset.

Button Font Size

Public label: Font Size
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: inherit
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the button text size.
When to use: Use it to improve readability or make compact sidebar buttons smaller.
Side effects / performance notes: Large text may overflow narrow button widths.
Related options: Button Min Width, Button Padding, Button Text Alignment.

Button Font Style

Public label: Font Style
Location: Filter Editor > Appearance > Button Styles
Type: Select
Default value: Normal / Bold / Italic
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the text style for buttons.
When to use: Use it when apply and clear buttons need stronger emphasis.
Side effects / performance notes: Bold and italic text can alter the required button width.
Related options: Button Font Size, Button Font Color, Button Icon.

Button Font Color

Public label: Font Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #ffffff
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the default button text color.
When to use: Use it to ensure the button label is readable against the button background.
Side effects / performance notes: Check normal and hover contrast separately.
Related options: Button Background Color, Button Hover Font Color, Button Icon Color.

Button Background Color

Public label: Background Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #2271b1
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the default button background.
When to use: Use it to align filter actions with the store's primary action color.
Side effects / performance notes: Background color may be overridden or combined with a gradient if that option is used.
Related options: Background Gradient, Button Font Color, Button Hover Background.

Button Background Gradient

Public label: Background Gradient
Location: Filter Editor > Appearance > Button Styles
Type: Text
Default value: None
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Applies a custom background gradient to buttons.
When to use: Use it only when the storefront button system already uses gradients.
Side effects / performance notes: Gradients can reduce text contrast and should be tested in hover and disabled states.
Related options: Button Background Color, Button Hover Background, Custom CSS.

Button Hover Font Color

Public label: Hover Font Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #ffffff
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the button text color on hover.
When to use: Use it when hover background changes require a different text color.
Side effects / performance notes: Hover states should still meet contrast expectations for desktop pointer users.
Related options: Button Font Color, Button Hover Background, Button Hover Border Color.

Button Hover Background

Public label: Hover Background
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #135e96
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the button background color on hover.
When to use: Use it to give apply and clear actions a clear interactive state.
Side effects / performance notes: The hover color should not look like a disabled state.
Related options: Button Background Color, Button Hover Font Color, Button Hover Border Color.

Button Border Width

Public label: Border Width
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: 0 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the width of button borders.
When to use: Use it when buttons need an outline or bordered style.
Side effects / performance notes: Border width is visible only with a border style and color.
Related options: Button Border Style, Button Border Color, Button Hover Border Color.

Button Border Style

Public label: Border Style
Location: Filter Editor > Appearance > Button Styles
Type: Select
Default value: None / Solid / Dashed / Dotted
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the pattern of button borders.
When to use: Use solid borders for standard buttons and other styles only for theme-specific designs.
Side effects / performance notes: Border style has no visible effect when border width is zero.
Related options: Button Border Width, Button Border Color, Block Border Style.

Button Border Color

Public label: Border Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #ccc
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the default button border color.
When to use: Use it for outlined button designs or to match theme form borders.
Side effects / performance notes: It is visible only when border width and style are active.
Related options: Button Border Width, Button Hover Border Color, Button Background Color.

Button Hover Border Color

Public label: Hover Border Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #135e96
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the button border color on hover.
When to use: Use it when hover state should change the outline as well as text or background.
Side effects / performance notes: It has no visible effect without an active border.
Related options: Button Border Color, Button Hover Background, Hover Border Color.

Button Border Radius

Public label: Border Radius
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: 3 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Rounds button corners.
When to use: Match it to the storefront's button and form-control radius.
Side effects / performance notes: Very large radius values can make small buttons look pill-shaped.
Related options: Block Border Radius, Hide Button Border Radius, Button Min Height.

Button Box Shadow

Public label: Box Shadow
Location: Filter Editor > Appearance > Button Styles
Type: Text
Default value: None
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Adds a CSS box shadow to filter buttons.
When to use: Use it when the theme's buttons use elevation or when buttons need stronger separation.
Side effects / performance notes: Heavy shadows can look noisy in dense filter sidebars.
Related options: Button Background Color, Button Border Radius, Custom CSS.

Button Padding

Public label: Padding
Location: Filter Editor > Appearance > Button Styles
Type: Four-value number control
Default value: 8/16/8/16 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets the inner spacing inside buttons.
When to use: Increase it for stronger call-to-action buttons or touch-friendly layouts.
Side effects / performance notes: Padding increases button width and height.
Related options: Button Min Width, Button Min Height, Full Width.

Button Margin

Public label: Margin
Location: Filter Editor > Appearance > Button Styles
Type: Four-value number control
Default value: 0/0/0/0 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets outer spacing around buttons.
When to use: Use it to separate apply and clear actions from filter blocks or from each other.
Side effects / performance notes: Margins can affect horizontal button layouts and wrapping.
Related options: Buttons Position, Buttons Order, Button Padding.

Button Min Width

Public label: Min Width
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: 0 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets a minimum width for buttons.
When to use: Use it when apply and clear buttons should align visually.
Side effects / performance notes: Minimum widths can overflow narrow sidebars when labels are long.
Related options: Button Min Height, Full Width, Button Text Alignment.

Button Min Height

Public label: Min Height
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: 32 px
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Sets a minimum height for buttons.
When to use: Use it to maintain consistent action height across apply, clear, and hide controls.
Side effects / performance notes: Larger heights increase vertical space used by button areas.
Related options: Button Padding, Button Min Width, Hide Button Padding.

Button Text Alignment

Public label: Text Alignment
Location: Filter Editor > Appearance > Button Styles
Type: Select
Default value: Center / Left / Right
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Controls how button text aligns inside the button.
When to use: Keep center for standard buttons; use left or right for custom wide buttons with icons.
Side effects / performance notes: Alignment is most visible when buttons have a set width or full-width layout.
Related options: Full Width, Button Icon, Button Padding.

Button Icon

Public label: Icon
Location: Filter Editor > Appearance > Button Styles
Type: Select
Default value: None / Arrow / Filter / Search
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Adds an icon to filter buttons.
When to use: Use it when buttons need a recognizable visual cue in compact layouts.
Side effects / performance notes: Icons add width and should be checked with translated or long labels.
Related options: Button Icon Size, Button Icon Color, Filter Button Text.

Button Icon Size

Public label: Icon Size
Location: Filter Editor > Appearance > Button Styles
Type: Number
Default value: 14 px
Shown when: Customize Button Styles is on and an icon is selected.
Availability: Pro
What it does: Sets the size of the selected button icon.
When to use: Adjust it so the icon aligns with the button text size.
Side effects / performance notes: Oversized icons can make the button feel unbalanced.
Related options: Button Icon, Button Font Size, Button Icon Color.

Button Icon Color

Public label: Icon Color
Location: Filter Editor > Appearance > Button Styles
Type: Color picker
Default value: #ffffff
Shown when: Customize Button Styles is on and an icon is selected.
Availability: Pro
What it does: Sets the color of button icons.
When to use: Use it when the icon needs a different color than the text or must match the button label.
Side effects / performance notes: Icon color should remain visible in normal and hover states.
Related options: Button Icon, Button Font Color, Button Hover Font Color.

Button Full Width

Public label: Full Width
Location: Filter Editor > Appearance > Button Styles
Type: Toggle
Default value: Off
Shown when: Customize Button Styles is on.
Availability: Pro
What it does: Makes filter buttons fill the available width.
When to use: Use it in sidebars or mobile layouts where stacked full-width actions are easier to tap.
Side effects / performance notes: Full-width buttons can dominate compact layouts and should be checked with Buttons Position.
Related options: Button Min Width, Button Text Alignment, Buttons Position.

Hide Button Styles

Customize Hide Button

Public label: Customize Hide Button
Location: Filter Editor > Appearance > Hide Button Styles
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Enables custom styling for the hide or collapse button.
When to use: Turn it on when the hide control should visually match the rest of the filter actions.
Side effects / performance notes: The button is relevant only when the filter's hide/collapse behavior is available in the active layout.
Related options: Display Hide Button, Hide Button Position, Hide Button Padding.

Hide Button Font Family

Public label: Font Family
Location: Filter Editor > Appearance > Hide Button Styles
Type: Select
Default value: inherit
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Sets the font family for the hide button.
When to use: Use it when the hide button should match custom button typography.
Side effects / performance notes: The font must already be loaded on the storefront.
Related options: Customize Hide Button, Button Font Family, Hide Button Font Color.

Hide Button Font Color

Public label: Font Color
Location: Filter Editor > Appearance > Hide Button Styles
Type: Color picker
Default value: #ffffff
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Sets the text color for the hide button.
When to use: Use it to keep the hide control readable against its background color.
Side effects / performance notes: Check contrast with the hide button background.
Related options: Hide Button Background Color, Button Font Color, Hide Button Border Radius.

Hide Button Background Color

Public label: Background Color
Location: Filter Editor > Appearance > Hide Button Styles
Type: Color picker
Default value: #50575e
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Sets the background color for the hide button.
When to use: Use it to distinguish the hide action from apply or clear actions.
Side effects / performance notes: The background should not look like a disabled action unless that is intentional.
Related options: Hide Button Font Color, Hide Button Border Radius, Button Background Color.

Hide Button Border Width

Public label: Border Width
Location: Filter Editor > Appearance > Hide Button Styles
Type: Number
Default value: 0 px
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Sets the border width for the hide button.
When to use: Use it when the hide button needs an outline.
Side effects / performance notes: Border width is visible only with a compatible border style from the theme or custom CSS.
Related options: Hide Button Border Radius, Button Border Width, Custom CSS.

Hide Button Border Radius

Public label: Border Radius
Location: Filter Editor > Appearance > Hide Button Styles
Type: Number
Default value: 3 px
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Rounds the corners of the hide button.
When to use: Match it to the main filter button radius.
Side effects / performance notes: Large radius values can make a compact hide button look like a pill.
Related options: Button Border Radius, Hide Button Padding, Hide Button Max Width.

Hide Button Padding

Public label: Padding
Location: Filter Editor > Appearance > Hide Button Styles
Type: Four-value number control
Default value: 8/16/8/16 px
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Sets inner spacing inside the hide button.
When to use: Increase it when the hide button needs a larger tap target.
Side effects / performance notes: Padding increases the button size and can push nearby controls.
Related options: Hide Button Max Width, Hide Button Position, Button Padding.

Hide Button Max Width

Public label: Max Width
Location: Filter Editor > Appearance > Hide Button Styles
Type: Number with unit
Default value: 100%
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Limits the maximum width of the hide button.
When to use: Use it when the hide control should not stretch beyond a specific size.
Side effects / performance notes: A small max width can truncate or wrap long button text.
Related options: Hide Button Padding, Hide Button Position, Button Min Width.

Hide Button Position

Public label: Position
Location: Filter Editor > Appearance > Hide Button Styles
Type: Radio
Default value: Left / Center / Right
Shown when: Customize Hide Button is on.
Availability: Pro
What it does: Aligns the hide button within its available area.
When to use: Use it to place the hide control consistently with the filter layout.
Side effects / performance notes: Alignment can be affected by container width and max-width settings.
Related options: Hide Button Max Width, Buttons Position, Display Hide Button.

Loader And Overlay

Enable Loader

Public label: Enable Loader
Location: Filter Editor > Appearance > Loader And Overlay
Type: Toggle
Default value: On
Shown when: Always.
Availability: Free
What it does: Shows a loading indicator while the product list updates.
When to use: Keep it on when AJAX filtering or longer updates need visible feedback.
Side effects / performance notes: A loader helps prevent repeated clicks, but it should not obscure the page longer than necessary.
Related options: Loader Icon, Loader Color, Enable Overlay.

Loader Icon

Public label: Loader Icon
Location: Filter Editor > Appearance > Loader And Overlay
Type: Select
Default value: inherit / Spinner / Dots / Bars / Pulse
Shown when: Enable Loader is on.
Availability: Pro
What it does: Sets the visual style of the loading indicator.
When to use: Use it when the default inherited loader does not fit the storefront.
Side effects / performance notes: More animated loader styles can feel busier on pages with frequent filter updates.
Related options: Enable Loader, Loader Color, Custom Loader.

Loader Color

Public label: Loader Color
Location: Filter Editor > Appearance > Loader And Overlay
Type: Color picker
Default value: #2271b1
Shown when: Enable Loader is on.
Availability: Pro
What it does: Sets the loader color.
When to use: Use it to match the loader with the store's accent color.
Side effects / performance notes: The loader should remain visible over the overlay and product area.
Related options: Loader Icon, Custom Loader, Overlay Background.

Custom Loader

Public label: Custom Loader
Location: Filter Editor > Appearance > Loader And Overlay
Type: Text
Default value: None
Shown when: Enable Loader is on.
Availability: Pro
What it does: Defines a custom loader value or markup source for the loading state.
When to use: Use it when the storefront has a custom loading animation or branded loading element.
Side effects / performance notes: Custom loader content should be lightweight and tested for accessibility and layout stability.
Related options: Loader Icon, Loader Color, Custom CSS.

Enable Overlay

Public label: Enable Overlay
Location: Filter Editor > Appearance > Loader And Overlay
Type: Toggle
Default value: On
Shown when: Always.
Availability: Free
What it does: Adds an overlay over the product area while filtering is in progress.
When to use: Keep it on when shoppers need a clear sign that results are updating.
Side effects / performance notes: Overlays can temporarily block clicks in the product area.
Related options: Overlay Background, Overlay Icon/Word, Don't Remove Products While Loading.

Overlay Background

Public label: Overlay Background
Location: Filter Editor > Appearance > Loader And Overlay
Type: Inherit toggle with color picker and alpha
Default value: inherit
Shown when: Enable Overlay is on.
Availability: Free
What it does: Sets or inherits the overlay background color and opacity.
When to use: Use a custom overlay when the inherited state is too faint or too strong for the theme.
Side effects / performance notes: Heavy overlays can make product content unreadable while updates run.
Related options: Enable Overlay, Loader Color, Overlay Icon/Word.

Overlay Icon Or Word

Public label: Overlay Icon/Word
Location: Filter Editor > Appearance > Loader And Overlay
Type: Text
Default value: Loading...
Shown when: Enable Overlay is on.
Availability: Free
What it does: Sets the text or simple indicator shown with the overlay.
When to use: Use it when shoppers need explicit loading wording instead of only an animation.
Side effects / performance notes: Long text can crowd small product grids or mobile layouts.
Related options: Enable Overlay, Enable Loader, Loader Icon.

Keep Products While Loading

Public label: Don't Remove Products While Loading
Location: Filter Editor > Appearance > Loader And Overlay
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Keeps the current product items visible while new filtered results are loading.
When to use: Use it to reduce layout jumps on catalogs where filtering takes noticeable time.
Side effects / performance notes: Shoppers may briefly see old results under the loading overlay until the update finishes.
Related options: Enable Overlay, AJAX Debounce, Filter Loading Strategy.

Custom Code

Header Text

Public label: Header Text
Location: Filter Editor > Appearance > Custom Code
Type: Textarea
Default value: None
Shown when: Always.
Availability: Pro
What it does: Adds custom header text to the filter output area.
When to use: Use it for a short heading, instruction, or storefront-specific message above the filter.
Side effects / performance notes: Long header text can push the first filter block down and should be checked on mobile.
Related options: Title 1, Title 2, Title 3.

Title 1

Public label: Title 1
Location: Filter Editor > Appearance > Custom Code
Type: Text
Default value: None
Shown when: Always.
Availability: Pro
What it does: Defines a custom title text slot for the filter output.
When to use: Use it when the filter design needs an additional configured title separate from block titles.
Side effects / performance notes: Extra titles can duplicate theme headings if not planned with the page layout.
Related options: Header Text, Title 2, Title 3.

Title 2

Public label: Title 2
Location: Filter Editor > Appearance > Custom Code
Type: Text
Default value: None
Shown when: Always.
Availability: Pro
What it does: Defines a second custom title text slot for the filter output.
When to use: Use it for secondary label text or alternate layout templates.
Side effects / performance notes: Extra title text should be short enough to fit in sidebar layouts.
Related options: Header Text, Title 1, Title 3.

Title 3

Public label: Title 3
Location: Filter Editor > Appearance > Custom Code
Type: Text
Default value: None
Shown when: Always.
Availability: Pro
What it does: Defines a third custom title text slot for the filter output.
When to use: Use it only when the active template or site layout consumes the additional title slot.
Side effects / performance notes: Unused or duplicated titles can make the filter feel visually noisy.
Related options: Header Text, Title 1, Title 2.

Custom CSS

Public label: Custom CSS
Location: Filter Editor > Appearance > Custom Code
Type: Textarea code field
Default value: None
Shown when: Always.
Availability: Free
What it does: Adds custom CSS for this filter's frontend output.
When to use: Use it for small style adjustments that cannot be achieved through the built-in appearance controls.
Side effects / performance notes: Invalid or overly broad CSS can affect unrelated page elements; test on every placement where the filter appears.
Related options: Disable Plugin Styles, Custom Template File, Button Background Gradient.

Custom JS

Public label: Custom JS
Location: Filter Editor > Appearance > Custom Code
Type: Textarea code field
Default value: None
Shown when: Always.
Availability: Free
What it does: Adds custom JavaScript for this filter's frontend output.
When to use: Use it for small integration hooks or theme-specific behavior that cannot be configured elsewhere.
Side effects / performance notes: JavaScript errors can break filtering or other page scripts; test the browser console after changes.
Related options: Custom CSS, Disable Plugin Styles, AJAX selectors.

Disable FontAwesome

Public label: Disable FontAwesome
Location: Filter Editor > Appearance > Custom Code
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Prevents the plugin from loading its FontAwesome assets for this filter.
When to use: Use it when the theme already provides the required icons or when you want to reduce duplicate icon loading.
Side effects / performance notes: Icons that depend on the plugin's FontAwesome assets may disappear if no replacement is available.
Related options: Button Icon, Title Toggle Icon, Disable Plugin Styles.

Disable Plugin Styles

Public label: Disable Plugin Styles
Location: Filter Editor > Appearance > Custom Code
Type: Toggle
Default value: Off
Shown when: Always.
Availability: Pro
What it does: Prevents the plugin's default styles from applying to this filter.
When to use: Use it when a theme or custom CSS fully controls the filter appearance.
Side effects / performance notes: Turning it on can expose unstyled markup unless replacement CSS is loaded.
Related options: Custom CSS, Theme Preset, Custom Template File.

Custom Template File

Public label: Custom Template File
Location: Filter Editor > Appearance > Custom Code
Type: Text
Default value: None
Shown when: Always.
Availability: Pro
What it does: Points the filter to a custom template file for frontend output.
When to use: Use it for developer-led theme integrations that need custom markup.
Side effects / performance notes: Template file paths and markup should be maintained with the theme or plugin integration; broken templates can prevent the filter from rendering correctly.
Related options: Custom CSS, Custom JS, Disable Plugin Styles.