Filters Widget - Creative Elements

Note: This widget dynamically displays filters based on the current product listing and the configuration of the PrestaShop 'Faceted Search' (ps_facetedsearch) module. The available filters and their options are managed within that module.

Content tab

Configure the layout, behavior, and content of the product filters.

General Settings

Sidebar

Choose if and when the filters should be displayed in a collapsible sidebar: Disabled, Enabled (always sidebar), Tablet (sidebar on tablet and mobile), or Mobile (sidebar on mobile only).

Toggle Button

Show or Hide the button that opens/closes the filter sidebar (applies if Sidebar is enabled).

Clear Button

Show or Hide a button to clear all currently applied filters.

Heading

Enter an optional main title to display above all filter sections (e.g., "Filter By").

Display

Adjust the predefined size display for the main heading (Small, Medium, Large, etc.).

HTML Tag

Select the appropriate HTML tag for the main heading.

Filter Group Tabs

Active (Initially Open Tabs)

Choose how many filter groups are initially open: None, a specific number (1-10), All, or select Custom filter groups to be open by default.

Custom Active Tabs

Select specific filter groups (e.g., Price, Color, Size) to be open by default when 'Active' is set to 'Custom'.

Remember State

Enable to remember the open/closed state of filter group tabs across page loads for the user.

Title Display (Filter Group)

Adjust the predefined size display for each filter group's title (e.g., "Color", "Size").

Title HTML Tag (Filter Group)

Select the HTML tag for each filter group's title.

Icon (Filter Group Tab)

Select an icon to display next to each filter group title, indicating it can be expanded/collapsed.

Icon Position (Filter Group Tab)

Position the expand/collapse icon Before or After the filter group title.

Icon Spacing (Filter Group Tab)

Control the space between the icon and the filter group title.

Settings apply if 'Toggle Button' visibility is enabled (for Sidebar mode).

Toggle Button

Type

Select a predefined style theme for the toggle button (Default, Primary, Secondary).

Text

Enter custom text for the toggle button (e.g., "Show Filters").

Alignment

Align the toggle button horizontally (Left, Center, Right, Justified).

Size

Adjust the size of the toggle button (XS to XL).

Icon

Select an icon to display within the toggle button.

Icon Position

Position the icon Before or After the toggle button text.

Icon Spacing

Control the space between the icon and text within the toggle button.

Settings apply if 'Clear Button' visibility is enabled.

Clear Button

Position

Place the 'Clear All' button Before or After the list of active filter buttons (if Active Filters widget is used).

Type

Select a predefined style theme for the 'Clear All' button (Default, Primary, Secondary).

Text

Customize the text for the 'Clear All' button (leave empty for default "Clear all").

Alignment

Align the 'Clear All' button horizontally.

Size

Adjust the size of the 'Clear All' button.

Icon

Select an icon to display within the 'Clear All' button.

Icon Position

Position the icon Before or After the 'Clear All' button text.

Icon Spacing

Control the space between the icon and text within the 'Clear All' button.

Filters widget Content tab - Additional Options

Additional Configuration

Configure Faceted Search Module

Provides a direct link to the PrestaShop 'Faceted Search' module configuration page in the back office, where you manage filter templates and options.

Style tab

Customize the appearance of the toggle button, sidebar, main heading, clear button, filter groups, labels, and various filter input types.

Styles apply if 'Toggle Button' visibility is enabled.

Toggle Button

Typography

Control font settings for the toggle button text.

Text Shadow

Apply a shadow effect to the toggle button text.

Text Color (Normal & Hover)

Set text color for the toggle button in normal and hover states.

Background Color (Normal & Hover)

Set background color for the toggle button in normal and hover states.

Border Color (Normal & Hover)

Set border color for the toggle button in normal and hover states.

Border Width

Control the toggle button's border thickness.

Border Radius

Adjust roundness of the toggle button's corners.

Box Shadow

Apply a shadow effect to the toggle button.

Padding

Define inner spacing within the toggle button.

Styles apply if 'Sidebar' is enabled in the Content tab.

Sidebar Container

Width

Set the width of the filter sidebar when it's open.

Padding

Define inner padding for the sidebar container.

Background

Set the background color or gradient for the sidebar panel.

Box Shadow

Apply a shadow effect to the sidebar panel.

Overlay Color

Set the color and transparency of the overlay behind the open sidebar.

Close Button (Sidebar)

UI Color

Set the color of the sidebar's close button icon.

UI Hover Color

Set the hover color of the sidebar's close button icon.

Styles apply if a main Heading is entered in the Content tab.

Heading

Alignment

Align the main heading horizontally.

Text Color

Set the color of the main heading text.

Typography

Control font settings for the main heading.

Text Stroke

Apply an outline to the main heading text.

Text Shadow

Add a shadow to the main heading text.

Spacing

Adjust space below the main heading.

Styles apply if 'Clear Button' visibility is enabled.

Clear All Button

Typography

Control font settings for the 'Clear All' button text.

Text Shadow

Apply a shadow effect to the 'Clear All' button text.

Text Color (Normal & Hover)

Set text color for the 'Clear All' button in normal and hover states.

Background Color (Normal & Hover)

Set background color for the 'Clear All' button in normal and hover states.

Border Color (Normal & Hover)

Set border color for the 'Clear All' button in normal and hover states.

Border Width

Control the 'Clear All' button's border thickness.

Border Radius

Adjust roundness of the 'Clear All' button's corners.

Box Shadow

Apply a shadow effect to the 'Clear All' button.

Padding

Define inner spacing within the 'Clear All' button.

Spacing

Adjust space below the 'Clear All' button.

Filters widget Style tab - Filter Groups

Filters General

Space Between

Adjust the vertical spacing between different filter groups (e.g., between Color and Size).

Divider

Toggle the visibility of separator lines between filter groups.

Style

Choose the style of the divider line.

Weight

Control the thickness of the divider line.

Color

Set the color of the divider line.

Tab Title

Alignment (Title)

Align the filter group title text horizontally.

Background Color

Set the background color for the filter group title/tab area.

Text Color (Normal & Active)

Set text color for filter group titles in normal and active (expanded) states.

Typography

Control font settings for filter group titles.

Text Shadow

Apply a shadow effect to filter group titles.

Items Indicator

Toggle to show a count of active filters within that group next to its title.

Spacing (Items Indicator)

Adjust space between the group title and its active items indicator.

Size (Items Indicator)

Adjust the font size of the items indicator.

Color (Items Indicator)

Set the text color for the items indicator.

Icon Color (Tab)

Set the color of the expand/collapse icon for filter group tabs.

Icon Size (Tab)

Adjust the size of the expand/collapse icon.

Padding (Tab)

Define inner padding for the filter group title/tab area.

Tab Content

Max Height

Set a maximum height for the content area of each filter group, enabling scrolling if content exceeds this height.

Padding (Content)

Define inner padding for the content area within each filter group (below the title).

Label

Spacing

Adjust the space between the input element (checkbox/radio) and its text label.

Text Color

Set the text color for filter option labels.

Typography

Control font settings for filter option labels.

Items Indicator

Toggle visibility of the count of products matching each filter option (e.g., "Red (5)").

Spacing (Indicator)

Adjust space between the filter option label and its item count indicator.

Size (Indicator)

Adjust the font size of the item count indicator.

Color (Indicator)

Set the text color for the item count indicator.

Space Between (Options)

Adjust the vertical space between filter options within a group.

Checkbox

Size

Adjust the size of the checkbox input element.

Background Color (Normal & Active)

Set the background color of the checkbox in its normal and active (checked) states.

Border Color (Normal & Active)

Set the border color of the checkbox in its normal and active (checked) states.

Icon Color (Active)

Set the color of the checkmark icon when the checkbox is active.

Border Width

Control the thickness of the checkbox border.

Border Radius

Adjust the roundness of the checkbox corners.

Radio Buttons

Size

Adjust the size of the radio button input element.

Background Color (Normal & Active)

Set the background color of the radio button in its normal and active (selected) states.

Border Color (Normal & Active)

Set the border color of the radio button in its normal and active (selected) states.

Icon Color (Active)

Set the color of the inner dot when the radio button is active.

Border Width

Control the thickness of the radio button border.

Color Palette

Layout

Choose how color/texture swatches are arranged: Stacked (one per line) or Inline (multiple per line).

Space Between (Inline Layout)

Adjust the spacing between individual swatches when 'Layout' is 'Inline'.

Size

Adjust the width and height of the color/texture swatch buttons.

Icon Size

Control the size of the checkmark icon displayed on active/selected swatches.

Default Swatches

Icon Color

Set the color of the checkmark icon for default (darker) color swatches.

Box Shadow

Apply a shadow effect to default color swatches.

Border Color (Normal & Active)

Set the border color for default swatches in normal and active (selected) states.

Light Color Swatches

Icon Color (Light)

Set the color of the checkmark icon specifically for light-colored swatches to ensure visibility.

Box Shadow (Light)

Apply a shadow effect to light color swatches.

Border Color (Light - Normal & Active)

Set the border color for light-colored swatches in normal and active (selected) states.

All Swatches

Border Width

Control the thickness of the border around all swatches.

Border Radius

Adjust the roundness of the corners for all swatches.

Padding

Define the inner padding within the border of the swatches, affecting the size of the color/texture area.

Styles apply to filters displayed as dropdown select lists.

Drop-down List

Size

Set the overall size (height and font size) of the dropdown fields.

Typography

Control the font settings for the text within dropdown fields.

Text Color

Set the text color for dropdown fields.

Background Color

Set the background color for dropdown fields.

Border Color

Set the border color for dropdown fields.

Border Width

Control the thickness of the border around dropdown fields.

Border Radius

Adjust the roundness of the corners for dropdown fields.

Padding

Define the inner padding within dropdown fields.

Styles apply to filters displayed as range sliders (e.g., Price, Weight).

Range

Height

Set the thickness of the slider track.

Background Color

Set the background color of the slider track (the inactive part).

Active Color

Set the color of the active range (the part between the handles) on the slider track.

Border Radius

Adjust the roundness of the corners for the slider track.

Handles

Size

Adjust the size of the slider handles.

Color

Set the main color of the slider handles.

Border Color

Set the border color for the slider handles.

Border Width

Control the thickness of the border around the slider handles.

Border Radius

Adjust the roundness of the slider handles.

Box Shadow

Toggle and configure a shadow effect for the slider handles.

Cursor

Choose the mouse cursor style when hovering over the slider handles (Drag, Pointer, Resize).

Advanced tab

Access advanced layout, motion, and custom CSS options.

Margin

Define the external space around the widget for separation from adjacent elements.

Padding

Set the internal spacing within the widget to control the arrangement of its content.

Width

Specify the widget's width behavior: Full Width, Inline, Custom, or Calculate.

Full width

Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Inline

Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Custom

Custom Width: Set the width in pixels, percentage, or viewport width (vw).
Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Calculate

Calc: Use calculations like 100% - 20px to dynamically define the width.
Min Width: Set a minimum width in pixels, percentage, or viewport width (vw).
Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Order

Control the widget's order using start, end, or custom values.

Position

Choose default, absolute or fixed positioning for the widget.

Absolute

Horizontal Orientation: Determines the element's horizontal alignment within its nearest positioned ancestor.
Offset: Specifies the distance between the element and the left or right edge of its containing block.
Vertical Orientation: Sets the element's vertical alignment within its nearest positioned ancestor.
Offset: Defines the space between the element and the top or bottom edge of its containing block.

Fixed

Horizontal Orientation: Controls the element's horizontal alignment relative to the browser window.
Offset: Adjusts the distance between the element and the left or right edge of the viewport.
Vertical Orientation: Manages the element's vertical alignment relative to the browser window.
Offset: Defines the space between the element and the top or bottom edge of the viewport.

Z-index

Set the stacking order of the widget relative to other elements.

CSS ID

Assign a unique CSS ID for custom styling or interaction.

CSS Classes

Add custom CSS classes for targeted styling via external stylesheets.

Element Cache

Improves loading times by storing a static version of this element.

Scrolling Effects

Enhance elements with various dynamic effects triggered by the user's scrolling behavior.

Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
Transparency: Adjust the transparency based on the direction, level, and viewport range.
Blur: Apply a blur effect with customizable direction, level, and viewport range.
Rotate: Rotate the element using direction, speed, and viewport settings.
Scale: Scale the element with direction, speed, and viewport controls.
Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.

Mouse Effects

Enable mouse based effects for added interactivity.

Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.

Sticky Effects

Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.

Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
Effects Offset: Configure the pixel offset to control when additional effects apply.
Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.

Entrance Animation

Apply predefined animations to elements when they appear on screen.

Fading: Elements gradually fade in or out of view.
Revealing: Create smooth reveal effects as elements come into view.
Sliding & Revealing: Combine sliding motion with reveal effects.
Scaling & Revealing: Adjust the size of elements as they are revealed.
Zooming: Apply zoom in or out effects during element appearance.
Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
Sliding: Elements slide into view from different directions.
Rotating: Apply rotation effects as elements enter or leave the viewport.
Attention Seekers: Highlight elements with exaggerated, noticeable animations.
Specials: Unique animations for elements that require special effects.

Opacity

Adjust the transparency level of the element to create fade effects during normal or hover states.

Rotate

Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.

Offset

Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.

Scale

Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.

Skew

Skew the element along the X and Y axes to tilt its appearance.

Flip Horizontal/Vertical

Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.

Trigger by (On hover)

Choose whether the hover transformation is triggered by interaction with the widget, column, or section.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Transition Delay (On hover)

Specify a delay in milliseconds before the hover transition effect begins.

Background Type

Select the background type: None, Classic, or Gradient.

Classic

Color: Set a solid background color to provide a consistent base for your design.
Image: Upload an image to use as the background. Additional settings include:
Backdrop Filters: Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
Transition Duration (On hover): Set the time duration in milliseconds that the hover transition effect takes to complete.

Gradient

Color: Select the primary color for the gradient background.
Location: Define the starting position of the primary color in the gradient effect.
Second Color: Select the secondary color to blend into the gradient.
Location: Set the starting point of the secondary color within the gradient.
Angle: Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
Backdrop Filters: Apply visual filters to the gradient background for added depth and effects.
Transition Duration (On hover): Set the time duration in milliseconds that the hover transition effect takes to complete.

Border Type

Define the border style of the element.

Border Width

Set the thickness of the element's border.

Border Color

Define the color of the element's border.

Border Radius

Adjust the corner roundness of the element.

Box Shadow

Apply shadow effects to add depth to the element.

Responsive Visibility

Control the display of elements across different devices by selectively hiding them on desktop, tablet, or mobile.

Scheduled Visibility

Set the section's visibility based on specific schedules.

Customer Group Visibility

Control section visibility based on customer groups.

Custom CSS

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.