Documentation
Home Documentation Merchant API
Promo banner with navigation

Promo banner with navigation

A banner with a picture, a heading and a button. On tap it opens a catalogue section. Suits the home screen and a block on the product card.

Where to put it

The home screen, or an HTML insert on the product card.

The code

HTML 
<a data-mobius="catalog.openSection('320', 'New this season')"
   style="display:block;border-radius:16px;overflow:hidden;text-decoration:none;
          background:#1D8673;color:#fff;">
  <img src="https://example.com/banners/new-season.jpg"
       alt="New this season" style="display:block;width:100%;height:auto;">
  <div style="padding:16px;">
    <div style="font-size:18px;font-weight:700;">New this season</div>
    <div style="opacity:.85;margin-top:4px;">The fresh collection is in stock</div>
    <span style="display:inline-block;margin-top:12px;padding:10px 18px;
                 background:#fff;color:#1D8673;border-radius:10px;font-weight:600;">
      See the section
    </span>
  </div>
</a>

How to adapt it

  • catalog.openSection('320', 'New this season'): replace 320 with your section ID and the text with its title.
  • src="...": point at your own picture.
  • The colour #1D8673: replace it with your brand colour.

Variations

To make the banner lead to a particular product, change the command:

HTML 
<a data-mobius="catalog.openProduct('15')" style="...">...</a>

To lead to discounted products with a preset filter:

HTML 
<a data-mobius="catalog.openSectionFiltered"
   data-params='{"id":"320","title":"Sale","filter":{"sale":"Y"}}'
   style="...">...</a>

Commands used

Updated 04.09.2026 18:04
Was this page helpful?