The first step necessary to implement the services provided by QuarticOn is access to the Customer Panel. You can create an account yourself or contact us to provide login credentials.

1. Insert the QuarticOn script

Attach the main personalised script to the page code. This script, in a non-personalised form, looks like this:

<script type="text/javascript">
(function() {
var _qS = document.createElement('script');
_qS.type = 'text/javascript';
_qS.async = true;
_qS.src = '//';

The correct code, generated especially for you, can be downloaded from the Customer Panel. You can find instructions on how to do this here.

2. Share with us your products

We need to collect all information about your products for the search to work properly.

The easiest and recommended way is to provide us with an XML file (so-called feed) containing the full catalog of products from the shop.

Add product feed

We currently support feed in the popular Google Merchant standard. If your shop allows you to generate such a file, download its URL and insert it in the QuarticOn administration panel.

Detailed information on entering the feed into the system can be found here.

Attention! Remember to select Quartic XML (AWS S3 / Lambda) as the directory format.

If you do not have a Google Merchant file, you can create your own XML with the structure below:

Example of implementation

<title>My product name</title>
<categories>Category 1 / Category 1.1 / Category 1.1.1</categories>

Thanks to transaction tracking, you get additional information on the effectiveness of website search. In the customer panel we will show you which phrases and which products generate:

  • best conversion,

  • the most numerous sales,

  • top sales

from search.

On the thank you page, add the following script to the page code. We add changes at the end of the <body> </body> section:

<script type="text/javascript">
var upsParams = upsParams || [];
upsParams.push(['transaction', 'SCRIPT_TRANSACTION_ID']);

The script collects and processes the following dynamic variables:

  • transaction – the unique ID of the transaction registered in the shop,

  • user – the ID of the user who made a purchase; if the user is not logged in, pass the empty value (upsParams.push(['user', '']);),

  • product – a unique product ID that matches the ID provided in the product tag,

  • price – the price of the product,

  • quantity – the number of product pieces.

To ensure the script works correctly, the appropriate variables must be passed:

  1. SCRIPT_TRANSACTION_ID – unique transaction ID

  2. SCRIPT_USER_ID – specifying the variable is optional; if user_id is available after logging into the shop as a customer, insert it here, if not, leave the string empty

  3. /* SCRIPT_LOOP_START */ – here you need to create a loop that will jump over all purchased products and extract the following data from them:SCRIPT_PRODUCT_ID – unique product ID, must match the catalog dataSCRIPT_PRICE – unit price of the productSCRIPT_QUANTITY – the number of purchased pieces of a given product

  4. /* SCRIPT_LOOP_END */ – end of the loop


The consistency of product ID throughout the shop is the foundation of analytics quality. Therefore, the product ID should be unambiguous and unique, assigned to only one product. The product should appear in the entire system under the same ID.

Product variant support

By product variants we mean the same product in different versions, e.g. Viksta cabinet in different colours. White and black cabinet are two different variants of the same product.

  • If the choice of variant entails a change of product ID and URL, then each variant is treated as a separate product.

  • If the selection doesn’t change the product ID, all variants are treated as one product, regardless of the chosen variant.

4. Add search engine to the site

When you don't have a search engine

Where you want the search box to appear, add the code:

<div class="qon-tiny-smart-search" />

When you want to change the search engine

In this case, delete the current search box and add an item:

<div class="qon-tiny-smart-search" />

Then it can be styled according to the guidelines from the section Customise visualisation (optional).

5. Check a search engine in preview mode

Contact QuarticOn and tell us that the place for the search engine is ready. Then, we will provide you with information on how to test the search engine and you will be able, for example, to adapt its visualisation to your needs.

6. Customise visualisation (optional)

Our search engine goes to you along with the default template. However, if you want, you can customise the appearance of individual elements to your needs.

To do this, override CSS styles for selected classes describing search engine pieces. Below, for your convenience, you will find a list of elements forming individual parts of the search engine together with HTML code.

Main elements

The search engine consists of two basic elements that are divided into smaller parts.

  • Autocomplete container – so-called small search engine which we usually place in the page header. Consists of:

  1. search box with button,

  2. loader,

  3. handy search results.

  • Search result container (SERP – search engine result page). Consists of:

  1. a headline with information about the searched phrase and the number of results,

  2. a sidebar to narrow down your search results,

  3. search result lists with pagination options.

Customising the look

Below you will find the HTML code with a description of the elements and classes used in the templates listed above.

Autocomplete container

<div class="qon-tiny-smart-search">
<div class="autocomplete-search-container">
<input type="search" autocomplete="off" placeholder="
Enter the search phrase" class="autocomplete-search-input">
<button type="button" class="autocomplete-search-button">Search</button>
<div class="loader-container">
<div class="loader"></div>
<div class="results-container">
<div class="results-element">
<article class="single-search-result">
<a href="${}" class="link qon-click-link">
<div class="card">
<div class="card-image">
<img src="${image}" class="image" alt="${product.title}">
<div class="card-content">
<h1 class="title">${product.title}</h1>
<p class="price">${product.price} ${product.currency}</p>
<div class="card">
<a class="more-results-link">See more search results</a>

SERP container

<section class="qon-smart-search">
<h1 class="result-header">
<span class="search-label">Search results for</span>
<span class="qon-smart-search-result search-phrase">suitcase</span>
<span class="result-count search-result">(351 results)</span>
<header class="serp-search-container">
<input type="search" autocomplete="off" placeholder="what are you looking for" class="serp-search-input">
<button type="button" class="serp-search-button">Search</button>
<aside class="qon-filters-wrapper" style="display: flex;">
<div class="qon-filters-header-container">
<h2 class="qon-filters-header">Filter</h2>
<button class="show-filters active">Filter</button>
<button class="hide-filters">×</button>
<button class="show-results">Show products</button>
<button class="remove-filters" style="display: none;">
<span>Clear filters</span>
<nav class="qon-filters-container">
<div class="filter-group category0-group">
<h2 class="filter-group-title">Category</h2>
<ul class="qon-filters-list">
<ul class="filters-list">
<li class="filters-item">
<label class="qon-smartsearch-checkmark-container">
<input type="checkbox" class="single-filter">
<span class="qon-smartsearch-checkmark"></span>
<span class="text">Luggage</span>
<span class="filters-item-count">(351)</span>
<div class="filter-group price-group">
<h2 class="filter-group-title">Cena</h2>
<form class="qon-price-filters-form">
<input type="text" class="qon-filters-item-min" placeholder="From" value="">
<input type="text" class="qon-filters-item-max" placeholder="To" value="">
<button style="display: none" type="submit">Submit</button>
<div class="results-container">
<div class="sort-container" style="display: flex;">
<label class="sort-label">Sort:</label>
<div class="sort-element-wrapper">
<select class="sort-element ">
<option value="default">By default</option>
<option value="titleAsc">Alphabetically - From A to Z</option>
<option value="titleDesc">Alphabetically - From Z to A</option>
<option value="priceAsc">Price going up</option>
<option value="priceDesc">Price going down</option>
<div class="results-element">
<article class="single-search-result">
<a href="${}" class="link qon-click-link">
<div class="card">
<div class="card-image">
<img src="${image}" class="image" alt="${product.title}">
<div class="card-content">
<h1 class="title">${product.title}</h1>
<p class="price">${product.price} ${product.currency}</p>
<div class="pagination-container">
<a href="#" class="single-page active single-page-number" data-page="0">1</a>
<a href="#" class="single-page single-page-number" data-page="1">2</a>
<a href="#" class="single-page next-page">&gt;</a>

The default template style sheet can be found here:

The template structure is fixed for the mobile and desktop versions, and adaptation to different sizes of devices is based on @media queries.

7. Start off!

At this stage, we are ready to start. Contact QuarticOn and confirm that we can enable Smart Search for all users of your e-shop.

8. Go to the panel: analyse the results, add synonyms

Log in to:


In the Customer Panel, you can not only track search engine results, e.g. the number of searches, the most popular phrases and products. Thanks to CTR, conversion and sales data, you can easily draw conclusions and optimise the marketing activities of your shop (e.g. advertising campaigns, remarketing).

Data are presented broken down into searches with autocomplete and SERP in any time range.

On the desktop, you will find charts:

  • number of searches;

  • most popular phrases;

  • autocomplete vs SERP;

  • phrases with the highest sales;

  • phrases without results;

  • phrases with the most sales;

  • most frequently clicked phrases.

In the phrase report, you will find:

  • phrase CTR,

  • conversion,

  • number of performed transactions, as well as the volume and value of search sales.

The product report includes:

  • the number of views, clicks, CTR and conversion of each product that was found in the search results,

  • the number of transactions carried out, as well as the volume and value of product sales.


Thanks to the phrase synonymisation function, you will quickly increase the search efficiency in your shop.

How to use it? If you see frequent repetitive phrases in search statistics that have no results, add a synonym for them. E.g. users search for the phrase "pendant", meanwhile, all pendants in your shop have the professional name "necklace" in the product name. "Pendant" gives zero results in the search engine. Just add a new synonym, enter "pendant" as the base word and "necklace" as a synonym.

From now on typing "pendant" in the search engine will return search results for "necklace" revealing the full range of your products to users.

The user searches and you view their activities in the Customer Panel and optimise your shop based on this data.

Did this answer your question?