Skip to main content

Syncing Wishlist Across Web and App

Keep Tapcart Wishlist in sync between your online store and app with heart buttons and a web wishlist page.

Web Wishlist keeps a logged-in shopper's saved items consistent between your online store and your Tapcart app. Save a product on web, and it appears in the app. Save in the app, and it appears on web. You can add heart buttons while browsing, a dedicated wishlist page, or both.

The web option is the Wishlist v2: account-keyed lists toggle in the Mobile Wishlist integration. That is what enables web and app to share the same list.

For the original in-app wishlist setup, see Tapcart Advanced Wishlist.

How it Works

When a logged-in shopper saves or removes an item on web or in the app, Tapcart updates the wishlist tied to their Shopify customer account. Web and app both read from that same list.

  • Shoppers must be logged in. Guest wishlists on web are not unified with the app.

  • Older in-app lists that lived only on the device are not visible on web, and they do not migrate automatically when you turn on Wishlist v2.

What shoppers experience

  • One wishlist across web and app. Logged-in shoppers see the same saved items on your storefront and in the Tapcart app.

  • Heart buttons. Shoppers can add or remove items from product cards and product pages while browsing. Hearts appear filled when an item is already saved.

  • Wishlist page. Shoppers can view and manage saved items on a web wishlist page, add items to cart from the list, and land on a page you can link from emails or campaigns.

  • Logged-in only. Hearts and unified lists require a logged-in customer. Guest lists on web are not shared with the app. Theme editor previews as a guest, so hearts only appear on the live store when a customer is logged in.

Requirements

  • Connect Mobile Wishlist in the Tapcart dashboard under Integrations.

  • Turn on Wishlist v2: account-keyed lists (required for web and mobile wishlist sync) and select Update Integration. If this setting is off, web and app wishlists will not stay in sync.

  • Your app must be on Tapcart React Native release 21.8.0 or newer. If you are unsure, contact your AM or LiveChat.

Choose your web experience

You can enable either option, or both. Shopify does not have a native wishlist block, so most merchants start with hearts only.

  • Hearts only (recommended to start): Enable the Tapcart Wishlist Buttons app embed. Shoppers save on web and view items in the app. This is full two-way sync, with no web page for the list and no App Studio layout required.

  • Page only: Shoppers can view and manage saved items on a web page, without heart buttons while browsing.

  • Hearts + page: Shoppers save while browsing and manage the list on a dedicated page.

Configuring Wishlist Sync

Enable heart buttons on Shopify theme

  1. In Shopify admin, open the theme editor.

  2. Go to App embeds.

  3. Turn Tapcart Wishlist Buttons on.

  4. Enter your Tapcart App ID.

    1. Open the Tapcart dashboard

    2. Click the shop name (top right) → Settings

    3. In App Settings, scroll to the Tapcart CLI / Application ID section

    4. Copy the App ID

  5. Optionally adjust heart position and color, product-page button visibility, or CSS selector overrides if hearts do not appear on your theme.

  6. Save the theme.

Important: An enabled embed with a blank App ID fails silently. Hearts will not appear without an App ID. Always fill it in.

If you publish temporary "drop" themes by duplicating a base theme, enable the embed on the base theme you copy from, then spot-check after the first publish.

Enable the wishlist page in Shopify theme

The Tapcart Wishlist app block renders your App Studio web layout in an iframe. These App Studio blocks are supported on web:

  • Wishlist List: the list of wishlists

  • Wishlist Grid: the items inside one wishlist

  • Wishlist Favorites, Wishlist Create, Wishlist Delete, Wishlist Rename, Wishlist Rename Link, and Wishlist Add Item

  • Add Item to Wishlist component

These blocks work on web, but they are built for the app. Plan to style the web layout so it matches your storefront before you publish it as a customer-facing page.

  1. In App Studio, publish a web layout for your wishlist screen using the blocks above.

  2. In the Shopify theme editor, add the Tapcart Wishlist app block to a page (for example, /pages/wishlist).

  3. In the block settings, set the App Studio page ID. This is preferred over a layout ID, so the page still works after you publish again.

  4. Save and publish.

Verify sync

  1. Log into your storefront as a customer.

  2. Save a product on web (heart button or wishlist page).

  3. Open the Tapcart app while logged into the same customer account.

  4. Confirm the item appears in Wishlist.

You can also reverse the test: save in the app, then confirm the item appears on web while logged in.

Headless storefronts

If you do not use a Shopify theme, skip the app embed and block. Allowlist your storefront origins under Integrations → Mobile Wishlist → Allowed Web Origins (headless), then add the Wishlist SDK. See Wishlist SDK for Headless Storefronts.

Troubleshooting

Web wishlist does not show the app's lists

Confirm Wishlist v2: account-keyed lists is on in the Mobile Wishlist integration. Lists that lived only on the device are not visible on web.

Hearts do not appear on product cards

Confirm the Wishlist Buttons embed is on, the App ID is filled in, and the shopper is logged in. Hearts do not show in the theme editor preview, because that preview is a guest session. For unusual themes, try the card-selector override in the embed settings.

Nothing happens for a shopper

Confirm the shopper is logged in on both web and app. Web Wishlist is logged-in only by design.

More Questions

Have more questions about web Wishlist? We're happy to help. Reach out through LiveChat on your Tapcart Dashboard or email us at [email protected].

Did this answer your question?