Qwik.Select Docs

Quick Start Guide

Create an account, register your website, and get your first search experience live.

Qwik.select Workflow

Qwik.select works differently from traditional APIs - use our simple 3-step process:

1

Register Site

Create an account and register your website in the Studio dashboard

2

XML Sync URL

Set up an XML feed URL with your product data for automatic syncing

3

Add JS Snippet

Insert the JavaScript snippet on pages where you want search

Step 1: Register Your Site

First, create your qwik.select account and register your website:

  1. 1
    Navigate to qwik.select/studio
  2. 2
    Click "Sign Up" and create your account
  3. 3
    Complete email verification
  4. 4
    Click "Add New Site" in the dashboard
  5. 5
    Fill in your site details:
    • Site Name: Display name for your reference
    • Slug: Unique identifier (e.g., "mystore")
    • Domain: Your website domain

Site Created!

Your site is now registered and ready for data syncing. Note your site slug - you'll need it for the JavaScript snippet.

Step 2: Set Up XML Feed

Qwik.select automatically syncs your product data from an XML feed. Create an XML file with your product data and make it accessible via URL:

products.xml Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="UTF-8"?>
<products>
    <product>
        <UniqueID>353699</UniqueID>
        <name><![CDATA[Wireless Bluetooth Headphones]]></name>
        <manufacturer><![CDATA[Sony]]></manufacturer>
        <description><![CDATA[High-quality wireless headphones with noise cancellation and 30-hour battery life. Premium sound quality with comfortable fit for all-day listening.]]></description>
        <ean>1234567890123</ean>
        <sku><![CDATA[WH-1000XM4]]></sku>
        <price_with_vat><![CDATA[299.99]]></price_with_vat>
        <image><![CDATA[https://yourstore.com/images/headphones-353699.jpg]]></image>
        <link><![CDATA[https://yourstore.com/products/headphones-353699]]></link>
        <category_id>15</category_id>
        <category><![CDATA[Electronics > Audio > Headphones]]></category>
        <quantity><![CDATA[25]]></quantity>
        <availability><![CDATA[In Stock]]></availability>
        <instock><![CDATA[Y]]></instock>
        <weight><![CDATA[0.25kg]]></weight>
    </product>
    <product>
        <UniqueID>353700</UniqueID>
        <name><![CDATA[Gaming Laptop Pro]]></name>
        <manufacturer><![CDATA[ASUS]]></manufacturer>
        <description><![CDATA[Powerful gaming laptop with RTX graphics and 16GB RAM for ultimate gaming performance. High-refresh display with advanced cooling system.]]></description>
        <ean>9876543210987</ean>
        <sku><![CDATA[ROG-STRIX-15]]></sku>
        <price_with_vat><![CDATA[1499.99]]></price_with_vat>
        <image><![CDATA[https://yourstore.com/images/laptop-353700.jpg]]></image>
        <link><![CDATA[https://yourstore.com/products/laptop-353700]]></link>
        <category_id>8</category_id>
        <category><![CDATA[Computers > Laptops > Gaming]]></category>
        <quantity><![CDATA[12]]></quantity>
        <availability><![CDATA[2-3 days]]></availability>
        <instock><![CDATA[Y]]></instock>
        <weight><![CDATA[2.30kg]]></weight>
    </product>
    <!-- More products... -->
</products>

Required Fields

UniqueID

Unique product identifier

name

Product name (CDATA wrapped)

description

Product description (CDATA wrapped)

price_with_vat

Price including VAT

link

Product page URL

image

Product image URL

manufacturer

Product brand/manufacturer (CDATA wrapped)

ean

European Article Number

sku

Stock Keeping Unit (CDATA wrapped)

category

Category path (CDATA wrapped)

Optional Fields

availability

Stock availability status

instock

In stock indicator (Y/N)

category_id

Category ID number

quantity

Stock quantity (CDATA wrapped)

weight

Product weight with unit

Configure in Studio

Once your XML feed is ready, add the URL in your site settings:

1
Go to your site in the Studio dashboard
2
Navigate to "Data Sync" or "XML Settings"
3
Enter your XML feed URL
4
Click "Test Connection" to verify
5
Click "Start Sync" to begin data import

Sync Schedule

Qwik.select automatically syncs your XML feed based on your settings, to keep product data current. Manual sync is also available in the dashboard.

Step 3: Add JavaScript Snippet

Once your data is synced, add the JavaScript snippet to enable search functionality:

Search Implementation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Store</title>
</head>
<body>
    <!-- Your search input field -->
    <input 
        type="text" 
        id="product-search" 
        placeholder="Search for products..."
        autocomplete="off"
    />
    
    <!-- Qwik.select Widget Script -->
    <script type="text/javascript">
    (function() {
        // Load QwikSelectWidget script
        const script = document.createElement("script");
        script.src = "https://cdn.qwik.select/widget-latest.min.js?" + Date.now();

        function initializeWidget() {
            // Only initialize if widget is loaded
            if (window.QwikSelectWidget && window.QwikSelectWidget.default) {
                new window.QwikSelectWidget.default({
                    "id": "your-site-slug",           // Your site slug from Studio
                    "searchInputSelector": "#product-search", // CSS selector for search field
                    "preserveInputStyle": false                    // Preserve original input styling (default: false)
                });
            }
        }

        script.onload = function() {
            // Wait for DOM to be ready before initializing
            if (document.readyState === "loading") {
                // DOM still loading, wait for DOMContentLoaded
                document.addEventListener("DOMContentLoaded", initializeWidget);
            } else {
                // DOM already loaded, initialize immediately
                initializeWidget();
                console.log("Qwik.Select widget initialized.");
            }
        };

        document.head.appendChild(script);
    })();
    </script>
</body>
</html>

Widget Configuration

Required Configuration

1
2
3
4
{
    "id": "your-site-slug",                    // Your site slug from Studio
    "searchInputSelector": "#product-search"   // CSS selector for search field
}

Optional Configuration

1
2
3
4
5
{
    "id": "your-site-slug",                    // Your site slug from Studio
    "searchInputSelector": "#product-search",   // CSS selector for search field
    "preserveInputStyle": false                 // Preserve original input styling (default: false)
}

id: Your site slug identifier from the Studio dashboard

searchInputSelector: CSS selector for your search input field (e.g., "#search", ".product-search")

preserveInputStyle: Set to true to keep your original input styling, false to use widget styling

Platform Integration

Qwik.select offers ready-made plugins for popular e-commerce platforms:

🛒 WooCommerce Plugin

Complete plugin that automatically creates XML feeds and adds search to WooCommerce stores.

  • • One-click installation
  • • Automatic XML generation
  • • Search widget integration
  • • Admin settings panel

🛍️ OpenCart Extension

Extension for OpenCart that handles data syncing and search integration.

  • • Easy installation
  • • Product data exports
  • • Search module
  • • Configuration settings

Plugins are available in the respective platform marketplaces or directly from qwik.select.

Test Your Implementation

Follow these steps to verify everything is working correctly:

Verify XML Sync

  • Check your Studio dashboard for sync status
  • Confirm product count matches your XML
  • Look for any sync errors in the logs

Test Search

  • Open the page with search implementation
  • Type a search term (try a product name)
  • Verify results appear correctly
  • Test clicking on results

Mobile Testing

  • Test on mobile devices
  • Verify touch interactions work
  • Check responsive layout

Implementation Complete!

Your qwik.select implementation is now live! Users can search your products with intelligent results, auto-complete suggestions, and lightning-fast performance.

✨ Real-time Search
🚀 Fast Performance
📱 Mobile Optimized

Next Steps

Enhance your qwik.select implementation with these advanced features:

🎨 Customize Search UI

Design a custom search interface that matches your brand with CSS styling and custom result templates.

📊 View Analytics

Monitor search performance, popular queries, and user behavior in the Studio dashboard.

🔧 Advanced Configuration

Configure search ranking, faceted filters, and "View All Results" URLs for enhanced user experience.

Need Help?

If you run into any issues during setup, our support team is here to help:

Contact Support