Documentation
Home Documentation Merchant API
Campaign mini-landing

Campaign mini-landing

A ready promotional block for a campaign: a heading, a button to the products, a terms link in a bottom sheet, a Share button and promo code copying. It combines several features in one block.

Where to put it

A block on the home screen. It uses a built-in sheet, so it works fully there, and on the product card and in stories.

The code

HTML 
<div style="border-radius:16px;overflow:hidden;background:#1D8673;color:#fff;">
  <div style="padding:20px;">
    <div style="font-size:22px;font-weight:700;">Discount week</div>
    <div style="opacity:.9;margin-top:6px;">20% off the whole "New in" section with a promo code</div>

    <div style="display:flex;align-items:center;gap:10px;margin-top:16px;">
      <code style="background:rgba(255,255,255,.2);padding:8px 12px;border-radius:8px;
                   font-size:16px;letter-spacing:1px;">WEEK20</code>
      <button id="copy-code"
              style="padding:8px 14px;border:none;border-radius:8px;
                     background:#fff;color:#1D8673;font-weight:600;">
        Copy
      </button>
    </div>

    <a data-mobius="catalog.openSectionFiltered"
       data-params='{"id":"320","title":"Discount week","filter":{"sale":"Y"}}'
       style="display:block;margin-top:16px;padding:14px;border-radius:12px;
              background:#fff;color:#1D8673;text-align:center;font-weight:700;
              text-decoration:none;">
      Go to the products
    </a>

    <div style="display:flex;gap:16px;margin-top:14px;">
      <a data-mobius="bottomsheet.open('terms')"
         style="color:#fff;text-decoration:underline;">Campaign terms</a>
      <a data-mobius="share"
         data-params='{"title":"Discount week, 20% off","url":"https://example.com/sale"}'
         style="color:#fff;text-decoration:underline;">Share</a>
    </div>
  </div>
</div>

<bottomsheet id="terms" height="55%">
  <div style="padding:16px;">
    <h3 style="margin-top:0;">Campaign terms</h3>
    <ul style="padding-left:18px;color:#292929;">
      <li>20% off with the promo code WEEK20.</li>
      <li>Applies to the "New in" section until the end of the week.</li>
      <li>Does not stack with other discounts.</li>
    </ul>
  </div>
</bottomsheet>

<script>
  document.getElementById('copy-code').addEventListener('click', () => {
    Mobius.notification.toast({ title: 'Promo code copied', message: 'WEEK20' });
  });
</script>

What is inside

  • The Go to the products button opens a section with a preset filter, catalog.openSectionFiltered.
  • Campaign terms shows a built-in sheet, bottomsheet.open and the <bottomsheet> tag.
  • Share calls the system sheet, share.
  • Copy shows a toast, notification.toast.

How to adapt it

  • Replace the section ID 320, the headings and the terms text.
  • Change the promo code WEEK20 to your own in three places: in <code>, in the toast and, if needed, in the terms.
  • The address in share is the link to the campaign page.
  • The colour #1D8673 is your brand colour.

Commands used

Updated 04.09.2026 18:04
Was this page helpful?