Wishlist Page Block

The Tapcart Wishlist Page block shows a logged-in shopper the items they saved, on your own website. It's the same wishlist they see in your Tapcart app. It uses your theme's fonts, colors, and buttons.

Before you start

Ask your Tapcart contact to turn on Wishlist v2 for your app.
Your theme must be an Online Store 2.0 theme (for example Dawn or Horizon).
Wishlists are for logged-in shoppers only. Guests see a "Log in" link.

Add the block

In Shopify admin, go to Online Store → Themes → Customize.
Open the page where the wishlist should live. We suggest a new page, for example /pages/wishlist.
Click Add section → Apps → Tapcart Wishlist Page.
Click Save.

The theme editor shows sample products, because it browses as a guest. Log in as a customer on your live store to see real saved items.

Add the block to the theme you publish from. If you duplicate a theme for each release, add it to the base theme so it isn't lost.

Settings

Setting	What it does
Heading	Title above the list.
Columns on desktop / mobile	How many products per row.
Image shape	Square, portrait, or landscape.
Show price	Shows price, and the sale price when there is one.
Show Add to cart button	Lets shoppers add saved items to their cart.
After Add to cart	Go to the cart, or stay on the page.
Use theme button style	Uses your theme's button. Turn off to use the colors below.
Button color / text color	Optional. Overrides the button colors.
Empty wishlist message	Shown when the shopper has no saved items.
Logged-out message	Shown to guests, with a log-in link.

To change anything else, use the section's Custom CSS in the theme editor. Every element has a tcwl- class (for example .tcwl-card, .tcwl-card__title).

What shoppers can do

See saved items with image, name, and price.
Switch between lists, if they have more than one.
Remove an item.
Add an item to their cart.

Items that are deleted or not on your Online Store are hidden.

Let shoppers save items

This block shows saved items. To let shoppers save items on your website, turn on the Tapcart Wishlist Buttons app embed (Customize → App embeds). It adds a heart to product cards and product pages.

By default, a heart saves the product to the shopper's main wishlist.

Let shoppers pick a size and list

In the Tapcart Wishlist Buttons embed settings, turn on Let shoppers pick a size and list. Tapping a heart then opens a picker where shoppers can:

Pick a size (or other option).
Pick one or more wishlists.
Create a new wishlist.

Tapping the heart again shows what's already saved, so shoppers can change the size or move the item between lists. On a product page, the picker starts with the size the shopper already chose.

The saved size shows on the Wishlist Page block.

Need a custom design?

Use the Wishlist Web SDK to build your own wishlist UI.

For developers

After Add to cart with "Stay on page", the block fires a tapcart:wishlist:added-to-cart event on document. Use it to refresh your cart count or open your cart drawer:

document.addEventListener('tapcart:wishlist:added-to-cart', (e) => {
  // e.detail is the Shopify /cart/add.js response
})