Ever noticed how shoppers love stores that “just know” what they’re looking for?
That’s the power of smart search and filters.
By customizing Shopify’s built-in search and adding metafield-based filters, you can guide visitors straight to the products they want — faster and more intuitively. This tutorial shows you how to create an advanced search experience using custom Liquid and JavaScript code.
🧠 Why Smart Search Matters
- 🛒 Better User Experience: Shoppers find products faster.
- 💰 Higher Conversions: Quick results reduce bounce rate.
- 🧩 Better Organization: Useful for stores with multiple product categories or custom product attributes (like box materials, sizes, finishes).
1️⃣ Enable Predictive Search Suggestions
Shopify’s Predictive Search API allows you to show results as the user types.
Code Example:
Add this to your theme.liquid or a custom JS file.
<input type="search" id="searchBox" placeholder="Search products..." autocomplete="off">
<div id="suggestions"></div>
<script>
const searchBox=document.getElementById('searchBox');
const suggestions=document.getElementById('suggestions');
searchBox.addEventListener('input',()=>{
const q=searchBox.value.trim();
if(q.length<2){suggestions.innerHTML='';return;}
fetch(`/search/suggest.json?q=${q}&resources[type]=product`)
.then(res=>res.json())
.then(data=>{
const items=data.resources.results.products.map(p=>`<div>${p.title}</div>`).join('');
suggestions.innerHTML=items || "<p>No results found</p>";
});
});
</script>
Why It Works:
Predictive search improves speed and convenience — users see results instantly as they type.
2️⃣ Add Keyword Search for Product Tags & SKUs
By default, Shopify search only looks through product titles and vendors. You can expand it to include tags and SKUs using Liquid.
Code Example:
Edit your search.json.liquid file:
{
"products": [
{% for product in search.results %}
{
"title": "{{ product.title }}",
"sku": "{{ product.variants.first.sku }}",
"tags": "{{ product.tags | join: ', ' }}"
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
}
Why It Works:
It lets customers search by product tag (“eco-friendly”) or SKU — especially useful for packaging and printing products.
3️⃣ Create Custom Product Filters with Metafields
You can create filters for material type, size, or finish using Shopify metafields.
Step 1: Create metafields in your Shopify Admin
- Namespace:
custom - Key:
material - Type: single-line text
Step 2: Display filters on your collection page
<form id="filterForm">
<select name="material">
<option value="">All Materials</option>
<option value="kraft">Kraft</option>
<option value="corrugated">Corrugated</option>
<option value="rigid">Rigid</option>
</select>
</form>
<div id="productGrid">
{% for product in collection.products %}
{% assign mat = product.metafields.custom.material %}
<div class="product" data-material="{{ mat }}">{{ product.title }}</div>
{% endfor %}
</div>
<script>
document.getElementById('filterForm').addEventListener('change',()=>{
const val=document.querySelector('[name="material"]').value;
document.querySelectorAll('.product').forEach(p=>{
p.style.display=(val===''||p.dataset.material===val)?'block':'none';
});
});
</script>
Why It Works:
Adds a real-time filter system — no app required. Great for stores with multiple packaging materials or finishes.
4️⃣ Add Search Highlight Feature
Highlight matching words in search results for better visibility.
Code Example:
function highlight(term, text) {
const regExp = new RegExp('('+term+')', 'gi');
return text.replace(regExp, '<span style="background:yellow;">$1</span>');
}
Use this on your search results page to make matched terms stand out.
5️⃣ Improve Search Result Layout with CSS Grid
Organize your search results cleanly using a grid layout.
Code Example:
.search-results {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
gap: 20px;
}
.search-results div {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
Why It Works:
Looks modern and improves readability across devices.
🎯 Bonus Tip: Combine Filters and Predictive Search
You can combine both features so users can type “kraft” and instantly filter Kraft material boxes — a smooth, interactive experience for packaging stores.
🧩 Real-World Example: PackagingVista or DiscountBoxPrinting
For packaging businesses, you can use metafields to filter by:
- 📦 Box Type (Mailer, Display, Rigid)
- 🌿 Material (Eco, Kraft, Cardboard)
- 🎨 Print Finish (Gloss, Matte, UV)
- 📏 Custom Size Options
This helps users find exactly the box they need in seconds.
💬 Final Thoughts
Smart search and filters aren’t just fancy features — they’re must-haves for serious Shopify stores. Whether you sell clothing or custom boxes, they improve product discovery, speed up navigation, and keep users engaged longer.
