Customize the widget
Everything visible to your shoppers is configurable from Search Widget in your dashboard. Changes save instantly and the widget re-fetches its config on the next page load (cached 1 hour in the browser; use window.SkryxWidget.reload() to force-refresh from the console).
# Theme presets
| Preset | Best for |
|---|---|
| Light | Default — clean white with soft shadow |
| Dark | Dark stores or dark-mode sites |
| Minimal | No shadow, tight borders — feels native |
| Rounded | Friendly stores — 14px radius, soft shadow |
| Compact | Dense catalogues — tighter spacing |
Each preset sets a coordinated CSS variable bundle (background, text, muted text, border, shadow). Pick one and override --skryx-primary with the colour picker.
# Primary colour
The colour picker drives --skryx-primary — used for:
- "Show all results" button background
- Featured product price
- Hover hint on category counts
Pick your brand accent. The widget automatically darkens the hover state by 8%.
# Layout panels
Toggle which dropdown columns render:
- Suggestions — popular completions from your search log (last ~5min worth of trending prefixes)
- Categories — top facet values from the result set (auto-detects a
category/categories/cat/collectionfield in your schema) - Featured product — your #1 result, rendered as a large tile with image
- Products grid — positions 2..N (your "Products to show" setting)
Hide what's not useful. A small store with 50 SKUs probably doesn't need categories; a large catalogue might want all four.
# Product card fields
Choose what each grid card shows:
| Field | What you'll see |
|---|---|
| Image | 48×48 thumbnail (from image_url / image / thumbnail) |
| Title | 2-line truncated, with highlighted match |
| Price | Right-aligned, bold, with currency |
| Stock badge | Red "Out of stock" if in_stock is false |
The widget is defensive about field naming. Common variants are auto-detected so a Shopify catalogue and a custom catalogue both render correctly without remapping.
# Behaviour
| Setting | Default | What it does |
|---|---|---|
| Min characters | 2 | Don't search before this many chars |
| Debounce (ms) | 300 | Wait after last keystroke to fire |
| Show all URL | /search?q={query} |
Where "Show all results" navigates |
| Placeholder | "Search products..." | Visible inside the input |
| No-results msg | "No products found" | Shown when query returns 0 hits |
The URL template uses {query} as the placeholder — automatically URL-encoded. Examples:
/search?q={query}(WordPress / generic)/?s={query}(WooCommerce default)/search?query={query}(Shopify)https://shop.com/results.html?q={query}(full URL also works)
# Branding footer
The "Powered by Skryx" footer link is:
- Required on Free — drives our growth flywheel; appears as a small grey link in the dropdown footer
- Removable on Starter+ — toggle off in the Branding section
When you upgrade from Free to a paid plan your previously-chosen preference is restored automatically (we keep your stored preference even when it's enforced-on).
# Custom CSS (advanced)
The widget runs inside a Shadow DOM so your site's CSS can't touch it — but neither can custom CSS from your dashboard. For brand-deeper customization (rounded image corners, custom typography, hover micro-animations), reach out to support and we'll either ship the knob in a future release or schedule a custom build for Enterprise tenants.