This widget allows users to add or remove items from their wishlist directly from product cards within catalogs. It also displays the current wishlist count, enhancing user interaction with the wishlist feature on product cards.
Recommended: add the Wishlist icon from the theme editor (no code)
New Shopify themes let you add the wishlist heart to product cards with the Add to Wishlist Card app block — no code required:
Go to Shopify admin → Online Store → Themes → Edit theme.
Open a template that shows product cards (for example, your Home page or a Collection template).
In the left-hand panel, expand Product list → Product card.
Click Add block → Apps → Add to Wishlist Card.
Click Save.
The heart icon then appears on every product card in that section. You can set the icon position, counter, and offsets right in the block. See Add to Wishlist Card for all settings.
If your theme doesn't support adding blocks to the product card, use the code-snippet method below instead.
Alternative: add the icon with a code snippet
Follow these steps to integrate the "Add to Wishlist" icon manually:
Go to Shopify Admin → Online Store → Themes → click the Three dots button before Customize → select Edit code.
Find and open a product card (or product grid item) file (varies depending on store theme and/or page builder used).
Add the following code where you want the "Add to Wishlist" icon to appear:
<div
class="gw-add-to-wishlist-product-card-placeholder"
data-gw-product-id="{{ product.id }}"
data-gw-variant-id="{{ product.variants.first.id }}"
data-gw-wishlist-counter-position="left-top"
style="display: block"
></div>
Description of attributes
Attribute | Description |
class | Required. Identifies the placeholder as a Growave wishlist widget. |
data-gw-product-id | Required. Use |
data-gw-variant-id | Required. Use |
data-gw-wishlist-counter-position | Optional. Controls the position of the wishlist counter badge. Accepted values: right-top (default) or left-top. |
style="display: block" | Ensures visibility when added dynamically. |
Theme-specific notes
Depending on your Shopify theme, the exact liquid expressions for product and variant IDs might differ slightly. The most common ones are:
{{ product.id }}{{ product.variants.first.id }}
If those don’t work in your case, you can locate the correct expressions in your theme:
Go to your Shopify admin → Online Store → Themes.
Click the Three dots button before Customize → select Edit code.
Open the file that renders your product cards, usually found in:
snippets/product-card.liquidsnippets/product-grid-item.liquid
Look for lines that reference
product,variant, or related objects to find the correct liquid expressions.
If you happen to have any problems with the integration, please feel free to contact us at [email protected] or use the chat icon in the bottom-right corner of your Growave admin panel. We're here to help! 🤗