English

Slovenčina
Čeština

English

Slovenčina
Čeština

Appearance

Units and Sorting ​

Units and sorting are two tools for managing how products are shown and ordered in the store. This guide shows you how to set them up and manage them.

Units ​

Units are the measurement units in which products are sold or measured. They make sure prices and quantities are displayed correctly.

Path: Catalog › Products › Units

INFO

If you do not see Units in the menu, switch it on in System › Store features.

Unit examples ​

  • Piece — individual items (refill, T-shirt, etc.)
  • Kilogram — weights (flour, sugar, etc.)
  • Litre — liquids (oil, water, etc.)
  • Metre — length (fabric, wire, etc.)
  • Square metre — area (home textiles, wallpaper, etc.)

Unit table ​

In Catalog › Products › Units you see a table of units with a search field. Columns:

  • Unit Name — name and abbreviation (pcs, kg, l, m, m²)
  • Unit Type — Standard or Measurement
  • Conversion Settings — for measurement units with a conversion set up, the conversion to the base unit (e.g. 1 g = 0.001 kg)
  • Status — whether the unit is active
  • ⋯ — row menu with Edit and Delete

The How do unit types work? button in the header opens a short guide.

Creating a new unit ​

Path: Catalog › Products › Units › Create Unit button

The Create Unit button in the page header opens a dialog with the form. When you are done, confirm with Create Unit.

Unit name ​

The name of the unit, for example:

  • Piece
  • Kilogram
  • Metre
  • Litre

This field is required and is shown in the store next to the product.

Abbreviation ​

The short form of the unit name, for example:

  • Piece → pcs
  • Kilogram → kg
  • Metre → m
  • Litre → l
  • Square metre → m²

The abbreviation is shown next to the product price.

Unit type ​

Choose the unit type:

  • Standard — for countable things (T-shirt, book, flower, etc.). When ordering, the customer picks a count: 1, 2, 3...
  • Measurement — for units of measure (kilogram, metre, litre). Used as the product's measurement unit to show a unit price (e.g. price per kg).

Conversion settings (measurement units only) ​

For a measurement unit you choose whether:

  • This is a base unit — e.g. kg, l, m; other units convert into it, or
  • Converts into another unit — e.g. g → kg, ml → l. Then fill in:
    • Base Measurement Unit — the unit it converts into (e.g. kg for grams)
    • Conversion Ratio — e.g. 100 g to kg = 0.1; 1 ml to l = 0.001

Sort Order ​

A number that sets the order in which units appear in the dropdown. Lower numbers come first.

Example:

  • Piece: 1
  • Kilogram: 2
  • Litre: 3

Active ​

Tick this option to make the unit available in the store. Unticked units are hidden but can be activated again.

Editing a unit ​

Path: Catalog › Products › Units › in the unit's row, ⋯ menu › Edit (or click the unit name)

The Edit Unit dialog opens. You can change the name, abbreviation, type and order. When done, click Update Unit.

Deleting a unit ​

Path: Catalog › Products › Units › in the unit's row, ⋯ menu › Delete

After clicking Delete and confirming in the dialog, the unit is deleted. If the unit is assigned to products or variants, the system does not allow deleting it — you first have to remove it from those products.

How units relate to products ​

In Creating Products - Step 4: Pricing Tab you choose a unit for each product. Examples:

  • Product: Bread — unit: Piece
  • Product: Flour — unit: Kilogram
  • Product: Carpet — unit: Metre
  • Product: Oil — unit: Litre

Sorting Options ​

Sorting options decide how a customer can sort the products in the listing. Examples: by price (lowest/highest), by newness, by popularity.

Path: Catalog › Products › Configuration › Sorting Options

Sorting option list ​

In Catalog › Products › Configuration › Sorting Options you see the list of options. Each row has:

  • a status dot — click to Activate or Deactivate the option
  • the name of the sorting option and a Default badge on the default one
  • below the name, the sort field and direction (and the system key)
  • a pencil icon (Edit) and a ⋯ menu with Set as Default and Delete

Change the order of the options by dragging the rows (drag-and-drop). The Preview Page button in the header opens the product listing in the store.

Creating a new sorting option ​

Path: Catalog › Products › Configuration › Sorting Options › Create New button

The Create Sorting Option page opens. Fill in the fields and save with Create in the floating bar at the bottom.

Key (created automatically) ​

The key is generated automatically from the chosen field and direction — you do not enter it in the admin and it does not change after creation.

Sort Order ​

A number that sets the order in the dropdown. Lower numbers come first.

Label (multilingual) ​

The name the customer sees, for example:

  • By price — lowest first
  • By price — highest first
  • Newest
  • Most popular

Field ​

Choose the product field to sort by:

  • Date added — by the date the product was created
  • Date updated — by the date of the last change
  • Product name — by name (A–Z)
  • Price — by price
  • Views — by how many times customers viewed the product
  • Average rating — by the rating in reviews
  • Sales — by sales
  • Availability (in stock first) — products in stock before sold-out ones

Direction ​

Choose the direction:

  • Ascending (lowest first, A–Z, 1–9)
  • Descending (highest first, Z–A, 9–1)

Examples:

  • Price + Ascending — from cheapest to most expensive
  • Price + Descending — from most expensive to cheapest
  • Date added + Descending — newest products first

Is Active ​

Tick it to offer this sorting option in the store. Unticked options are hidden.

Is Default ​

Tick it to select this option automatically when a customer opens a product page. The default sorting is usually by sales or by newness. Only one option can be the default.

Prioritize In-Stock Items ​

Tick it to show products that are in stock before sold-out products with this sorting.

Editing a sorting option ​

Path: Catalog › Products › Configuration › Sorting Options › pencil icon (Edit) or click the name

The form opens. You can change every field except the key. When done, click Update in the floating bar at the bottom (undo the changes with Discard).

Deleting a sorting option ​

Path: Catalog › Products › Configuration › Sorting Options › in the row, ⋯ menu › Delete

After clicking Delete and confirming, the sorting option is deleted.

Order of the sorting options ​

Grab a row and drag it to its new place. The order is saved automatically.

Product Listing Configuration ​

The product listing configuration decides how products are shown on category and search pages.

Path: Engage › Design › Navigation & layout › Listing Configuration

The page has the tabs Layout, Header, Descriptions and Category menu. Save changes with Save Configuration in the floating bar at the bottom; the Preview Page button opens the listing in the store. You fine-tune the look of the listing (colours, typography, cards, pagination, quick category menu) visually in Canvas — the Open Canvas buttons take you there. Individual categories can have their own values — see Categories.

Layout ​

Products Per Page — how many products are shown on one page. Examples:

  • 12 products — a normal list
  • 24 products — a large list
  • 50 products — a very large list

A higher number means fewer clicks on "Next page", but the page takes longer to load.

Infinite scroll — when on, more products load automatically as the customer scrolls down (instead of pagination).

Scroll to products — scrolls the page automatically to the products section when it loads (past the hero section).

Items Per Row (Mobile), Items Per Row (Tablet), Items Per Row (Desktop) — how many products are shown side by side:

  • desktop — usually 3, 4 or 5
  • tablet — usually 2 or 3
  • mobile — usually 1 or 2

Sidebar Configuration — how the sidebar with filters and navigation is shown:

  • Static (Always Visible) — the sidebar is always visible
  • Closable (Toggle Button) — the sidebar can be opened/closed with a button
  • Default Open — whether the closable sidebar is open when the page loads

Pagination ​

The Pagination type is set in Canvas (Engage › Design › Canvas): open the product listing and in the Grid and paging panel choose the Pagination type. In the same place you also adjust the pagination colours and rounding.

  • Numbered pages — classic page numbers (default)
  • Show-more button — a button that loads more products, together with page numbers

When Infinite scroll is on, pagination is not shown.

  • Page Title and Page Subtitle — the header texts (for each language)
  • Background Image — the banner behind the header; the Is Global switch decides whether it is also used on category pages
  • Show page title, Show page subtitle, Show Product Count

Font sizes, colours and the header height are adjusted in Canvas.

Descriptions ​

  • Top Description — optional text with a heading above the product list (Show Top Description, shortening with Truncate at (characters))
  • Footer Description — optional text with a heading below the product list (Show Footer Description)

For both descriptions the Is Global switch decides whether the description is shown on all category pages (when a category has none of its own) or only on the main products page.

Category menu ​

  • Sidebar Category Menu — Enabled, Position, Closable (can be collapsed/expanded), Default Open and Show Headline
  • Quick category menu — a short category menu above the products; its settings (number of categories, position, visibility, colours) are in Canvas

Sorting configuration examples ​

A typical store setup ​

  1. Bestsellers (default; field Sales, descending) — most purchased products first
  2. Newest — new products first
  3. By price — lowest first — cheaper products first
  4. By price — highest first — more expensive products first
  5. Top rated — products with the highest average rating first

Setup with in-stock priority ​

If you want to prioritize products in stock:

  • Tick Prioritize In-Stock Items for all sorting options
  • As a result, products in stock are shown first

Tips and tricks ​

Units ​

  • Be consistent — if you use "kg", do not use "kilogram" later
  • Do not add too many units — you will end up with dozens you do not need
  • Hide unused units — deactivate them instead of deleting them

Sorting ​

  • Offer the customer at least 3-4 sorting options
  • Keep sorting intuitive — the names should be clear
  • As the default, choose a sorting that shows your best products first (e.g. by number of sales)

Listing configuration ​

  • 12-24 products per page is optimal in most cases
  • Infinite scroll increases time on page but can lower conversions
  • On mobile always use 1-2 products per row

Workflow: How to set up units and sorting ​

Step 1: Create units ​

In Catalog › Products › Units create all the units you will need (Piece, Kilogram, Metre, etc.).

Step 2: Create sorting options ​

In Catalog › Products › Configuration › Sorting Options create the 3-5 most important sorting options.

Step 3: Set up the listing configuration ​

In Engage › Design › Navigation & layout › Listing Configuration set the products per page, sidebar type, etc.

Step 4: Assign units to products ​

When creating products, choose the correct unit in the Pricing tab.

More information ​