Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Add default filters using the Shopify Search & Discovery app
  • Create custom filters using metafileds
  1. FAQ

How to set up filters?

The theme supports storefront filtering by Shopify. In the following article, you can learn how to apply filters for collection pages.

PreviousHow to create webpages?NextUnderstanding of metaobjects and their use in a store

Last updated 1 month ago

Add default filters using the Shopify Search & Discovery app

Read the initial for filter configuration requirements.

Then, you can follow the listed steps to display filters:

Step 1

In your Shopify admin -> Apps, select the Shopify Search & Discovery app:

Step 2

Then, you can press the "Filters" item in the side menu to navigate to the needed chapter:

Step 3

Press the "Add filter" button to view all the available filters:

Step 4

In the "Source" selector, you can choose filters that should be available in a storefront.

Add each filter one by one.

In the "Filter label" field, paste the name of the filter if necessary.

Save the changes.

Note! If you need to display filters for product options such as color, size, style, etc., add the desired options for products in Shopify admin -> Products:

Step 5

The filters will be displayed in the same order as you set them up at the back end. If you need to change the filter's position in the sidebar, change the order in the app by dragging filters up or down:

Step 6

Create custom filters using metafileds

Previously in this article, you learned how to customize the standard filters on the storefront based on product information added in your admin, such as product vendor, type, and product variants. However, Shopify’s software has some limitations, allowing you to add up to three product variants in the admin for use as filters on the storefront. So, what if you need to add more filters that do not match product variants or there is no need to display them as product variants in your store? This can be achieved using metafields.

To display custom filters in a store, follow the steps below:

Step 1

Create a metafield in your Shopify admin -> Settings -> Custom data -> Metafield definitions -> Products by hitting the "Add definition" button.

We are going to create a metafield to display a filter by gender. An example of the metafield settings can be viewed below:

  • Name - Gender

  • Namespace and key - my_fields.gender

  • Single line text - One value

Step 2

Go to "Products" in your admin and assign filter items to products using the created metafield.

Add an appropriate value to each product that needs filtering.

Step 3

To display the filter on the storefront, add a filter to the list of filters in the Shopify Search & Discovery app. Go to Apps, select the app, and press the "Filters" tab. Then, hit the "Add filter" button.

Step 4

Next, select the filter in the "Product metafields" block by pressing the "Source" field.

Save the settings.

Now, you can view the filter on the storefront:

Now you can go to Theme Editor -> Collections -> Product grid -> to make sure the filters displaying have been approved:

Filtering and sorting
documentation