Documentation
Home Documentation Merchant API
Size guide in a sheet

Size guide in a sheet

A "Size guide" link that opens a bottom sheet with a reference table. The sheet content is described in the block itself, so nothing has to be loaded separately. Handy for clothes and footwear.

Where to put it

An HTML insert on the product card. Built-in sheets work in blocks on the home screen, on the product card and in stories.

The code

HTML 
<a data-mobius="bottomsheet.open('size-guide')"
   style="display:inline-block;color:#1D8673;text-decoration:underline;cursor:pointer;">
  Size guide
</a>

<bottomsheet id="size-guide" height="70%">
  <div style="padding:16px;">
    <h3 style="margin-top:0;">Size guide</h3>
    <table style="width:100%;border-collapse:collapse;">
      <tr><th style="text-align:left;padding:8px;border-bottom:1px solid #eee;">Size</th>
          <th style="text-align:left;padding:8px;border-bottom:1px solid #eee;">Chest, cm</th></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">S</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">88-94</td></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">M</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">95-101</td></tr>
      <tr><td style="padding:8px;border-bottom:1px solid #eee;">L</td>
          <td style="padding:8px;border-bottom:1px solid #eee;">102-108</td></tr>
    </table>
    <p style="color:#7A7A7A;margin-top:12px;">Measure around the widest part of the chest.</p>
  </div>
</bottomsheet>

How it works

  • The <bottomsheet> tag is not visible on the page by itself: it is a container holding the sheet content.
  • A link with data-mobius="bottomsheet.open('size-guide')" opens the sheet with that content. The value in brackets is the container id.
  • The height="70%" attribute sets the sheet height.

How to adapt it

  • Replace the content inside <bottomsheet> with your own table or text.
  • The id must match in the link and in the tag. If there are several sheets on a page, give them different ids.
  • For a full-screen window instead of a sheet, use the <modal> tag and the modal.open command:
HTML 
<a data-mobius="modal.open('care')">Care instructions</a>

<modal id="care" title="Care instructions">
  <div style="padding:16px;">Wash at 30°. Do not bleach.</div>
</modal>

Commands used

Updated 04.09.2026 18:04
Was this page helpful?