Hi @Dropex
I am from Mageplaza - Shopify solution expert.
You're diving into a powerful feature — Shopify Metaobjects — to build custom filters (like new clothing types) on your product category (collection) pages. I'll walk you through this step by step, using Metaobjects to extend product data and show it as a custom filter in your store’s collection filters.
Add "Clothing Type" as a new custom filter using Metaobjects, and make it appear on the collection (category) page.
Step 1: Create a Metaobject Definition
1. Go to your Shopify Admin.
2. Navigate to: Settings > Custom data > Metaobjects
3. Click “Add definition”.
4. Name it something like: Clothing Type.
5. Under Fields, click “Add field”, and configure:
- Name: Name (or Label)
- Type: Single line text (or "Enum" if fixed choices)
- (Optional) Add other fields like icon, description, etc.
6. Enable “Storefronts” and “Custom storefronts” visibility.
7. Save.
Step 2: Add Metaobject Entries (Clothing Types)
1. After saving, go to: Content > Metaobjects > Clothing Type
2. Click “Add entry”.
3. Add different types of clothing:
- T-Shirts
- Hoodies
- Pants
- Jackets
(Add each as a separate entry)
You now have a database of clothing types as Metaobjects.
Step 3: Link Metaobject to Products
You’ll now link a metaobject field to products so you can tag each product with a clothing type.
1. Go to Settings > Custom data > Products.
2. Click “Add definition” (or edit an existing one).
3. Add a new field:
- Name: Clothing Type
- Type: Metaobject (link to the “Clothing Type” definition you made)
- Accepts multiple values? → Leave unchecked unless products can belong to multiple clothing types.
- Enable for Storefronts
4. Save.
5. Now, go to any Product, scroll to Custom data, and you’ll see “Clothing Type”.
6. Select the correct clothing type for that product.
Step 4: Show Clothing Type in Collection Filters
This requires modifying your theme’s filtering system. There are two approaches:
Option A: Use Shopify Search & Discovery App (Easier but Limited)
If you're using Shopify's Search & Discovery app:
- Go to Apps > Search & Discovery
- Choose Filters > Add Filter
- Click “Custom filter”, and select the Clothing Type metafield (it will appear if you set it up correctly).
- Enable it for filtering.
If Metaobjects don’t show here, you’ll need to use Option B.
Option B: Manual Code for Advanced Custom Filtering
This is if you want full control or the metafield is not filterable in Search & Discovery.
- In your theme, go to Edit Code.
- Open main-collection-product-grid.liquid or wherever your collection filters are.
- Inject custom filter logic using Liquid:
{% assign all_types = '' %}
{% for product in collection.products %}
{% if product.metafields.custom.clothing_type %}
{% assign clothing_type = product.metafields.custom.clothing_type.name %}
{% unless all_types contains clothing_type %}
{% assign all_types = all_types | append: clothing_type | append: ',' %}
{% endunless %}
{% endif %}
{% endfor %}
{% assign clothing_type_array = all_types | split: ',' | uniq %}
<div class="custom-filter">
<label for="clothing-type">Clothing Type:</label>
<select id="clothing-type" onchange="handleTypeChange(this)">
<option value="">All</option>
{% for type in clothing_type_array %}
{% if type != '' %}
<option value="{{ type | downcase }}">{{ type }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<script>
function handleTypeChange(select) {
const selected = select.value;
const url = new URL(window.location.href);
url.searchParams.set("clothing_type", selected);
window.location.href = url.toString();
}
</script>
4. On page load or in JS, you can filter collection.products based on the URL param clothing_type.
Please let me know if it works as expected!
Best regards!
