Liquid quickstart

This page takes a Liquid theme from zero to a working wishlist: save buttons on product pages, a wishlist page, and a live count in the header.

Prerequisites

• The Envie app installed on the store. Envie is in early access ahead of its App Store listing — ask us for an install link if you don't have one yet.
• An Online Store 2.0 theme (any theme that supports app blocks — every current theme does).

No API keys are involved anywhere on this page. On a Liquid storefront, requests travel through Shopify's app proxy at /apps/envie and are signed by Shopify itself.

1. Enable the app embed

In the Shopify admin: Online Store → Themes → Customize → App embeds (the puzzle-piece icon) → enable Envie.

The embed loads the components bundle (deferred, non-blocking) and passes it the shop's configuration. Nothing renders yet — that's the next two steps.

The app's home page verifies this step for you: it shows Verified once the embed is live on the published theme.

2. Add a save button to the product page

Still in the theme editor, open a product template: Add block → Apps → Wishlist button, then drag it next to the add-to-cart button.

The block renders an <envie-button> with the product (and selected variant) filled in from Liquid, styled with the appearance settings from the app embed. Prefer your own CSS? Turn off Use Envie's appearance in the block settings and style the bare element — see Theming.

If you'd rather write the tag yourself (in a snippet, a card, anywhere):

<envie-button
  product-id="{{ product.id }}"
  variant-id="{{ product.selected_or_first_available_variant.id }}"
  handle="{{ product.handle }}"
></envie-button>

handle is required — Envie stores identity, not product data, and the handle is how the storefront fetches presentation data later. A hand-written tag is always unstyled: it's yours.

3. Create the wishlist page

1. Online Store → Pages → Add page. Name it "Wishlist". Note the handle (usually /pages/wishlist — the default Envie links to; change it under Settings in the app if you pick another).
2. In the theme editor, open that page's template: Add block → Apps → Wishlist page.

The block renders an <envie-list>. Out of the box it draws product cards from your own theme: set Card section in the block settings to one of your theme's section filenames (for example product-card) and each saved product renders through your theme's own card markup — colors, badges, price formatting and all.

4. Add the header badge

If your header section accepts app blocks: Header → Add block → Apps → Wishlist badge.

Many themes' headers accept no app blocks. For those, the app embed has an Automatic placement section: enable it and the badge is injected next to the cart icon using a CSS selector (defaults cover current Shopify themes; adjustable if yours differs).

5. Verify

On the storefront:

1. Open a product page → the button renders. Click it → it flips to saved instantly.
2. Open /pages/wishlist → the product is there, drawn with your theme's cards.
3. The header badge shows 1.
4. Log in as a customer and save something else: the guest save and the customer's list are merged automatically.

Common mistakes

• Placing the button block without enabling the app embed. The element never upgrades — an inert tag, nothing visible. Step 1 is not optional; the app home page tells you if the embed is off.
• Writing <envie-button> by hand and expecting it to look like the block. Hand-written tags are deliberately unstyled. Add your own CSS, or use the block.
• Forgetting handle on a hand-written tag. The API rejects a save without it — the button will flip back and emit envie:error.
• Renaming the wishlist page without updating the app setting. Share links point at the configured path; a renamed page turns them into 404s. Update Share link path in the app's settings.