We’re using the category filter properly as documented. However, the Shop API’s category filter doesn’t work in the development environment (just like the price filter). The API returns not related products.
Also getting these errors for API calls.
ERROR: Recommended API error
{
“name”: “MiniError”
}
ERROR: Popular API error
{
“name”: “MiniError”
}
That way we can’t actually test if we are showing the right results inside the apps. Any ideas?
hi @cagritorunn
Can you post a simple code snippet showing how you’re using the hook? That will help us to debug your issue.
Thanks
Hi! Thanks for looking into this. @Quique-Shopify Here’s how I’m using the Shop API hooks:
In the development environment, the Shop API returns the same unrelated dummy products regardless of:
Search query text
Category filters
Gender filters
Price filters
All queries return identical products like “Bullet Earring Back”, “MOM - christmas”, “Free Halo Bracelet”, etc.
“const search1 = useProductSearch({
query: “women beauty for valentines”,
first: 200,
filters: {
category: [“beauty”],
gender: “FEMALE”,
available: true,
price: {
min: 0,
max: 25
}
},
sortBy: ‘RELEVANCE’ as const,
});”
**2. useProductSearch without Category Filter
”**const search2 = useProductSearch({
query: “fitness gear valentines gift”,
first: 200,
filters: {
gender: “FEMALE”,
available: true,
price: {
min: 0,
max: 25
}
},
sortBy: ‘RELEVANCE’ as const,
});”
Expected: Fitness-related Valentine’s gifts
Actual: Returns 200 products, but ALL are unrelated (jewelry supplies, earring backs, etc.) - same products for every query
The Problem
Every search query returns the exact same 200 dummy products:
“fitness gear valentines gift” → Same 200 products
“workout equipment romantic partner” → Same 200 products
“gourmet chocolate valentines day” → Same 200 products
“wine gift set couples” → Same 200 products
The API ignores:
Query text differences
Category filters
Gender filters
Price filters
Sample of what every query returns (regardless of search terms):
Bullet Earring Back ($0.33)
MOM - christmas <4368> ($0.50)
Free Halo Bracelet ($0.01)
I Either Drink Coffee or Say Bad Words Screen Print Transfer A28 ($0.50)
Fun Ring He Loves Me Size 9 ($0.05)
These products have no relation to fitness, beauty, valentines, wine, chocolate, etc.
Shop Minis development environment (using npx shop-minis dev)
Testing in iOS Simulator via the dev server
SDK: @shopify/shop-minis-react (latest version)
Is this expected behavior in development, or should the filters/queries work to some degree? Without relevant products, we can’t test if our recommendations logic is working correctly.
Thanks for your help! 
hi @cagritorunn!
I see few issues with the code you provided. Let me try to explain one by one:
"beauty" does not exist. You must use Taxonomy Category GID. So, when I try to reproduce it in my mini, I get null in the search response. See how to filter by category in this other post from the forum like this one.This is the code I used in my tests:
import { ProductCard, List, useProductSearch } from "@shopify/shop-minis-react";
export function App() {
const { products, loading } = useProductSearch({
query: "fitness gear",
first: 10,
filters: {
gender: "FEMALE",
available: true,
price: {
min: 0,
max: 25,
},
},
sortBy: 'RELEVANCE',
})
console.log({ products, loading })
const productRows = products
? Array.from({ length: Math.ceil(products.length / 2) }, (_, i) =>
products.slice(i * 2, i * 2 + 2)
)
: [];
return (
<div className="pt-12 px-4 pb-6">
<h1 className="text-2xl font-bold mb-2 text-center">
Welcome to Shop Minis!
</h1>
<List
items={productRows}
height={600}
showScrollbar={true}
renderItem={(productRow) => (
<div className="grid grid-cols-2 gap-4 p-4">
{productRow.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
)}
/>
</div>
);
}
Hi Caritorunn - If you are getting dummy data then you are checking in a browser console, if you have followed the steps to test in ios simulator then you should be getting real products.
For Category you need to pass the gid of the category which you can find in this documentation - 2025-09 .
During my tests i have found removing the filters to get better results but then you end up with products you don’t need and need to filter them in your app.
Hi @Quique-Shopify , I have a question about useProductSearch need your advice. So my parameter for useProductSearch is something like this:
{
"query": "tech gadgets",
"skip": false,
"first": 10,
"filters": {
"category": [
"gid://shopify/TaxonomyCategory/tg-5-26",
"gid://shopify/TaxonomyCategory/tg-5-25",
"gid://shopify/TaxonomyCategory/se-7-3"
],
"gender": "NEUTRAL",
"minimumRating": 4,
"price": {
"max": 200
}
},
"sortBy": "RELEVANCE"
}
The hook return error with category filter, then I need to remove category, then it return 0 products, then I remove price and minimumRating. For now it return some products, but it’s not really relate to search query. Is there any recommendations from you so I can optimize the parameter? I am not sure how the hook work behind so need your help.
Hi @Quique-Shopify I’ve replicated your exact code example from the forum, and it returns 0 products in my development environment. However, single-word queries DO work.
import { useEffect } from 'react';
import { useProductSearch, ProductCard, List } from '@shopify/shop-minis-react';
export function TestApiPage() {
// TEST 1: Your exact example from the forum
const { products: shopifyExactProducts, loading: shopifyExactLoading } = useProductSearch({
query: "fitness gear",
first: 10,
filters: {
gender: "FEMALE",
available: true,
price: {
min: 0,
max: 25,
},
},
sortBy: 'RELEVANCE',
});
// TEST 2: Slightly different multi-word query
const { products: test2Products, loading: test2Loading } = useProductSearch({
query: "beauty products women",
first: 10,
filters: {
gender: "FEMALE",
available: true,
price: {
min: 0,
max: 25,
},
},
sortBy: 'RELEVANCE',
});
// TEST 3: Same query as TEST 1 but with larger result set
const { products: test3Products, loading: test3Loading } = useProductSearch({
query: "fitness gear",
first: 200,
filters: {
gender: "FEMALE",
available: true,
price: {
min: 0,
max: 25,
},
},
sortBy: 'RELEVANCE',
});
// TEST 4: Single-word query
const { products: test4Products, loading: test4Loading } = useProductSearch({
query: "beauty",
first: 10,
filters: {
gender: "FEMALE",
available: true,
price: {
min: 0,
max: 25,
},
},
sortBy: 'RELEVANCE',
});
// Log all results
useEffect(() => {
if (!shopifyExactLoading) {
console.log('SHOPIFY EXACT EXAMPLE:', {
query: 'fitness gear',
products: shopifyExactProducts,
count: shopifyExactProducts?.length || 0,
titles: shopifyExactProducts?.map(p => p.title) || []
});
}
}, [shopifyExactProducts, shopifyExactLoading]);
useEffect(() => {
if (!test2Loading) {
console.log('TEST 2 (beauty products women):', {
query: 'beauty products women',
products: test2Products,
count: test2Products?.length || 0,
titles: test2Products?.map(p => p.title) || []
});
}
}, [test2Products, test2Loading]);
useEffect(() => {
if (!test3Loading) {
console.log('TEST 3 (fitness gear, first: 200):', {
query: 'fitness gear',
products: test3Products,
count: test3Products?.length || 0,
titles: test3Products?.map(p => p.title) || []
});
}
}, [test3Products, test3Loading]);
useEffect(() => {
if (!test4Loading) {
console.log('TEST 4 (beauty, single word):', {
query: 'beauty',
products: test4Products,
count: test4Products?.length || 0,
titles: test4Products?.map(p => p.title) || []
});
}
}, [test4Products, test4Loading]);
const allLoading = shopifyExactLoading || test2Loading || test3Loading || test4Loading;
if (allLoading) {
return <div>Loading tests...</div>;
}
// Render using your List component pattern
const shopifyProductRows = shopifyExactProducts
? Array.from({ length: Math.ceil(shopifyExactProducts.length / 2) }, (_, i) =>
shopifyExactProducts.slice(i * 2, i * 2 + 2)
)
: [];
return (
<div className="p-6">
<h1 className="text-2xl font-bold mb-4">API Test Results</h1>
<div className="space-y-6">
{/* Your exact example */}
<div className="border p-4 rounded">
<h2 className="font-bold mb-2">Shopify's Exact Example: "fitness gear"</h2>
<p>Products returned: {shopifyExactProducts?.length || 0}</p>
{shopifyExactProducts && shopifyExactProducts.length > 0 ? (
<List
items={shopifyProductRows}
height={400}
showScrollbar={true}
renderItem={(productRow) => (
<div className="grid grid-cols-2 gap-4 p-4">
{productRow.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
)}
/>
) : (
<p className="text-red-600">No products returned</p>
)}
</div>
{/* Other test results */}
<div className="border p-4 rounded">
<h2 className="font-bold mb-2">TEST 2: "beauty products women"</h2>
<p>Products returned: {test2Products?.length || 0}</p>
</div>
<div className="border p-4 rounded">
<h2 className="font-bold mb-2">TEST 3: "fitness gear" (first: 200)</h2>
<p>Products returned: {test3Products?.length || 0}</p>
</div>
<div className="border p-4 rounded">
<h2 className="font-bold mb-2">TEST 4: "beauty" (single word)</h2>
<p className="text-green-600">Products returned: {test4Products?.length || 0}</p>
{test4Products && (
<div className="mt-2">
<p className="text-sm">Sample titles:</p>
<ul className="list-disc pl-5 text-xs">
{test4Products.slice(0, 5).map(p => (
<li key={p.id}>{p.title}</li>
))}
</ul>
</div>
)}
</div>
</div>
</div>
);
}
Summary of Results
I tested 4 different query patterns using your exact code structure: (I am using iOS simulator not chrome or safari)
Your Exact Example: query “fitness gear” with first: 10 → Returns 0 products
TEST 2: query “beauty products women” with first: 10 → Returns 0 products
TEST 3: query “fitness gear” with first: 200 → Returns 0 products
TEST 4: query “beauty” with first: 10 → Returns 10 products (SUCCESS)
The only difference between the tests is the query text. Single-word queries work, but multi-word queries (including your exact example) return 0 products.
Questions
Is this expected behavior in the development environment? Your example code returns 0 products for me.
Should only single-word queries work in dev? Or is something wrong with my setup?
Will multi-word queries work in production? We can’t test our app properly without knowing if this is a dev-only limitation.
how you log in browser when i run npm start there no any option to run in browser