Adding a Wishlist to a Shopify Fashion Theme (With or Without an App)

Why add a wishlist to a Shopify fashion store?

A wishlist lets shoppers save pieces they like without buying immediately, which suits fashion, where people browse over several visits and wait for payday or a restock. It gives you a repeat-visit hook and a signal of which products draw interest.

Shopify themes rarely include a wishlist by default. You can add one through an app or custom code, and the right choice depends on whether shoppers must be logged in and whether you want to email them about saved items.

Should I use a wishlist app or custom code?

Use an app when you need saved lists tied to customer accounts, reminders and analytics. Use custom code when you want a light, fast, guest-friendly wishlist with no monthly fee. The trade-off is features against speed and cost.

• App: account-linked lists, back-in-stock or price-drop emails, dashboards; adds scripts and a subscription.
• Custom, local storage: works for guests, no cost, tiny footprint; lists live in one browser and are not shared across devices.
• Custom, account-linked: possible, but saving to a customer account needs a backend or app proxy, so it is more work.

How does a local-storage wishlist work?

A local-storage wishlist saves the product handles a shopper hearts into the browser's storage, and a wishlist page reads those handles and displays the products. No server or database is involved, so it is fast and free.

The limitation is that the list belongs to one browser. If the shopper clears data or switches device, the list is gone. For many fashion stores that is acceptable, since the goal is to help a shopper come back to items on the same phone.

How do I add the heart button and script?

Add a button to the product card and product page with the product handle in a data attribute, then a small script toggles that handle in local storage.

<button type="button" class="wish" data-handle="{{ product.handle }}" aria-pressed="false" aria-label="Save {{ product.title | escape }} to wishlist">♡</button>

const KEY = 'wishlist';
const read = () => JSON.parse(localStorage.getItem(KEY) || '[]');
const write = (list) => localStorage.setItem(KEY, JSON.stringify(list));

document.addEventListener('click', (e) => {
  const btn = e.target.closest('.wish');
  if (!btn) return;
  const handle = btn.dataset.handle;
  const list = read();
  const next = list.includes(handle) ? list.filter((h) => h !== handle) : [...list, handle];
  write(next);
  btn.setAttribute('aria-pressed', String(next.includes(handle)));
});

On page load, loop through the buttons and set aria-pressed for handles already saved, so the hearts show the right state.

How do I build the wishlist page?

Create a page template with an empty container, read the saved handles, and fetch each product from Shopify's /products/{handle}.js endpoint, then render a card for each one.

const grid = document.querySelector('#wishlist-grid');
const items = await Promise.all(
  read().map((h) => fetch(`/products/${h}.js`).then((r) => (r.ok ? r.json() : null)))
);
grid.innerHTML = items.filter(Boolean).map((p) =>
  `<a href="${p.url}"><img src="${p.featured_image}" alt="${p.title}" loading="lazy"><span>${p.title}</span></a>`
).join('');

The endpoint returns a product's title, price, images and URL as JSON. Products that have been deleted return an error, which the code filters out so the page never shows a broken card.

What are the limits of a no-app wishlist?

A no-app wishlist cannot follow a shopper across devices, cannot email them about saved items and gives limited analytics. If those matter to your store, an app or an account-linked custom build is the better route.

For most small fashion stores a local-storage wishlist is enough to start with, and it can be replaced later without changing the product page design. Other no-app additions are covered in product filtering and size charts, and theme selection in what to look for in a dark fashion theme. To have a wishlist built and styled for your store, email me or see my Shopify work.