Settings and templates

The widget configuration is stored on the server and the widget picks it up at start-up. A change takes effect without touching the e-shop code and without a deployment.

Display mode

mode	behaviour
dropdown	the panel expands below the e-shop's search input; that input stays the only one
modal	results open across the whole screen and the panel has its own search input

On mobile devices dropdown behaves as a bottom sheet pinned to the bottom edge: the search input stays in place and only the panel content scrolls.

Templates

A template is always a pair of layout and theme, for example standard-soft.

The layout determines the panel's features and arrangement:

layout	for	contains
Mini	a narrow input, limited space	a compact product list, categories as pills
Standard	a regular e-shop	image, name and price, a list/grid toggle, a button to reveal more results
Pro	a full result surface	filters (price, categories, facets), sorting, paging, product code on the card
Max	Standard and Pro in one widget	the customer switches between quick and extended search

The theme defines the appearance only — colours, typography and spacing. The universal themes are Soft (branded, with the Metty accent) and Flat (plain and restrained). For an e-shop with its own design we can prepare a bespoke theme that adopts its colours and typography.

Layout and theme are independent, so Standard Soft and Standard Flat behave identically and differ only visually.

Max — quick and extended search

Max is a single widget covering both the dropdown under the search input and a complete result page:

• it opens in the quick (Standard) view with a product list and categories,
• the “Extended search” toggle switches to the Pro view with filters, catalog facets, sorting and paging,
• the “Back to quick search” toggle returns to the original view with the query and filters preserved.

The e-shop therefore does not need a result page of its own.

Result counts

The number of products, categories and suggestions the widget requests is determined by the layout; it is not an e-shop level setting. Mini and Standard show a compact selection, Pro works with a wide selection and pages through it in the browser.

The Pro view exposes these settings:

setting	default	meaning
paging	on	when off, only the first page is shown
page size	15	products per page
products on mobile	5	the mobile view uses a shorter list

Appearance

Beyond the chosen theme, these values can be overridden per e-shop:

setting	range
accent colour and its strong and soft shades	hex #rrggbb
surface, text and muted text colour	hex #rrggbb
font	family name; the widget does not download it, it must be available on the page or in the system
font size	12–20 px
line height	1.0–2.0
corner radius	0–48 px
panel padding	0–48 px
product code on the card	on / off
stock status on the card	on / off

In most cases it is enough to adopt the accent colour and the font from the site. The match highlight colour is derived from the accent colour so that contrast stays sufficient.

Verifying a change before it goes live

Before deployment we can prepare a preview: a link on preview.metty.eu where the widget with a specific configuration is placed on a snapshot of your site. You can judge the result without any change to the production e-shop.