Wishlist hearts do nothing until the shopper accepts cookies

01Why the hearts wait for consent

Shopify’s Customer Privacy API keeps each shopper’s answer for four purposes: analytics, marketing, preferences and sale of data. Apps that set cookies read it before they start. A wishlist remembers what someone saved, so wishlist apps such as Swym wait for preferences consent, which Shopify describes as “Cookies that remember customer preferences, such as country or language, to personalize visits to the website” (Shopify, Customer Privacy API).

“Swym relies on the consent status before allowing its standard cookie-based wishlist functionality to operate.”

So wherever your store asks for consent (Shopify’s own banner is active by default only in the UK, the EEA and other regions set up for it), three groups of shoppers get hearts that do nothing: people who declined, people who closed or ignored the banner, and people whose banner never appeared. The page looks normal, nothing shows an error, and the heart is still there to tap.

When the banner itself goes missing

Check the third group first. A banner that should show and doesn’t means nobody in that region can say yes, so the wishlist never works for them. On this Shopify Community thread (Jan 2025) a merchant’s banner stopped appearing and they suspected another script on the page; the replies check the region settings and send them to the theme developer, and the thread ends without a fix. On the store below, the script that hid the banner was one of ours.

The fix that looks right and isn’t

The API has a method, shouldShowBanner(), that returns true when consent “isn’t already set and the visitor is in a region showing consent”. Some wishlist loaders check it: no banner due, no consent needed, so the app starts. That makes a tempting shortcut. Override the method to return false, fire the consent event, and the hearts work.

Don’t. A consent app can read the same method to decide whether to show its banner, and on the store below it did, so the shortcut hid the banner from everyone it applied to. And every other script that listens for the consent event gets one with none of the details it expects. Shopify’s visitorConsentCollected event carries marketingAllowed, analyticsAllowed, preferencesAllowed and saleOfDataAllowed in its detail; a script that reads event.detail.marketingAllowed from a bare event throws an error and stops.

02Check the banner, then ask on the tap

For store owners

1. 1

   Tap a heart with cookies declined

   Open the store in a private window, from a region where your banner shows. Decline the banner, or close it, and tap a heart. If nothing happens, this is your problem.

2. 2

   Check the banner shows where it should

   In Shopify admin, open Settings > Customer privacy, then the cookie banner, and look at Regions (Shopify Help). If a consent app shows your banner instead, check its own region list too. Then visit as a new shopper from one of those regions: the banner should appear.

3. 3

   Make sure shoppers can change their answer

   Shopify’s help says the link to a customer’s preferences is in your store’s policies section, and on the banner whenever it shows. A shopper who declined can then change their mind. Developers ask how to reopen the banner from their own link on this thread (in German, Feb 2024).

4. 4

   Ask your wishlist app what it offers

   Before anyone builds anything. Consentmo’s guide to Swym describes an optional mode that keeps the wishlist on the shopper’s own device instead of in cookies, and a prompt that “may” ask for consent when a shopper uses a wishlist button. On the store below, the app’s consent prompt came in an embed that install didn’t offer.

For developers: ask on the tap

When the wishlist app hasn’t loaded and a heart is tapped, show a small prompt. “Allow and save” records preferences consent only and remembers which heart was tapped; when the app is ready, save that product. setTrackingConsent takes one or more signals at once, so preferences can go on its own (Shopify). Here is the shape of the fix we shipped, generalised:

let pendingHeart = null;

document.addEventListener('click', (event) => {
  const heart = event.target.closest('[data-wishlist-heart]');
  if (!heart) return;
  event.preventDefault();

  if (window.wishlistReady) {
    toggleWishlist(heart);
    return;
  }

  withPrivacyApi((privacy) => {
    if (!privacy || !privacy.setTrackingConsent) return;
    if (privacy.preferencesProcessingAllowed()) {
      queueSave(heart); // consent is in, the app is still starting
      return;
    }
    showPrompt({
      message: 'To save favourites, we need your OK to use functional cookies.',
      allow: 'Allow and save',
      dismiss: 'Not now',
      onAllow: () => {
        queueSave(heart);
        privacy.setTrackingConsent({ preferences: true }, () => {});
      },
    });
  });
});

function withPrivacyApi(callback) {
  const shopify = window.Shopify;
  if (shopify && shopify.customerPrivacy) return callback(shopify.customerPrivacy);
  if (!shopify || !shopify.loadFeatures) return callback(null);
  shopify.loadFeatures(
    [{ name: 'consent-tracking-api', version: '0.2' }],
    (error) => callback(error ? null : window.Shopify.customerPrivacy),
  );
}

let pendingTimer = null;
function queueSave(heart) {
  pendingHeart = heart;
  clearTimeout(pendingTimer);
  pendingTimer = setTimeout(() => { pendingHeart = null; }, 15000); // the app never came
}

// Call this from the wishlist app's own "ready" callback.
function onWishlistReady() {
  window.wishlistReady = true;
  const heart = pendingHeart;
  pendingHeart = null;
  clearTimeout(pendingTimer);
  if (heart && document.contains(heart) && !isSaved(heart)) toggleWishlist(heart);
}

• Grant preferences only. The shopper agreed to a wishlist, not to marketing or analytics.
• Don’t start the wishlist app’s loader yourself. Shopify publishes visitorConsentCollected when consent changes, and an app that waits for consent can pick that up. On the store we fixed, the app loaded at once, with no reload.
• Give up quietly if the app never arrives (a blocked script, a slow connection). Ours drops the pending save after 15 seconds.
• Put the prompt’s words in the theme’s translations, so each language gets its own.
• Never override shouldShowBanner() or dispatch visitorConsentCollected yourself.

03Decline, tap, and check nothing else changed

1. 1

   Decline, then tap

   In a private window, decline the banner and tap a heart. The prompt should open. Choose allow: the heart should fill and the product should be in the wishlist, with no reload.

2. 2

   Check nothing else changed

   In the browser console, Shopify.customerPrivacy.preferencesProcessingAllowed() should now be true, and Shopify.customerPrivacy.marketingAllowed() should still be false.

3. 3

   Accept, then tap

   In a new private window, accept the banner. Hearts should save straight away, with no prompt.

4. 4

   For developers: watch the console as consent changes

   Accept and decline the banner with the console open. No script should throw when the consent event fires.