Story theme
Story v2
Story v2
  • Story theme documentation
  • online store 2.0
    • The new experience
  • Header
    • Header styles
    • Toolbar
    • Navigation images
    • Image menus
    • Transparent header
    • Mega-menu navigation
    • Drop-down navigation
  • Sections
    • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
    • Section blocks
    • Complete list of sections and blocks in Story
  • Collections
    • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
    • Collection filtering
      • Custom filter options
    • Collection sorting
    • Collection navigation
    • Feature image
  • Products
    • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
    • Product tabs
      • Static product tabs
      • Unique product tabs
    • Color swatches
    • Inventory countdown
    • Pre-order products
    • Size Charts
      • Static size chart
      • Unique size charts
      • Creating pages
    • Product image sizes
  • Cart
    • Cart styles
    • Shipping message
    • Estimate shipping calculator
    • Cart settings
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
  • Tips
    • Where to make CSS changes
    • How to add a line break in your headings
  • Advanced
    • Story tutorials
    • Remove Shopify link in footer
  • Contact
    • Share preview link
  • Earlier versions
    • Story v1
Powered by GitBook
On this page
  • How to setup
  • Product setup
  • Add metafield as a filter option
  1. Collections
  2. Collection filtering

Custom filter options

Using metafields, Story theme can display custom filter types

PreviousCollection filteringNextCollection sorting

Last updated 3 years ago

Build your own custom filter options and assign them to various products. If your custom filters are colors, Story theme will automatically create color swatches for customers to filter by:

How to setup

Begin by creating a basic text metafield in your Shopify Settings:

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on Products (click images to zoom):

  • Provide a Name for your metafield. In our example, we've used Band color.

  • The default Namespace and key can be used. No modifications are needed.

  • Choose Text, Single line text for the Content type.

  • No validation is required.

Save your new definition.

Product setup

Now that your metafield has been defined, we simply start adding Band colors to each of our products.

The next step is to edit any of your products in the Shopify Admin -> Products and add a color to the Band color option under Metafields. Scroll to the bottom of the product setup page:

Populate the Band color metafield option for all products that apply with their color.

Add metafield as a filter option

The final step is to ensure your metafield has been added to the Collection and search filters in the Navigation admin.

Use the Add filters option and select your metafield(s) to include as filter options:

When the pop-up appears, check your metafields:

Band color and Face color are custom filter options
Create new Product metafield
Choose Add definition
Example of Band color metafield definition
Coffee has been assigned as the color for this product's Band color
Shopify Admin under Navigaiton
Band color is checked and will appear in the Collection sidebar as a filter option