How to Add a Wishlist to Shopify Without an App (2026)

Last updated: November 7, 2026. We tested the code in this guide in a browser before publishing.

In this guide

• Does Shopify have a wishlist?
• Theme code or app?
• Add a wishlist without an app
• Test your wishlist
• Limits of a no-app wishlist
• When to use a wishlist app
• The bottom line
• FAQ

Does Shopify Have a Built-In Wishlist?

No. Shopify themes don’t include a wishlist, so you add one with theme code or an app. The method below uses Shopify’s own Ajax Product API, which lets your store look up a product’s title, price and image from its handle (Shopify Dev Docs).

Should You Use Theme Code or an App?

Start with theme code if you want to test whether shoppers use a wishlist. Move to an app when you want emails, reports or lists that follow the customer.

How Do You Add a Wishlist to Shopify Without an App?

Upload one file, add one line to your theme, add a button to your product page and create a Wishlist page. Work on a copy of your theme first: in Online Store > Themes, click … > Duplicate on your current theme.

Step 1: Upload the wishlist script

1. On the duplicate theme, click … > Edit code.
2. Next to the assets folder, click the + (Add a new file) button and name the file wishlist.js. The exact button label can vary slightly as Shopify updates its code editor.
3. Paste the code below and click Save.

/* Simple Shopify wishlist (saved in the shopper's browser) */
(function () {
  var KEY = 'wishlist';
  var root = (window.Shopify && Shopify.routes && Shopify.routes.root) || '/';

  function read() {
    try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { return []; }
  }
  function write(list) {
    try { localStorage.setItem(KEY, JSON.stringify(list)); } catch (e) {}
  }
  function has(handle) { return read().indexOf(handle) !== -1; }
  function toggle(handle) {
    var list = read();
    var i = list.indexOf(handle);
    if (i === -1) { list.push(handle); } else { list.splice(i, 1); }
    write(list);
    refreshButtons();
    renderPage();
  }

  function refreshButtons() {
    document.querySelectorAll('[data-wishlist-handle]').forEach(function (btn) {
      var saved = has(btn.getAttribute('data-wishlist-handle'));
      btn.setAttribute('aria-pressed', saved ? 'true' : 'false');
      if (btn.closest('.wishlist-item')) { btn.textContent = 'Remove'; return; }
      btn.textContent = saved ? '\u2665 Saved to wishlist' : '\u2661 Add to wishlist';
    });
  }

  function money(cents) {
    var currency = (window.Shopify && Shopify.currency && Shopify.currency.active) || 'USD';
    try {
      return new Intl.NumberFormat(document.documentElement.lang || 'en', { style: 'currency', currency: currency }).format(cents / 100);
    } catch (e) { return (cents / 100).toFixed(2); }
  }

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }

  function renderPage() {
    var grid = document.getElementById('wishlist-grid');
    if (!grid) return;
    var list = read();
    if (!list.length) {
      grid.innerHTML = '<p>Your wishlist is empty.</p>';
      return;
    }
    Promise.all(list.map(function (handle) {
      return fetch(root + 'products/' + encodeURIComponent(handle) + '.js')
        .then(function (r) { return r.ok ? r.json() : null; })
        .catch(function () { return null; });
    })).then(function (products) {
      var html = products.filter(Boolean).map(function (p) {
        var img = p.featured_image ? '<img src="' + esc(p.featured_image) + '" alt="' + esc(p.title) + '" loading="lazy" width="300">' : '';
        return '<div class="wishlist-item">' +
          '<a href="' + esc(p.url) + '">' + img + '<span>' + esc(p.title) + '</span></a>' +
          '<span class="wishlist-price">' + money(p.price) + '</span>' +
          '<button type="button" data-wishlist-handle="' + esc(p.handle) + '"></button>' +
          '</div>';
      }).join('');
      grid.innerHTML = html || '<p>Your wishlist is empty.</p>';
      refreshButtons();
    });
  }

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-wishlist-handle]');
    if (!btn) return;
    e.preventDefault();
    toggle(btn.getAttribute('data-wishlist-handle'));
  });

  document.addEventListener('DOMContentLoaded', function () { refreshButtons(); renderPage(); });
  if (document.readyState !== 'loading') { refreshButtons(); renderPage(); }
})();

It saves the product handles in the shopper’s browser, updates every wishlist button on the page, and builds the Wishlist page from Shopify’s product data.

Step 2: Load the script on every page

1. Open layout/theme.liquid.
2. Find the closing </body> tag near the end of the file.
3. Paste this line just above it, then click Save:

<script src="{{ 'wishlist.js' | asset_url }}" defer></script>

Step 3: Add the button to your product page

1. Go to Online Store > Themes > Customize on the duplicate theme, and switch to Products > Default product.
2. In the product information section, click Add block and choose Custom Liquid.
3. Paste the code below, drag the block under the Buy buttons, and click Save.

<button type="button" class="button button--secondary" data-wishlist-handle="{{ product.handle }}" aria-pressed="false">
  Add to wishlist
</button>

The button button--secondary classes match Dawn-style themes. If the button looks plain in your theme, remove them and style it with your theme’s own button class.

Step 4: Create the Wishlist page

1. In the theme editor, open the page menu at the top, choose Pages, then Create template. Name it wishlist.
2. Remove the default page content section, click Add section, choose Custom Liquid, paste the code below and click Save.

<div id="wishlist-grid" class="page-width"></div>
<style>
  #wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
  #wishlist-grid img { width: 100%; height: auto; display: block; margin-bottom: 8px; }
  #wishlist-grid .wishlist-price { display: block; margin: 4px 0 8px; }
</style>

3. Go to Online Store > Pages > Add page, title it Wishlist, and in the Theme template box choose wishlist. Click Save.
4. Add the page to your menu: Online Store > Navigation > Main menu > Add menu item, and link it to the Wishlist page.

How Do You Test Your Wishlist?

1. Preview the duplicate theme and open any product.
2. Click Add to wishlist. The button should change to ♥ Saved to wishlist.
3. Reload the page. The button should still show as saved.
4. Open the Wishlist page. You should see the product’s image, name and price, with a Remove button.
5. Click Remove and check the product disappears.
6. Test on your phone too, then publish the duplicate theme.

What Are the Limits of a Wishlist Without an App?

It’s a simple, browser-based list, so it can’t do what wishlist apps do.

• One browser only: a list saved on a phone won’t appear on a laptop, even when the shopper signs in.
• Can be lost: clearing browser data or using private browsing removes the list.
• No emails: it can’t tell shoppers when a saved product is back in stock or on sale.
• No reports: you can’t see which products shoppers save most.
• Product page only: adding hearts to collection pages means editing your theme’s product card code, which differs by theme.

When Should You Use a Wishlist App Instead?

When the wishlist becomes part of your marketing, not just a convenience. Choose an app if you want to:

• Keep lists synced when shoppers sign in on any device.
• Send back-in-stock and price-drop alerts for saved products.
• See which products are saved most, to plan stock and promotions.
• Add wishlist hearts to collection pages without editing theme code.
• Let shoppers share their wishlist, for example as a gift list.

Many wishlist apps have a free plan, so you can try one on a duplicate theme and compare it with the theme-code version above.

The Bottom Line

You can add a working wishlist to Shopify without an app in about 20 minutes: one script, one theme line, a product page button and a Wishlist page. It’s ideal for testing whether your shoppers want a wishlist. When you need lists that sync across devices, back-in-stock emails or reports, switch to a wishlist app.

Frequently Asked Questions

Does Shopify have a wishlist feature?

No. Shopify themes don’t include a wishlist. You can add one with theme code, as in this guide, or with a wishlist app.

Can I add a wishlist to Shopify without an app?

Yes. Upload a small JavaScript file, add a button to your product page with a Custom Liquid block, and create a Wishlist page. The list is saved in the shopper’s browser.

Does a no-app wishlist work for guests?

Yes. Shoppers don’t need an account. The trade-off is that the list stays in one browser and doesn’t follow them to other devices.

Will this work with the Horizon or Dawn theme?

Yes. It uses Custom Liquid blocks and sections, which Online Store 2.0 themes such as Horizon and Dawn support. You may need to adjust the button’s style to match your theme.

Can a wishlist send back-in-stock emails?

Not without an app. Wishlist apps can email shoppers when a saved product is back in stock or drops in price.

Related Reading

• How to Add a Custom Text Field to a Shopify Product Page
• How to Add Dropdowns, Radio Buttons and Checkboxes in Shopify
• Shopify BFCM 2026: The Complete Guide

Update Log

November 7, 2026: First published. Code tested in a browser: saving, reloading, the Wishlist page and removing products.

Sources

• Shopify Dev Docs: Ajax Product API
• Shopify Dev Docs: Ajax API (locale-aware URLs)