Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Section settings
  • Content
  • How to add filters in Shopify Admin
  • How to add custom filters

Was this helpful?

  1. Collections
  2. Product grid

Filters

This block enables one to add filters and apply general settings regarding the filter's appearance.

PreviousCollectionsNextFilter settings

Last updated 27 days ago

Was this helpful?

Collections -> Product grid -> Add block -> Filters

IMPORTANT! This block will be available only with the enabled option “Enable default filtering” in Product grid -> Filtering. Check details .

In order to display filters in the sidebar section, you should create them all in Shopify Admin -> Apps -> Search & Discovery app. Learn more about filters .

If you need to set settings for an individual filter block, you can add a “Filter settings” block and assign it to the corresponding filter. How to configure the “Filter settings” block, you can read .

Section settings

You can choose the “Default state” of the block: open, closed, fixed, or without a title.

Content

In the “Layout” dropdown, one can choose the columns limit for filters: 1, 2, 3 columns, or a row. On the “Max column size” scale from 0 to 30, you can choose how many items should be shown in one column.

Please note, the scale settings can be used if the limit of columns is set to 2 or 3 columns in the “Layout” dropdown. If you choose 0, the filter items will be displayed on a scroll or in a column.

How to add filters in Shopify Admin

To display storefront filtering, set up filters in your Shopify Admin -> Apps. Here you can use the Shopify Search & Discovery app.

  • Select the Search & Discovery app from the list of apps.

  • Then, choose the “Filters” item in the side panel of the Admin and press the “Add filter” button:

  • Now you can choose the required filters from the list of the “Source” drop-down:

Add each filter one by one.

  • We have added five filters in the app: Availability, Color, Size, Price, and Vendor:

  • As a final step, we added the “Filters” block, and this is what we have got:

How to add custom filters

You can add custom filters using Metafields. Filters will be displayed for the content types:

  • Text (Single line text)

  • Number (integer, decimal)

  • True or false

In order to create a custom filter, follow the steps below:

Step 1

  • Go to your Shopify Admin -> Settings -> Custom data -> Metafields -> Products.

  • Click “Add definition” and create a product metafield definition. Save changes.

This is an example of the metafield format:

  • Name = the name of a metafield

  • Namespace and key = use a unique definition for each metafield

  • Description = add a description of the metafields that will be shown at the backend only

  • Content type = Text (Single line text), Number (integer, decimal), or True or false

Step 2

  • Go to your Shopify Admin -> Products. For each product, add a value to the corresponding Metafield:

  • Save changes.

Step 3

  • In Shopify Admin -> Apps, use the Shopify Search & Discovery app to add Metafields. How to use the app, you can read above.

  • Choose the custom filter in the “Source” drop-down:

  • Save changes.

Please note, once you select the option “Top & vertical filters” in Theme settings -> Collection and Search page -> Sidebar position on the desktop, only options “Open” and “Close” can be available and only for mobile mode. On the desktop view, filters will be displayed as closed by default. How to configure the sidebar position, you can read .

Check more information .

here
here
here
here
here