The Be Yours theme supports storefront filtering on collection pages. Filters help customers narrow down products by values such as availability, price, vendor, product type, product options, and metafields.
In Be Yours, the collection page filter display is controlled from the Product grid section on the collection template. The actual filter sources are managed in Shopify using the Search & Discovery app.
How to Set Up Filtering on Collection Templates in Be Yours
STEPS:
1. Understanding How Collection Filtering Works
Collection filtering has two parts:
| Area | Purpose |
|---|---|
| Shopify Search & Discovery | Controls which filter sources are available, such as price, vendor, product type, product options, metafields, and category metafields. |
| Be Yours collection template | Controls whether filters are shown and how they are displayed on the collection page. |
In the Be Yours theme, filters are displayed in the Product grid section on collection templates.
The theme supports:
| Feature | Description |
|---|---|
| Filtering | Allows customers to narrow down products. |
| Sorting | Allows customers to sort products by Shopify sort options. |
| Viewing | Allows customers to switch product grid layouts. |
| Filter layouts | Horizontal, Vertical, and Drawer layouts. |
| Color swatches in filters | Displays color filter values as swatches when configured. |
| Sticky filter | Keeps the filter bar visible when customers scroll. |
Important:
The theme can only display filters that are created and made available in Shopify.
2. Install or Open Shopify Search & Discovery
To manage storefront filters, use the Shopify Search & Discovery app.
- From your Shopify admin, go to Apps.
- Open Search & Discovery.
- If it is not installed, install the Shopify Search & Discovery app from Shopify.
- Open the app.
- Go to Filters.
The Search & Discovery app controls which filters appear on collection pages and search result pages.
Common filter sources include:
| Filter source | Example |
|---|---|
| Availability | In stock, Out of stock |
| Price | Price range |
| Product type | Dress, Shirt, Shoes |
| Vendor | Nike, Adidas, RoarTheme |
| Product options | Color, Size, Material |
| Product metafields | Fabric, Fit, Care, Season |
| Category metafields | Color, size, fabric, material, and other category attributes |
3. Add Filters in Shopify Search & Discovery
To add filters:
- From your Shopify admin, open Search & Discovery.
- Go to Filters.
- Click Add filter.
- Click Select source.
- Choose the filter source you want to add.
- Optional: Rename the filter label.
- Optional: Change the filter behavior if available.
- Click Save.
Recommended basic filters:
| Filter | Recommended source |
|---|---|
| Availability | Product availability |
| Price | Product price |
| Vendor | Product vendor |
| Product type | Product type |
| Color | Product option, category metafield, or product metafield |
| Size | Product option, category metafield, or product metafield |
After saving filters in Search & Discovery, they can appear on compatible collection templates when filtering is enabled in the theme.
4. Create Metafields for Custom Filters
If you want to filter by custom product information, create product metafields first.
Example custom filters:
| Filter | Suggested metafield |
|---|---|
| Fabric | custom.fabric |
| Fit | custom.fit |
| Season | custom.season |
| Care | custom.care |
| Product feature | custom.product_feature |
To create a product metafield:
-
From your Shopify admin, go to Settings > Metafields and metaobjects.
-
Select Products.
-
Click Add definition.
-
Enter the metafield name.
Example:
Fabric -
Shopify will automatically recommend a Namespace and key.
-
If you want to edit it manually, click the suggested Namespace and key value.
Example:
custom.fabric -
Select the content type.
Recommended types for filters:
Content type Recommended use Single line text Simple text filters like Fabric, Fit, Season List of single line text Multiple values per product Metaobject reference Structured reusable values Category metafield Standard Shopify category attributes -
Configure validation if needed.
-
Click Save.
After creating the metafield definition, add values to products:
- Go to Products.
- Open a product.
- Scroll down to the Metafields area.
- Add the metafield value.
- Click Save.
- Repeat this for all products that should appear in the filter.
Then go back to Search & Discovery > Filters and add the metafield as a filter source.
5. Enable Filtering on the Collection Template
After setting up filter sources in Search & Discovery, enable filtering in the collection template.
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the collection template, such as Default collection.
- Select the Product grid section.
- Find the filtering settings.
- Enable Filtering.
- Choose the Filter type.
- Click Save.
Recommended setup:
| Setting | Recommended value |
|---|---|
| Enable filtering | Enabled |
| Enable sorting | Enabled |
| Enable viewing | Optional |
| Enable sticky filter | Enabled |
| Filter type | Horizontal, Vertical, or Drawer |
6. Choose the Filter Layout
Be Yours supports three filter layouts on collection pages.
| Filter type | Description | Best used for |
|---|---|---|
| Horizontal | Displays filters in a top filter bar. | Simple stores with a small number of filters. |
| Vertical | Displays filters in a sidebar layout. | Stores with many filters or large catalogs. |
| Drawer | Displays filters inside a drawer. | Clean layouts, mobile-first designs, or stores that want a minimal collection page. |
Recommended layout:
| Store type | Suggested filter type |
|---|---|
| Small catalog | Horizontal |
| Fashion, beauty, furniture, or large catalog | Vertical |
| Minimal design or mobile-first store | Drawer |
Notes:
- Vertical filters work well when customers need to compare many filter values.
- Drawer filters keep the collection page cleaner.
- Horizontal filters are simple and compact.
7. Enable Color Swatches in Filters
Be Yours can display color filter values as swatches.
To enable color swatches in filters:
- Open the collection template in the Theme Editor.
- Select the Product grid section.
- Enable Color swatches for filtering.
- Optional: Enable Add label if you want text labels to appear with swatches.
- Click Save.
The color swatch filter works best when the filter label matches the color swatch trigger in the theme.
Example:
| Filter label | Color swatch trigger |
|---|---|
| Color | Color |
| Colour | Colour |
| Couleur | Couleur |
If the color filter is created from Shopify native/category metafields, Shopify can provide color or image swatch data. If the color filter is created from text values, Be Yours can use the theme's color swatch configuration or matching swatch files.
Recommended setup for custom color values:
- Go to Online Store > Themes.
- Open Theme settings.
- Open Color swatches.
- Add custom swatch rules.
Example:
Black:#000000
White:#ffffff
Navy Blue:navy-blue.png
Rose Gold:rose-gold.png
8. Set the Maximum Number of Filter Values
The Maximum items to show setting controls how many filter values appear before the theme shows a “Show more” style option.
Example:
| Setting value | Result |
|---|---|
| 6 | Shows 6 values first, then hides the rest behind show more. |
| 10 | Shows 10 values first. |
| 20 | Shows up to 20 values first. |
Recommended value:
| Store type | Suggested value |
|---|---|
| Simple catalog | 6 |
| Medium catalog | 8–10 |
| Large catalog | 10–20 |
Note:
In Be Yours, the collection metafield below can override the global section setting for a specific collection:
theme.filter_max_items
This is useful when one collection needs to show more or fewer filter values than other collections.
9. Optional: Create a Collection-Specific Filter Limit Metafield
Be Yours can read a collection metafield to override the maximum number of visible filter values for a specific collection.
Metafield used by the theme:
theme.filter_max_items
To create this metafield:
-
From your Shopify admin, go to Settings > Metafields and metaobjects.
-
Select Collections.
-
Click Add definition.
-
Enter the metafield name.
Example:
Filter max items -
Shopify will automatically recommend a Namespace and key.
-
Click the suggested Namespace and key value if you need to edit it manually.
-
Set the namespace and key to:
theme.filter_max_items -
Select Integer as the content type.
-
Click Save.
Then add a value to a collection:
-
Go to Products > Collections.
-
Open the collection.
-
Scroll down to the Metafields area.
-
Enter a number.
Example:
12 -
Click Save.
If this metafield has a value, Be Yours uses it instead of the Product grid section's default maximum item setting for that collection.
10. Add Sidebar Blocks for Vertical Layout
The Product grid section supports extra blocks that can appear in the vertical/sidebar area.
Available sidebar blocks include:
| Block | Purpose |
|---|---|
| Menu | Displays a menu, such as collection links or category links. |
| Text | Displays custom heading and rich text. |
| Image | Displays an image with optional link. |
Recommended use:
| Goal | Recommended block |
|---|---|
| Add category navigation | Menu |
| Add collection note or promotion | Text |
| Add campaign image or banner | Image |
Notes:
- These blocks are best used with the Vertical filter layout.
- If blocks are added and the filter type is not vertical, Be Yours can still render a sidebar area while keeping the main filters in the top area.
- Keep sidebar content short to avoid pushing filters too far down the page.
11. Enable Sorting and Viewing
The Product grid section also includes sorting and viewing controls.
Sorting
Enable Sorting to let customers sort products.
Common Shopify sorting options include:
| Sort option |
|---|
| Featured |
| Best selling |
| Alphabetically, A-Z |
| Alphabetically, Z-A |
| Price, low to high |
| Price, high to low |
| Date, old to new |
| Date, new to old |
Viewing
Enable Viewing to let customers switch between different product grid layouts.
This is useful when your product grid supports multiple layouts, such as different column counts.
Recommended setup:
| Setting | Recommendation |
|---|---|
| Enable sorting | Enabled |
| Enable viewing | Optional |
| Enable sticky filter | Enabled |
12. Preview and Test Filters
After setting up filters, test the collection page.
- Open your storefront.
- Go to a collection page.
- Check that filters appear.
- Select a filter value.
- Confirm that the product grid updates.
- Select multiple filters.
- Test sorting.
- Test the clear/remove filter buttons.
- Test on mobile.
- Test each collection template that uses filters.
Check these scenarios:
| Test | Expected result |
|---|---|
| Select one filter value | Product grid updates with matching products. |
| Select multiple values | Product grid narrows based on filter behavior. |
| Change sorting | Product grid updates without losing selected filters. |
| Remove selected filter | Product grid updates again. |
| Use mobile filter drawer | Filters open and apply correctly on mobile. |
13. Notes and Limitations
Please note the following behavior:
- Filters must be created in the Shopify Search & Discovery app.
- The Be Yours theme can only display filters that Shopify provides to the theme.
- If a collection has more than 5,000 products, Shopify does not display filters for that collection.
- Filter values depend on product data. If products do not have values for a filter source, that filter may not appear.
- Some filter values may not appear if there are too many unique values.
- Metafield filters require metafield definitions and product values.
- Category metafield filters depend on product category and category metafield setup.
- Color swatch filters depend on the filter source and swatch configuration.
- Filtering is controlled separately from product card swatches.
- Third-party filtering apps may override or conflict with the theme's built-in filters.
Troubleshooting
If filters do not display or do not work correctly, please check the following:
- Make sure filters have been added in Search & Discovery > Filters.
- Make sure the collection template uses the Product grid section.
- Make sure Enable filtering is turned on in the Product grid section.
- Make sure the collection has products.
- Make sure the collection has fewer than 5,000 products.
- Make sure products have values for the filter source.
- If using metafield filters, make sure metafield definitions are created under Settings > Metafields and metaobjects.
- If using metafield filters, make sure products have metafield values.
- If color swatches do not appear, check the color swatch trigger and swatch configuration.
- If filters appear but return no products, review the selected filter combination.
- If sorting resets filters unexpectedly, make sure the theme is updated to the latest version.
- If the filter layout looks wrong, test another Filter type: Horizontal, Vertical, or Drawer.
- If using a third-party filter app, check whether it replaces the theme's built-in filters.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System.
शेयर करना:
Bundle Product Section
Beyours Collection Template Sections Guide