How to add a wishlist icon to a product card that uses the refresh theme

When you create a product card using our theme design, it will not include the wishlist icon by default. However, we’ve prepared a simple step-by-step guide to help you easily add the wishlist icon to your product card.

If you prefer, we’d be more than happy to assist you in adding the wishlist icon directly.

Follow the steps below:

1. Click the icon in the top left corner marked with a red arrow

2. A pop-up will appear; navigate to the Custom JavaScript tab

3. Copy the wishlist icon code and paste it into your custom code

<div
  data-component="wishlist-trigger"
  data-product-id="${id}"
  data-product-variant-id="${variant_id}"
  data-product-name="${title}"
  data-product-vendor="${vendor}"
  data-product-sku="${sku}"
  data-product-variant-name="${variant_title}"
  data-product-link="${url}"
  data-product-image="${image?.src || ""}"
  data-product-currency="${currency}"
  data-product-price="${price}"
  data-trigger-badge="rerender"
  data-on-after-add-wishlist="onAfterAddWishlist"
  data-on-after-remove-wishlist="onAfterRemoveWishlist"
 ></div>

4. Then paste it into the custom code section indicated by the red arrow.

before:

After:

5. Next, click the Save button at the top-right corner.
6. Go back to the storefront and refresh the page 2 to 3 times.
7. You should now see the wishlist icon appear on your product cards.

before:

after: