Documentation
Home Documentation Merchant API
Search shortcuts

Search shortcuts

A set of chips, small buttons carrying popular queries. A tap opens the product list for the query or a ready selection. It helps steer shoppers towards the right products straight from the home screen.

Where to put it

A block on the home screen or on the product card.

The code

HTML 
<div style="margin:12px 0;">
  <div style="font-size:16px;font-weight:700;margin-bottom:10px;">Popular</div>
  <div style="display:flex;flex-wrap:wrap;gap:8px;">

    <a data-mobius="catalog.search('coffee')"
       style="padding:8px 14px;border-radius:20px;background:#F2F2F2;
              color:#292929;text-decoration:none;">Coffee</a>

    <a data-mobius="catalog.search('tea')"
       style="padding:8px 14px;border-radius:20px;background:#F2F2F2;
              color:#292929;text-decoration:none;">Tea</a>

    <a data-mobius="catalog.search('sweets')"
       style="padding:8px 14px;border-radius:20px;background:#F2F2F2;
              color:#292929;text-decoration:none;">Sweets</a>

    <a data-mobius="catalog.openSection('320', 'New in')"
       style="padding:8px 14px;border-radius:20px;background:#1D8673;
              color:#fff;text-decoration:none;">New in</a>

    <a data-mobius="catalog.openSectionFiltered"
       data-params='{"id":"320","title":"On sale","filter":{"sale":"Y"}}'
       style="padding:8px 14px;border-radius:20px;background:#1D8673;
              color:#fff;text-decoration:none;">On sale</a>

  </div>
</div>

How to adapt it

  • Put your own queries into catalog.search('...'): what a shopper would actually type into search.
  • The selection buttons use catalog.openSection (a section) and catalog.openSectionFiltered (a section with a filter). Replace the IDs and titles.
  • Colour is a convenient way to separate queries from selections.

Commands used

Updated 04.09.2026 18:04
Was this page helpful?