> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```html theme={null}
<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.

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