Drops

Use this component to show a shopper your drops anywhere on your storefront. It renders the same drop card as the campaigns section of your loyalty page, so you can use drops without building your loyalty page in the Theme Editor. The card shows the drop most relevant to the shopper, and names up to three other live or upcoming drops underneath it. When there is more than one drop, an “All drops” link opens a window listing all of them.

Code

<div data-lion-drops></div>

Behaviour

The component renders for every shopper, logged in or not:

Shopper state	What renders
Not logged in	A running or upcoming drop, locked, with a link to join your program.
Member with a drop of their own	That drop: upcoming, live, sold out, or the last one they took part in.
Member with no drop of their own	A running or upcoming drop for another tier, locked and labelled with the tiers that can claim it.
No drop applies	Nothing. The component renders no markup.

The card updates without a page reload when an upcoming drop opens or a drop ends. The card uses the styling you set for drops in the Theme Editor, and is wrapped in an element with the lion-campaigns class. Unlike the loyalty page section, it has no heading.

Drops are available on Shopify stores whose subscription includes them, through the plan or the Drops add-on. Otherwise this component renders nothing.

LoyaltyLion SDK

Simple components

Embeddable components

Modal components

Code

Behaviour

​Code

​Behaviour

Code

Behaviour