Multipurpose theme documentation
Multipurpose Fashion Theme
Product Filter
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Collection Page Overview > Product Filter
Overview
The Product filter (or collection filter) lets customers narrow collection results by availability, price, product type, vendor, tags, and other facets. Filters appear on the collection page—typically in a sidebar or expandable drawer on mobile. This theme supports filters, sorting, and product grid integration. Use filters to help shoppers find products quickly.
Where It Appears
The product filter is part of the collection template. It typically appears:
- Desktop: Sidebar on the left (or right) of the product grid
- Mobile: Drawer or collapsible panel (tap to open)
Configuration is in Theme Customizer > Collection template or in the filter section settings.
📷 Image placeholder: Add a screenshot of the product filter on a collection page.
Filter Types
Common filter facets include:
| Filter | Description | Source |
|---|---|---|
| Availability | In stock, Out of stock | Product inventory |
| Price | Min–max range or price brackets | Product price |
| Product type | Clothing, Accessories, etc. | Product type |
| Vendor | Brand names | Product vendor |
| Size | S, M, L, XL (if size is a variant or tag) | Variants or tags |
| Color | Red, Blue, etc. | Variant option or tag |
| Tags | Custom tags (e.g. "sale", "new") | Product tags |
| Metafields | Custom attributes | Product metafields |
Filter availability depends on the theme and Shopify's storefront filtering. Shopify Plus stores can use the Filtering and sorting app for advanced filters.
Section Settings (if filter is a section)
| Setting | Description |
|---|---|
| Filter layout | Sidebar, Drawer, Inline |
| Show filter groups | Which filter types to show |
| Collapsible | Expand/collapse filter groups |
| Mobile behavior | Drawer or always visible |
| Filter style | Checkboxes, swatches (for color), range slider |
| Show product count | Count per filter option |
| Reset filters | Clear all filters button |
Step-by-Step Setup
Step 1: Enable filters (if applicable)
- Go to Online Store > Themes > Customize.
- Select Collections template.
- Find the Filter or Collection filter section.
- Enable and configure filter types.
Step 2: Configure filter layout
- Layout — Sidebar (desktop) or Drawer (mobile).
- Filter groups — Choose which facets to show (availability, price, type, vendor, etc.).
- Collapsible — Allow customers to expand/collapse groups.
- Save.
Step 3: Product data
For filters to work, products must have:
- Product type — Set in product settings
- Vendor — Set for brand filtering
- Tags — Add relevant tags
- Variants — Size, color for variant-based filters
Filter Behavior
-
URL updates — Filters typically update the URL (e.g.
?filter.p.m.custom.options.size=Medium) for shareable filtered views. - Product count — Some themes show product count per filter option.
- Active filters — Active filters may be shown as chips/pills with option to remove.
- No results — Theme should handle "no products match" gracefully.
Sorting
Alongside filters, collection pages often have sort options:
| Sort option | Description |
|---|---|
| Featured | Manual order (if set in collection) |
| Best selling | By sales |
| Alphabetically, A–Z | By title |
| Alphabetically, Z–A | By title reverse |
| Price, low to high | By price ascending |
| Price, high to low | By price descending |
| Date, new to old | By created date |
| Date, old to new | By created date ascending |
For merchants
- Add Product type and Vendor to products for filtering.
- Use Tags for custom facets (sale, new, material).
- Test filters with real data—ensure options appear correctly.
- Consider mobile: filters in a drawer keep the layout clean.
Common mistakes
| Mistake | Fix |
|---|---|
| Filters empty | Add product type, vendor, tags to products |
| Wrong filter options | Check product data; filters reflect collection products |
| Mobile filter hard to use | Use drawer or collapsible panel on mobile |
| No "clear filters" | Add reset/clear option for usability |
Product Filters – FAQs
Product filters allow customers to narrow down products in a collection by options such as price, size, color, availability, brand, or custom attributes.
Filters help customers find products faster. This improves shopping experience and can increase conversion rates, especially in stores with many products.
Filters typically appear on collection pages. On desktop, they may appear in a sidebar. On mobile, they usually appear inside a filter drawer.
- Price range
- Product availability (In stock / Out of stock)
- Vendor (Brand)
- Product type
- Variant options (Size, Color, etc.)
- Custom metafield filters
Filters are managed inside your Shopify Admin under Search & Discovery settings. You can choose which filters appear on collection pages.
Yes. When you assign correct product data such as vendor, product type, tags, or metafields, filters update automatically.
Yes. Customers can combine filters such as selecting a price range and a size at the same time.
Filters create filtered collection URLs. These are mainly used for user navigation. Your main collection pages remain the primary SEO pages.
No. Filters use Shopify’s built-in filtering system, which is optimized for performance.
If no products match the selected filters, customers will see an empty state message. They can then clear filters to view products again.