Customization

URL Filters

Deep-link to filtered search results, build merchandising landing pages, and let your category tiles act as real category filters — all by passing a few query string parameters to the SearchPage.


Overview

The SearchX SearchPage reads filter values from the URL on first load and applies them as the initial state of the result list. This means:

  • A link like /search.html?category=Sneakers lands the user on a page already filtered to sneakers.
  • Marketing campaigns can deep-link to a curated landing page (e.g. /search.html?on_sale=1&price_max=100 for a "Sale Under €100" CTA).
  • Your existing category navigation can act as a real category filter instead of a fuzzy text search.

All examples in this guide use the MOTI fashion demo (fashion.searchxengine.ai). Each example block has a Try it → link that opens the live page in a new tab. Replace the host with your own SearchX storefront URL when adapting the patterns to your own site.

Placeholder — final hero screenshot: MOTI sneakers category landing.

Supported URL parameters

ParameterTypeEffect on the SearchPageExample
querystringFree-text search term?query=jacket
categoryCSV stringFilter by category?category=Sneakers
brandCSV stringFilter by brand?brand=Nike,Adidas
sizeCSV stringFilter by size?size=42
colorCSV stringFilter by color?color=Μαύρο
on_sale1 or true (on) — omit to turn offOnly items currently on sale (matches the On Sale sidebar toggle — products that have a positive sale price below the regular price)?on_sale=1
price_minnumber (currency units)Lower price bound?price_min=50
price_maxnumber (currency units)Upper price bound?price_max=120

Combination rules

The parameters compose naturally so you can build precise queries:

  • Multiple values within one parameter → OR. ?category=Sneakers,Jackets means "Sneakers OR Jackets".
  • Multiple parameters together → AND. ?category=Sneakers&brand=Nike means "Sneakers AND made by Nike".
  • query always ANDs with active filters. ?query=running&category=Sneakers searches the term "running" within the Sneakers category.

Worked examples (MOTI demo)

Each example below links straight to the MOTI demo so you can verify the behaviour live.

1. Single-category landing page

https://fashion.searchxengine.ai/search.html?category=Sneakers

Try it →

The SearchPage opens with the Sneakers category pre-ticked in the sidebar. The user can untick it or add other facets — the filter is interactive, not locked.

2. Multi-brand within a category

https://fashion.searchxengine.ai/search.html?category=Sneakers&brand=Nike,Adidas

Try it →

Sneakers AND (Nike OR Adidas). The two top-of-mind sneaker brands surface together — ideal for a "Top Picks" tile.

3. Search within a category

https://fashion.searchxengine.ai/search.html?query=running&category=Sneakers

Try it →

A text search restricted to a category — useful when you want the user to type but keep the browsing context.

4. Discount + price ceiling

https://fashion.searchxengine.ai/search.html?on_sale=1&price_max=100

Try it →

Items currently on sale priced at €100 or less — the perfect target for a "Sale Under €100" newsletter CTA. The deep-link works whether or not your widget has the On Sale sidebar toggle enabled — see SDK Reference — showOnSaleFacet if you also want the toggle visible in the filter sidebar so shoppers can untick it.

5. Size-specific in-stock page

https://fashion.searchxengine.ai/search.html?category=Sneakers&size=42

Try it →

Useful for stocking emails (e.g. "Size 42 is back in stock"). Combine with brand= for hyper-specific re-engagement.

6. Price range slider seeded from URL

https://fashion.searchxengine.ai/search.html?price_min=50&price_max=120

Try it →

The sidebar price slider opens already positioned at €50–€120. The user can drag it to widen or narrow the range from there.


URL-encoding values with special characters

If a value contains spaces, Greek letters, &, #, ?, +, or other reserved URL characters, you need to URL-encode it before adding it to the link. Otherwise the browser will misread the boundary between parameters and your filter won't apply.

A quick before/after:

Raw valueURL-encoded value
SneakersSneakers (no special characters — no change)
Tommy HilfigerTommy%20Hilfiger
Μαμά & ΠαιδίΜαμά%20%26%20Παιδί
Λευκό/ΜαύροΛευκό%2FΜαύρο

Full URL after encoding:

https://fashion.searchxengine.ai/search.html?category=Μαμά%20%26%20Παιδί

For quick one-off encoding, paste the value into urlencoder.org and copy the encoded output. Most templating engines and CMS link builders also handle encoding automatically — only hand-written HTML links need this step.


Behaviour you should know about

Filters seeded from the URL are loaded as initial state, not as locks. The user can untick a checkbox to remove the filter, drag the price slider to widen or narrow the range, or add new refinements on top of the URL-supplied ones.

"Clear filters" button

Whenever at least one filter is active (URL-supplied or applied by the user via the sidebar), a Clear filters / Καθαρισμός φίλτρων button appears at the top of the Facets sidebar on desktop, and at the top of the filter sheet on mobile.

Clicking it resets every filter — refinements, on_sale, price range, and any in-flight sidebar selections all clear together. The query stays intact, as do any non-filter URL parameters (e.g. utm_source, utm_medium, fbclid).

Placeholder — screenshot: desktop sidebar with the Clear filters button visible above the category facet.
Placeholder — screenshot: mobile filter sheet open with the Clear filters button visible at the top.

Typing a new search clears the filter context

The SearchBar's autocomplete popup always searches the full catalog. When the user submits a search (Enter or "View all results"), the destination URL is built with the filter parameters dropped:

Source URLAfter submitting jacket
/search.html?category=Sneakers/search.html?query=jacket
/search.html?category=Sneakers&brand=Nike&on_sale=1/search.html?query=jacket
/search.html?query=old&utm_source=email/search.html?query=jacket&utm_source=email

Tracking parameters (utm_source, utm_medium, fbclid, ref) are preserved.

Placeholder — before/after screenshot: filtered page → user types a new search → unfiltered results page with the query as the only parameter.

Use cases

Email campaigns

Link straight to a filtered view that matches the campaign creative. The recipient doesn't have to refine — the page is already focused.

  • Newsletter: ?on_sale=1&price_max=100 — Sale Under €100
  • Restock alert: ?category=Sneakers&size=42 — Size 42 sneakers back in stock
  • Brand spotlight: ?brand=Nike,Adidas — Top brands of the week

Landing pages

Static URLs with filter parameters can be linked from blog posts, social media, or other pages on your site. The SearchPage renders the filtered results consistently, which is great for content-led commerce.

Curated lists

Build a curated selection by combining query + brand + price_max. The link itself communicates the curation, and the user can refine from there.

Previous
Event Handling