How to integrate "Add to wishlist" icon into the product cards

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 manually integrate the "Add to Wishlist" icon:

  • Go to Shopify Admin → Online Store → Themes → 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 {{ product.id }}  to dynamically insert the product ID. This is common for most Shopify themes.
data-gw-variant-id Required. Use {{ product.variants.first.id }}  to insert the default variant ID. This is common for most Shopify themes.
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:

  1. Go to your Shopify admin → Online Store → Themes.

    Click three dots button before Customize → select Edit code.

    Open the file that renders your product cards, usually found in:

    • snippets/product-card.liquid
    • snippets/product-grid-item.liquid
  2. Look for lines that reference product, variant, or related objects to find the correct liquid expressions.

If you encounter any issues with the integration, feel free to contact us at support@growave.io or use the chat icon in the bottom-right corner.