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

The widget is displayed in modal mode: a click into the e-shop's search input opens a results window over the page, with its own search input. The e-shop's input only serves to open the widget. The page behind the window is dimmed and does not scroll while the window is open.

On desktop the window is centred; when its content is taller than the screen, the whole window scrolls. On mobile (screens narrower than 768 px) the window slides up from the bottom as a bottom sheet: the search input stays pinned at the top and only the content below it scrolls. On mobile the filters open from the filters button in a separate bottom panel.

Templates

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

The layout determines the panel's features and arrangement. The widget uses the Pro layout — a full result surface with filters (price, categories, facets), sorting, paging and the product code on the card.

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 Pro Soft and Pro Flat behave identically and differ only visually.

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. For a query Pro requests at most 96 products, 20 categories and 8 suggestions and pages through them in the browser, 12 products per page on desktop and mobile alike.

The e-shop has no say in these numbers: they belong to the layout and are the same for every e-shop and every theme.

Appearance

Appearance is not configured per e-shop at runtime. Colours, typography, spacing, corner radius and what a product card shows — the product code and the stock status included — are part of the theme and are built into the widget bundle. The widget does not take any of them from the server-side settings, so they cannot be changed without a new widget release.

An e-shop that needs its own palette or font therefore gets a bespoke theme instead of an override: we prepare it from your design and it ships with the next release. The match highlight colour is part of the theme as well, so it is tuned together with the rest of its palette.

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.