Comment on page
Ninja Cart™
A smart drawer cart that helps Shopify merchants to increase average order value by intelligently proposing offers to the customer based on the content of the cart.
The Ninja Cart™ can contain the following sections:
- Header [required]
- Announcement bar
- Progress bar
- Cart items [required]
- Product image
- Promotional badge
- Quantity input
- Subscription upsell
- Price section
- Free gift picker
- Frequently bought together
- Order bumps
- Subtotal section
- Terms and conditions
- Checkout button [required]
- Payment methods
<la-dn-drawer-cart attached="false" border="rounded" mode="cart" state="ready">
<la-dn-drawer-cart-header>
<la-dn-drawer-cart-header-item-count count="5" icon="bag" hide="true">
</la-dn-drawer-cart-header-item-count>
<la-dn-drawer-cart-header-title label="Cart" position="left">
</la-dn-drawer-cart-header-title>
<la-dn-drawer-cart-header-close-button position="right">
</la-dn-drawer-cart-header-close-button>
<la-dn-drawer-cart-header-back-to-cart label="Back to cart" icon="arrow-left">
</la-dn-drawer-cart-header-back-to-cart>
</la-dn-drawer-cart-header>
<la-dn-drawer-cart-announcement-bar animation-on-cycle="slide">
<la-dn-drawer-cart-announcement-bar-message token="ABCD" icon="discount">
Free shipping on orders over $50
</la-dn-drawer-cart-announcement-bar-message>
<la-dn-drawer-cart-announcement-bar-message token="EFGH" icon="gift">
Add $20 to receive <a href="/products/gift">a gift</a>
</la-dn-drawer-cart-announcement-bar-message>
</la-dn-drawer-cart-announcement-bar>
<la-dn-drawer-cart-progress-bar animation-on-progress="true">
<la-dn-drawer-cart-progress-bar-goals order="2" prefix="REWARDS" border="true">
<la-dn-drawer-cart-progress-bar-goal token="ABCD" unlocked="true">
Free shipping
</la-dn-drawer-cart-progress-bar-goal>
<la-dn-drawer-cart-progress-bar-goal token="EFGH" unlocked="false">
Free gift
</la-dn-drawer-cart-progress-bar-goal>
</la-dn-drawer-cart-progress-bar-goals>
<la-dn-drawer-cart-progress-bar-inner order="1" percentage="80" bar-height="small">
</la-dn-drawer-cart-progress-bar-inner>
<la-dn-drawer-cart-progress-bar-next-goal order="3">
Add $20 to receive <a href="/products/gift">a gift</a>
</la-dn-drawer-cart-progress-bar-next-goal>
</la-dn-drawer-cart-progress-bar>
<la-dn-drawer-cart-items state="loading">
<la-dn-drawer-cart-item variant-id="12345" line-item-key="12345:abcdef" token="ABCD" is-gift="false">
<la-dn-drawer-cart-item-image url="/images/product1.png">
<la-dn-promotional-badge>
<la-dn-promotional-badge-message 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-drawer-cart-item-image>
<la-dn-drawer-cart-item-header>
<la-dn-drawer-cart-item-title order="1" url="/products/product-1">Product title</la-dn-drawer-cart-item-title>
<la-dn-drawer-cart-item-vendor order="0" visible="true">Vendor</la-dn-drawer-cart-item-vendor>
<la-dn-drawer-cart-item-options order="2">
<la-dn-drawer-cart-item-option name="Color" value="Green"></la-dn-drawer-cart-item-option>
<la-dn-drawer-cart-item-option name="Size" value="Small"></la-dn-drawer-cart-item-option>
</la-dn-drawer-cart-item-options>
<la-dn-drawer-cart-item-properties order="3">
<la-dn-drawer-cart-item-property name="Engrave" value="Custom text"></la-dn-drawer-cart-item-property>
<la-dn-drawer-cart-item-property name="Finish" value="Copper"></la-dn-drawer-cart-item-property>
</la-dn-drawer-cart-item-properties>
</la-dn-drawer-cart-item-header>
<la-dn-drawer-cart-item-quantity disabled="false" border="rounded" input="number" min-value="0" max-value="10" list-max-value="">
</la-dn-drawer-cart-item-quantity>
<la-dn-price-placeholder line-item-key="12345:abcdef" location="drawer-cart" level="product">
</la-dn-price-placeholder>
<la-dn-drawer-cart-item-remove-button visible="true" icon="bin">
</la-dn-drawer-cart-item-remove-button>
<la-dn-drawer-cart-item-upsell visible="true">
Subscribe and save up to 15%
</la-dn-drawer-cart-item-upsell>
<la-dn-drawer-cart-item>
</la-dn-drawer-cart-items>
<la-dn-drawer-cart-gifts>
<la-dn-drawer-cart-item gift="true" gift-picker="inline|panel" gift-collection="12345">
<la-dn-drawer-cart-item>
</la-dn-drawer-cart-gifts>
<la-dn-drawer-cart-upsells>
<la-dn-drawer-cart-upsell>
<la-dn-drawer-cart-item-image url="/images/product1.png">
<la-dn-promotional-badge>
<la-dn-promotional-badge-message 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-drawer-cart-item-image>
<la-dn-drawer-cart-item-header>
<la-dn-drawer-cart-item-title order="1" url="/products/product-1">Product title</la-dn-drawer-cart-item-title>
<la-dn-drawer-cart-item-vendor order="0" visible="true">Vendor</la-dn-drawer-cart-item-vendor>
<la-dn-drawer-cart-item-options order="2">
<la-dn-drawer-cart-item-option name="Color" value="Green"></la-dn-drawer-cart-item-option>
<la-dn-drawer-cart-item-option name="Size" value="Small"></la-dn-drawer-cart-item-option>
</la-dn-drawer-cart-item-options>
<la-dn-drawer-cart-item-properties order="3">
<la-dn-drawer-cart-item-property name="Engrave" value="Custom text"></la-dn-drawer-cart-item-property>
<la-dn-drawer-cart-item-property name="Finish" value="Copper"></la-dn-drawer-cart-item-property>
</la-dn-drawer-cart-item-properties>
</la-dn-drawer-cart-item-header>
<la-dn-price-placeholder line-item-key="12345:abcdef" location="drawer-cart" level="product">
</la-dn-price-placeholder>
<la-dn-price-placeholder line-item-key="12345:abcdef" location="drawer-cart" level="product">
</la-dn-price-placeholder>
<la-dn-drawer-cart-upsell>
</la-dn-drawer-cart-upsells>
</la-dn-drawer-cart>
Last modified 2mo ago