Envie
ReferenceComponents

<envie-list>

Renders saved items into the LIGHT DOM, so the theme's own CSS applies with no

Renders saved items into the LIGHT DOM, so the theme's own CSS applies with no shadow piercing. Two rendering modes, because two audiences:

  1. card-section — ask the SHOP to render each card, via Shopify's Section Rendering API (/products/{handle}?section_id=…). The markup is the theme's own, so the wishlist matches the rest of the store with nothing to style. This is the path a merchant gets from the theme editor, where they can pick the section but cannot edit any Liquid.
  2. <template slot="item"> — clone the markup the integrator supplies. Full control, for the custom-code path.

Without a section, the API returns identity only, so title and image come from the shop's own /products/{handle}.js. Either way Envie stays out of the catalog-sync business and nothing here can go stale. Price formatting belongs to the theme, which has Liquid's money filters and the shop's currency; this component never guesses at it.

Attributes

AttributeDescription
page-sizeRender at most this many items. Omit for all.
share-tokenRender a shared list instead of the shopper's own. Falls back to ?list= in the URL, which is what share links carry.
card-sectionTheme section handle to render each card with. Wins over the template when both are present.
emptyReflected when there is nothing to show, for envie-list[empty].
loadingReflected until the first render completes.

Events

EventDescription
envie:rendered
envie:error
undefined

For the full styling contract — state attributes, tokens, and the rules behind them — see the theming guide.

On this page