Comment on page
Promotional Badge
The promotional badge is displayed on the image of a product card (typically in a collection or on a product page) to indicate which offer applies to the product.
This widget is currently available for Beta customers only
- Message: contains the lines of text displayed in the badge
- Line: a line of text that is displayed in the badge
<la-dn-promotional-badge-placeholder product-handle="product-1">
<la-dn-promotional-badge>
<la-dn-promotional-badge-message token="ABCD" horizontal-position="left" vertical-position="bottom" shape="rectangle" size="small">
<la-dn-promotional-badge-line position="1">20% off</la-dn-promotional-badge-line>
</la-dn-promotional-badge-message>
</la-dn-promotional-badge>
</la-dn-promotional-badge-placeholder>
<la-dn-promotional-badge-placeholder product-handle="product-2">
<la-dn-promotional-badge stack="horizontal">
<la-dn-promotional-badge-message token="ABCD" horizontal-position="left" vertical-position="bottom" shape="circle" size="medium">
<la-dn-promotional-badge-line position="1">20% off</la-dn-promotional-badge-line>
</la-dn-promotional-badge-message>
<la-dn-promotional-badge-message token="EFGH" horizontal-position="left" vertical-position="bottom" shape="circle" size="small">
<la-dn-promotional-badge-line position="1">Free gift</la-dn-promotional-badge-line>
</la-dn-promotional-badge-message>
</la-dn-promotional-badge>
</la-dn-promotional-badge-placeholder>
<la-dn-promotional-badge-placeholder product-handle="product-3" z-index="999">
<la-dn-promotional-badge>
<la-dn-promotional-badge-message layout="1" token="ABCD" horizontal-position="left" vertical-position="bottom" shape="vector" size="large">
<la-dn-promotional-badge-line position="1">20</la-dn-promotional-badge-line>
<la-dn-promotional-badge-line position="2">%</la-dn-promotional-badge-line>
<la-dn-promotional-badge-line position="3">off</la-dn-promotional-badge-line>
</la-dn-promotional-badge-message>
</la-dn-promotional-badge>
</la-dn-promotional-badge-placeholder>
Last modified 2mo ago