Wishlist integrates with your Shopify theme through Shopify’s theme app extension system. There’s no manual code to paste — every component is added in the theme editor. This guide explains what each piece does and how they fit together, for developers who want to understand the integration.
App embed
The app embed is a global script that loads on every page of the store. It powers:
Collection page icons — Heart icons on product cards for quick saving
Quick access widget — The floating wishlist icon in the corner of the screen
Confirmation messages — Toast or modal popups when items are saved
Wishlist count badge — Updates the count on the header icon
Turn it on in Theme Editor > App embeds > Wishlist. The embed adds a single script tag to your theme layout, reads its configuration from app metafields, and renders the wishlist UI from there.
Product page button (theme block)
The wishlist button on product pages is a theme app block. It renders an “Add to Wishlist” button that reads the current product and variant from the page context.
Add it in Theme Editor > Product page > Add block > Apps > Wishlist Button. Drop it wherever you want — typically just below the Add to Cart button. The block detects the product ID and selected variant automatically.
Header icon (theme block)
An optional theme block that adds a wishlist icon to the store header. It shows a heart with the saved item count.
Add it in Theme Editor > Header > Add block > Wishlist Icon. This is separate from the floating quick access widget — it lives inside the header section alongside the cart icon.
Customer account extension
Wishlist also adds a section to Shopify’s new customer account portal so logged-in shoppers can view and manage their wishlists from their account. This is a Shopify customer account UI extension, not a theme component.
Turn it on in Settings > Customer accounts > Extensions. Once it’s on, shoppers see a Wishlist link in their account navigation.
How the pieces talk to each other
The app embed script is the core. It tracks wishlist state, calls the wishlist API, and coordinates the other components. The product page button and collection icons send add and remove actions to the embed; the header icon reads the count from the same shared state.
Every storefront component depends on the app embed. Without it, the product page button still renders but the collection icons, floating widget, and confirmation messages won’t appear.