How to Add Filters to Shopify’s Mega Menu

To add a filter to a Shopify menu item, you need to make use of Shopify’s built-in filtering functionality, particularly Shopify’s “Product Filtering” feature, which allows customers to filter products on collection pages based on various attributes like product type, price, vendor, size, color, etc. As a Shopify web designer I get asked this a lot so her egoes

How Do You Filter

1. Enable Shopify Filters:
   Shopify has built-in filtering for collections that you can enable if you’re using an Online Store 2.0 theme. Here’s how you can enable product filtering:
   • From your Shopify Admin, go to Online Store > Navigation.
   • Select the Filters section under the Collections and search filters.
   • In this section, you can choose to add filters based on:
     • Product Availability (available in stock or not)
     • Price
     • Product Type
     • Vendor
     • Tags (custom product tags)
     • Other variants like color, size, material, etc.
   • Once you’ve chosen the filters you want to enable, click Save.
2. Use Filters on Collection Pages:
   • Ensure that your theme supports filters (most Shopify Online Store 2.0 themes do). If it does, filters will automatically appear in your sidebar or in the top part of your collection page.
   • You can customize how filters are displayed by modifying your theme settings or editing the relevant sections of the theme’s code (if needed).
3. Add a Filter to a Menu Item (Optional):
   If you want a menu item in your main navigation that links directly to a filtered view (for example, a collection filtered by price or a specific tag), follow these steps:
   • Go to Online Store > Navigation from your Shopify admin.
   • Select the menu where you want to add the filtered link (e.g., Main Menu).
   • Click Add Menu Item.
   • Name your new menu item (e.g., “Under $50” or “Red T-Shirts”).
   • In the Link field, enter the URL for the filtered collection. For example:
     • If you’re filtering by a tag, the URL would be something like /collections/collection-name/tag-name.
     • If you’re filtering by price, you might need to manually add the filtering parameters in the URL (e.g., /collections/collection-name?price=0-50).

   After adding the link, click Add, then Save.

Filter Menu

If you’re adding manual filter links, here’s an example of how you can structure them:

• To filter by price: /collections/collection-name?filter.v.price.gte=10&filter.v.price.lte=50.
• To filter by a specific tag: /collections/collection-name/tag-name.

Customize Filtering in Liquid Code (Advanced)

If your theme doesn’t fully support filters or you need more customization, you might have to manually edit the theme’s Liquid files.

• Go to Online Store > Themes > Edit Code.
• Look for the relevant Liquid files that manage collections and filters, often in the sections/collection-template.liquid or templates/collection.liquid files.
• You can add or modify the filtering options directly in the code if you need more complex filters.

Using Filters in Category Meta Fields

To use filters for category metafields, your products must follow Shopify’s Standard Product Taxonomy for categories and attributes.

For example, if you have a product in the “Shirts” category, you can add category metafields like Colour, Size, and Neckline. Once you set values for these, the Search & Discovery app will show them as filter options.

The Search & Discovery app uses Shopify’s base taxonomy to display all possible values for metafield filters. For example, if a watch product has metafields for “Dial Colour” and “Band Colour”, both filters will show the same set of colour options. However, on your store, only the relevant colours will display (e.g., dial colours for the “Dial Colour” filter and band colours for the “Band Colour” filter).

Custom Metafield Filters

You can also create custom filters using metafields and metaobjects unique to your store. This is helpful if you need filters that aren’t covered by Shopify’s standard categories. For example, if you sell children’s toys, you could create a custom filter for “Age”.

To use a metafield as a filter, you first need to define it. Shopify supports these types of metafields as filters:

• Single line text
• Single line text (List)
• Decimal
• Integer
• True or false
• Metaobject reference
• Metaobject reference (List)

Once the metafields are added to your products, you can select them as filters when editing your store’s filter settings.

If you are looking for the Best eCommerce Website Design Company in Ireland then look no further.