Using the wishlist

This walkthrough takes a fresh install to a working wishlist: a button in your loops, a place for shoppers to view saved items, and guest lists that survive until login.

1. Turn it on and choose placements

Open the Shortlist menu, confirm Enable wishlist is on, and pick your placements — shop loop, single product page, My Account tab. Most stores enable all three. If you want logged-out shoppers to keep a list, leave Allow guests on; turn it off to send them to login instead.

2. Set labels and the variation hint

Set the add and remove button labels to your store voice. Set the variation hint too — on variable products the button stays disabled with this hint until the shopper picks options, so they save the exact variation rather than the generic product.

3. Give the wishlist a home

Shoppers need somewhere to view their list. You have two options that work together:

• The My Account → Wishlist tab (turn on the placement), optionally with a live item count next to the menu label.
• A dedicated wishlist page — pick an existing page from the dropdown, or click Create wishlist page to publish one with the [shortlist] shortcode in a click.

4. Confirm on the storefront

1. Open Shop and click Add to wishlist on a simple product — the button toggles to the remove state and the change is announced via aria-live. Every button for that product on the page stays in sync.
2. Open a variable product — the button shows your hint and stays disabled until options are picked, then saves that variation.
3. Open the My Account tab or the dedicated page — saved items appear in the grid with the columns you enabled.

5. Test the guest merge

If guests are allowed, log out, save a product, then log back in. The guest list, kept in a cookie, merges into the account automatically — there is no manual import step for shoppers.

Shortcode and block

Show the current shopper’s list anywhere with the shortcode:

[shortlist]

The Shortlist Wishlist block produces the same server-rendered output in the block editor. If your dedicated page already contains [shortlist], turn off Show list on page so the grid is not output twice.

How the toggle behaves

The button toggles membership over AJAX with no page reload. Logged-in customers are keyed by user ID; guests by the session cookie. The toggle is a real <button> with aria-pressed, so its state is clear to assistive technology, and all buttons for the same product update together after a toggle.

Performance and accessibility notes

Shortlist’s own front-end is vanilla JavaScript, deferred and loaded in the footer — no jQuery. The toggle button reserves its space, so switching between add and remove states never reflows the page: no Cumulative Layout Shift. Wishlist changes and the My Account count are announced to screen readers and update live, and the empty list shows a friendly state with a Browse products link rather than a blank panel.