The Visibility options allow you to set up the responsive behavior for your preset. There are 5 available options:

  • Visible will display the preset on all the pages selected in the Display On section, at all times.
  • Visible on screens narrower than the Responsive width will display the current preset only when the viewer’s device screen is smaller than the pixel value specified by the Responsive width option of your preset.
  • Visible on screens wider than the Responsive width will only display the filters of your preset on screens wider than the Responsive width option of your preset.
  • Controlled by “Filters” button option will insert the “Filters” toggle button above the products list, and the preset will open by a click on that button.

Presets that are set to Controlled by “Filters” button visibility are automatically inserted into any filterable page covered by their Display on section! Please don’t insert this type of preset by means of widget or shortcode.

  • Visible on screens wider than the Responsive width, controlled by “Filters” button on narrower screens is an advanced responsive option allowing to display the filters in their regular position on wider screens, and open the preset by a click on the “Filters” button on the smaller screens of handheld devices.

“Filters” button

Go to Appearance > Customize > annasta Filters > “Filters” Toggle Button admin section to customize the “Filters” button appearance. To achieve the “sticky” effect enable the Fix page position option.

To change the icon displayed inside the button, add the following custom CSS in annasta Filters > Style settings > Custom CSS (replace the content value with the Unicode of any Font Awesome 5 Free icon of your choice):

.awf-togglable-preset-btn i.fa-bars::before {
    content: "\f1de";

Please consult this article if you need to change the insertion point of your “Filters” button.