Sidebar Filter Panel for Collections

Generate the complete Liquid, CSS, and JavaScript for a sidebar filter panel section for Shopify collection pages that I can paste into my theme as a custom section, with these specifications: it should allow customers to filter products by multiple criteria. The filter panel should appear on the [SIDEBAR_POSITION] side of the collection grid and occupy [SIDEBAR_WIDTH] pixels on desktop. Include filter groups for price range using a dual-handle slider with min [PRICE_MIN] and max [PRICE_MAX], product type as checkboxes, vendor name as checkboxes, product tags matching the prefix [TAG_PREFIX], color swatches displayed as circular color blocks, and size options displayed as selectable buttons. Each filter group should be collapsible with an accordion toggle, defaulting to [DEFAULT_STATE] (expanded or collapsed). Add an Apply Filters button with background color [BUTTON_BG_COLOR] and a Clear All link that resets every filter. The filters should update the collection page using Shopify storefront filtering API with AJAX requests so the page does not fully reload. Show an active filter count badge next to the Filters heading. On mobile below [MOBILE_BREAKPOINT] pixels, the sidebar should convert to a slide-out drawer triggered by a Filter button that appears above the product grid. Include settings for heading font size [HEADING_FONT_SIZE], checkbox accent color [ACCENT_COLOR], and animation speed [ANIMATION_SPEED]. Provide complete Liquid, CSS, and JavaScript.

To use it: go to Online Store > Themes > Edit code, create sections/sidebar-filter-panel.liquid and paste in the generated code (JS/CSS can go in assets/ and be linked from the section file), then open the theme customizer, go to your collection page template, and add the “Sidebar Filter Panel” section where you want it to appear.