Widget Setup

The wishlist widget is a lightweight script (under 5KB gzipped) that adds heart icons to your product cards and pages. It has zero dependencies and no impact on your store’s performance.

App Embed (recommended)

The simplest way to add the widget is via Shopify’s app embed:

1. Go to Online Store → Themes → Customize
2. Click App embeds in the left sidebar
3. Toggle on SimplerSuite Wishlist
4. Click Save

This automatically loads the widget on every page of your store.

Manual Installation

If you prefer manual control, add the following snippet to your theme’s layout/theme.liquid before the closing </body> tag:

<div
  data-ssw
  data-shop="{{ shop.permanent_domain }}"
  data-customer="{{ customer.id }}"
  data-proxy="/apps/wishlist"
></div>
<script src="https://cdn.simplersuite.co/wishlist/widget.js" async defer></script>

Data attributes

Attribute	Required	Description
data-ssw	Yes	Activates the widget
data-shop	Yes	Your store’s .myshopify.com domain
data-customer	No	The logged-in customer’s ID (blank for guests)
data-proxy	No	App proxy path. Defaults to /apps/wishlist

How it works

1. On page load, the widget reads the wishlist from a cookie (guests) or fetches it from the API (logged-in customers)
2. It finds all product cards and product pages and injects a heart icon
3. Clicking the heart toggles the item in the wishlist with an animation
4. A count badge is updated in the header (if a [data-ssw-count] element exists)
5. API calls only happen on user interaction — no requests on passive page views

Adding a wishlist count badge

To show the number of wishlisted items in your header, add an element with the data-ssw-count attribute:

<a href="/apps/wishlist">
  Wishlist (<span data-ssw-count>0</span>)
</a>

The widget will update the inner text automatically.