Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to setup
  • Product setup
  • Add metafield as a filter option
  1. Collections
  2. Collection pages

Custom filter options

Using metafields, Story theme can display custom filter types

PreviousBadge settingsNextCollection filtering

Last updated 1 year 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