Fluorescent
Stiletto
Stiletto
  • Stiletto Help Center
    • Start using Stiletto
      • Theme licenses
      • Migrate your theme
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • SEO for Shopify themes
      • H1 heading tags
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Fonts
    • Colors
    • Animation
  • Pages
    • Templates
      • About page
      • Blog page
      • Blog posts
      • Collections list
      • Contact page
      • Customer accounts
      • FAQ page
      • Lookbook
      • Password page
      • Search page
      • Store locations
      • 404 page
      • Home page
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menus
      • Mobile menu
      • Quick search
      • Language and currency
      • Social media icons
      • Customer account icon
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom Liquid
  • Sections
    • Theme sections
      • Using sections
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list grid
      • Collection list slider
      • Complete the look
      • Contact form
      • Countdown banner
      • Countdown bar
      • Events
      • Featured collection grid
      • Featured collection slider
      • Featured product
      • Gallery carousel
      • Grid
      • Image compare
      • Image hero
      • Image hero split
      • Image with text
      • Image with text split
      • Multi column
      • Newsletter
      • Newsletter compact
      • Promotion banner
      • Promotion bar
      • Quotes
      • Recently viewed products
      • Rich text
      • Sales banner
      • Scrolling content
      • Shoppable image
      • Shoppable image editorial
      • Slideshow
      • Testimonials
      • Video
      • Video hero
      • Video with text
    • Popups
      • Sign up popup
      • Age verification
      • Countdown popup
      • Promotional popup
  • Products
    • Product listings
      • Product card style
    • Prices and discounts
    • Product badges
    • Quick shop
  • Product pages
    • Product template
      • Alternate templates
      • Pre-order template
      • Gift card
    • Layout and style
      • Product tabs
      • Media gallery
      • Sticky product details
      • Breadcrumbs
      • Navigation buttons
    • Overview blocks
      • Default blocks
        • Description
        • Product header
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
        • Sticky add-to-cart bar
      • Collapsible rows block
      • Complementary products
      • Custom options
      • Image block
      • Information popup
      • Product labels
      • Secure payment
      • Stock level indicator
      • Text block
      • Text list with icons
      • App blocks
    • Variant options
      • Variant chips
      • Variant swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use variant images
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Media grouping
      • Sibling product swatches
    • Product page sections
      • Product reviews
      • Product recommendations
  • Collection pages
    • Collection template
      • Collection landing
      • Sale collection
      • Subcollections
      • Flash sale
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
      • Empty cart promotion
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up filters
  • Customize filter bar layout
  • Show product filter swatches

Was this helpful?

  1. Collection pages

Filters and sorting

Last updated 4 months ago

Was this helpful?

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options.

When filters are enabled, Stiletto also displays a price slider, color swatches, and product chips for easy navigation.

Set up filters


  1. Select a Source for the filter options. Sources can be variant options, tags, or metafields.

  2. Add a Filter label to change the filter group name that appears in the filter drawer.

  3. Click Save.

STEPS

In your theme editor (Customize):

  1. Click on the Product grid section to open the settings.

  2. Choose whether to Enable sorting to let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.

  3. Choose whether to Enable filters to callow customers to filter by product options, product type, price, availability, and more.

    To select which filter options to enable, go to your Online Store > Navigation settings in your Shopify admin. In the Collection and search filters section, you can add, remove, and reorder your filter options.

  4. Select a Desktop filter location to change where to display the filter options.

    Select Top bar to display filters above the product grid.

    Select Sidebar to display filters to the left of the product grid.

  5. If Top bar is selected, choose whether to Enable sticky top bar to keep the filters visible at the top of the screen when visitors scroll down.

  6. If Sidebar is selected, choose whether to Enable sticky filter sidebar to keep the filters visible when visitors scroll down.

  7. Choose to Collapse filter bar on desktop to hide filter and sorting options until visitors click to open the "Filter" bar.

  8. Choose to Collapse filter groups to hide filter options until visitors click to open the available filter groups.

    You can select this option for both desktop and mobile.

  9. If you have product swatches enabled, check the Show swatch filters box to display those variant options as swatches.

  10. If you have product chips, check the Show chip filters box to display those variant options as chips.

    Select a Chip layout. Either 2 Column, 3 Column, or Natural.

    Natural matches the width of the chip to the length of the variant name.

  11. Click Save.

Click Product grid section to find settings

Setting
Description
Options

Enable sorting

Allow visitors to sort products by availability, price, or date released.

Default: Enabled

Enable filters

When enabled, visitors can filter products by type, price, availability, and other options.

Default: Enabled

Customize filter bar layout


Choose the location of the filter bar, make it sticky, and change the layout of the filter groups.

Click Product grid section to find settings

Setting
Description

Enable sticky top bar

Keep the filter top bar visible at the top of the screen when visitors scroll down. This setting applies only when the filter location is set to Top bar.

Desktop filter location

Display filters in a Top bar above the product grid or as a Sidebar to the left of the product grid.

Collapse filter display on desktop

Hide the filter sidebar when the collection page loads. Visitors can click the Filter button to reveal the sidebar.

Enable sticky filter sidebar

Keep the filter sidebar visible when visitors scroll down. This setting applies only when the filter location is set to Sidebar.

Collapse filter group

Hide values of filter groups until visitors click to reveal them.

Show product filter swatches


By default, filter options use swatches and chips, when enabled in your theme settings. To display options as names, click to open the Product grid section settings and de-select Show variant option swatch filters.

Setting
Description

Show variant option swatch filters

Show chip filters

Choose to display chips instead of variants names.

Chip layout

Choose to display chips in 2 or 3 column grid. Select Natural to display a layout that adapts to the natural length of the chips.


By default, the filter drawer includes a price slider and In stock only option. You can add more filter options with Shopify's .

In the , go to Filters, and then click Add filter.

Learn more about customizing filter options in

Sorting is a Shopify feature. Learn how to .

See Shopify's manual for their guide on .

Stiletto's swatch filters option is separate from Shopify's , which allows you to add visual swatches to filter options, separately from product variants.

If you have enabled, choose to display those variant options as swatches.

Related links

Search & Discovery app
Shopify Search & Discovery app
Shopify's Search & Discovery manual.
change the default sort order ↗
collection filters ↗
Visual filters ↗
Collections template
Product grid
Banner
Variant swatches