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.
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.