Install on Shopify

Drop the Skryx Search Widget into any Shopify theme in 3 minutes.

Install on Shopify

The widget works on any Shopify theme (Dawn, Sense, Refresh, plus all third-party + custom themes). It attaches to the theme's existing search input — no theme code rewrite needed.

# Step 1 — Edit theme code

In your Shopify admin: Online Store → Themes → ⋯ → Edit code.

Open layout/theme.liquid. Scroll to the bottom and paste this immediately above </body>:

<script src="https://cdn.skryx.io/widget.js"
        data-key="pk_live_YOURKEY"
        data-target='input[type="search"]'
        defer></script>

Save. The change is live across your store.

# Common search input selectors

If input[type="search"] doesn't match, use the selector for your theme:

Theme Selector
Dawn predictive-search input[type="search"]
Sense #PredictiveSearch-search
Refresh input[name="q"]
Streamline .search__input
Most third-party input[type="search"] works

You can paste a CSS selector here that matches your theme's mobile + desktop input — the widget attaches to whichever element matches first.

# Step 2 — Restrict the key to your domain

In your Skryx dashboard, API Keys → edit the key → Allowed origins, add:

  • https://your-store.myshopify.com (the canonical Shopify domain)
  • https://your-custom-domain.com (if you have one)

The widget endpoint rejects any other origin server-side.

# Step 3 — Match your brand

In Search Widget, pick the Rounded preset and set the primary colour to your brand accent. Tick whichever dropdown panels match your catalogue depth — large catalogues benefit from all four columns, small stores can hide categories.

# App Block alternative (Online Store 2.0)

If you'd rather avoid editing theme code, you can wrap the snippet in a custom App Block — but the bare <script> tag is simpler and works on every theme version.

# Troubleshooting

  • Widget doesn't appear → check data-target matches your theme's actual search input. Open DevTools, document.querySelector('input[type="search"]') should return an element.
  • Wrong-looking dropdown → your theme might be wrapping the search input in a parent with overflow: hidden. The widget renders on <body> (positioned absolutely) to dodge this — if it's still clipped, file a ticket and we'll add a z-index knob.
  • CORS error → add your store domain to Allowed origins as described above.
esc