Content Controls
Filters
These controls allow you to manage the error messages associated with the shop filters, ensuring a user-friendly shopping experience.
Design Controls
Chips
Design the appearance of the filter chips, including their background, padding, typography, borders, and hover effects for a cohesive and attractive look.
- Background – Set the background color for the filter chips.
- Padding – Adjust the padding inside the chips for better spacing and readability.
- Padding – Customize the padding around the chip content.
- Typography – Style the text within the chips, including font, size, and color.
- Borders – Customize the borders of the chips, including radius, styling, and shadow for a distinct look.
- Radius – Adjust the border radius to create rounded corners for the chips.
- Styling – Select border styles and colors to match your site’s design theme.
- Shadow – Add a shadow effect to make the chips stand out.
- Hover Border – Choose a border color for the chips when hovered over by a user.
- Hover Shadow – Set a shadow effect for the chips on hover for added interactivity.
- Space Between – Control the space between individual chips for a clean layout.
Typography
Style the typography for the titles within the shop filters, enhancing the overall readability and aesthetic appeal.
- Titles – Customize the font style, size, and color for the filter titles.
Price Filter
Design the price filter bar, including its background, selection color, height, and handle, as well as the apply button, to make price selection intuitive and visually appealing.
- Bar – Style the price filter bar to match your site’s design.
- Background – Choose a background color for the price bar.
- Selection – Set a color for the selected price range area.
- Height – Adjust the height of the price bar for better visibility and interaction.
- Handle – Customize the handles used to select the price range.
- Size – Set the size of the handles for easy gripping.
- Background – Choose a background color for the handles.
- Borders – Style the borders of the handles, including radius, styling, and shadow.
- Radius – Adjust the border radius for rounded handle edges.
- Styling – Select border styles and colors for the handles.
- Shadow – Add a shadow effect to the handles for depth.
- Hover Border – Set a border color for the handles on hover.
- Hover Shadow – Choose a shadow effect for the handles when hovered over.
- Button – Design the apply button for the price filter, including size, background, outline, and typography.
- Size – Customize the size of the button, with options for padding, override width, and full width at different breakpoints.
- Size – Select a preset size or customize it for the button.
- Padding – Adjust the padding inside the button for better text alignment. Available when ‘Size’ is set to ‘custom’.
- Override Width – Set a specific width for the button, overriding the default size.
- Full Width At – Choose a breakpoint at which the button will become full width.
- Background – Select a background color for the button.
- Outline – Toggle to switch between a solid and an outlined button style.
- Color – Set the color of the button. Available when ‘Outline’ is enabled.
- Width – Adjust the width of the button outline. Available when ‘Outline’ is enabled.
- No Fill On Hover – Toggle to remove the fill color of the button on hover. Available when ‘Outline’ is enabled.
- Typography – Style the font of the button’s text.
- Corners – Choose between squared, rounded, or custom corner styles for the button.
- Corner Radius – Set a specific radius for the button corners. Available when ‘Corners’ is set to ‘custom’.
- Effects – Add effects to the button, such as transition duration, scale on hover, and shadow.
- Transition Duration – Adjust the duration of transition effects on the button.
- Scale On Hover – Set how much the button scales when hovered over.
- Shadow – Add a shadow effect to the button.
- Icon – Customize the icon within the button, including its position, size, color, and spacing.
- Icon – Select an icon to display inside the button.
- Position – Set the position of the icon within the button.
- Size – Adjust the size of the icon.
- Color – Choose a color for the icon.
- Space Before – Set the space before the icon inside the button.
- Space After – Adjust the space after the icon.
- Hover Transform – Set the transformation of the icon on hover, such as scaling or rotating.
- Label – Style the label of the price filter.
- Value – Customize the appearance of the value displayed in the price filter.
Rating Filter
Design the rating filter controls, including the color and size of the stars, and the spacing between them, for an engaging user experience.
- Star Color – Set the color of the stars in the rating filter.
- Star Size – Adjust the size of the stars to fit your design layout.
- Between Stars – Control the space between individual stars for a clean and balanced look.
Design Controls
Attribute Filter
This section provides customization options for the attribute filter buttons, allowing you to adjust their size, background, outline, typography, corner style, and hover effects to match your shop’s design and improve user interaction.
- Button – Tailor the overall look of your attribute filter buttons.
- Size – Configure the button size, including specific settings for padding, width, and responsive adjustments.
- Size – Choose a predefined size or set a custom size for the buttons.
- Padding – Adjust the padding inside the buttons for text alignment and comfort; available only for custom-sized buttons.
- Override Width – Set a specific width for the buttons, overriding the default or chosen size.
- Full Width At – Determine the screen size at which buttons will span the full width of their container.
- Background – Select a background color to enhance the button’s visibility and style.
- Outline – Toggle to switch between filled or outlined button styles.
- Color – Choose a color for the button; applicable when the outline style is selected.
- Width – Adjust the width of the button outline; applicable for outlined buttons.
- No Fill On Hover – Enable to remove the fill color on hover; applicable for outlined buttons.
- Typography – Style the text within the buttons, including font, size, and color.
- Corners – Choose between squared, rounded, or custom corner styles for the buttons.
- Corner Radius – Set a specific radius for custom-styled button corners.
- Effects – Add visual effects to buttons, such as transition duration, hover scaling, and shadows.
- Transition Duration – Adjust the time taken for transition effects.
- Scale On Hover – Set the scale factor for buttons when hovered over.
- Shadow – Add a shadow effect for depth and prominence.
- Icon – Customize the icons within buttons, including their placement, size, color, and hover transformation.
- Icon – Choose an icon to display inside the button.
- Position – Set the position of the icon within the button.
- Size – Adjust the size of the icon for balance and visibility.
- Color – Pick a color for the icon to match or contrast with the button.
- Space Before – Set the space before the icon within the button.
- Space After – Adjust the space after the icon within the button.
- Hover Transform – Apply a transformation to the icon when the button is hovered over, such as scaling or rotation.
Spacing
Manage the spacing and margins around the attribute filter buttons to ensure they integrate seamlessly with your shop’s layout.
- After Titles – Adjust the space following the filter titles for visual clarity.
- Between Filters – Control the spacing between individual filter buttons for an organized appearance.
- Container – Customize the spacing around the filter button container.
- Margin Top – Set the top margin to control the space above the filter buttons.
- Margin Bottom – Adjust the bottom margin to manage the space below the filter buttons.
Advanced
This section provides a suite of advanced controls for the Shop Filters Element, allowing for fine-tuned customization of behavior and design. These options enable you to enhance the functionality of your filters and tailor them to meet specific requirements and styles. The controls here are designed for users who want to go beyond the basics and implement detailed, customized features in their shop filters.
