Skip to main content

How to integrate "Add to wishlist" button into the product page

Add the Wishlist button to your product page using the Growave widget or custom code

Simon Akhrameev avatar
Written by Simon Akhrameev
Updated today

This guide shows you how to add Growave's "Add to Wishlist" button to your product page. You can do this through the Shopify theme editor (Online Store 2.0) or by manually inserting code (custom setup or legacy themes).


Embed the Add to Wishlist button on the product page with Growave 2.0

Use the Onsite widgets menu

In Growave 2.0, you can install all Wishlist-related embeds from the Onsite widgets menu:

  1. Navigate to Onsite widgetsWishlist tab.

  2. Click the Add to store button under the Add to wishlist button card.

  3. You’ll be redirected to the Shopify page customizer, with the button automatically added to your product page.

  4. Drag the Wishlist button to the desired location (e.g., below the Add to cart or Buy now buttons) and click Save.

Growave onsite widgets - Wishlist

Use the "Add to Wishlist button" placeholder

With Growave 2.0, you can manually embed the button using Growave’s placeholder in your product template or a Custom Liquid block:

<div 
class="gw-wl-add-to-wishlist-placeholder"
data-gw-button-class="custom-class-name"
data-gw-product-id="1234567890"
data-gw-variant-id="1234567890"
style="display: block"
></div>
  • Attributes:

    • data-gw-button-class: specifies the custom class name for the button.

    • data-gw-product-id: specifies the unique identifier for the product to be added or removed from the wishlist.

    • data-gw-variant-id: specifies the unique identifier for the product variant to be added or removed from the wishlist.


Embed the Add to Wishlist button on the product page in Online store 2.0

This no-code method works for both Growave 1.0 and 2.0 users:

  1. Go to Shopify Admin → Online Store → Themes.

  2. Find your live theme and click Customize.

  3. In the theme editor, click App embeds and enable Growave.

  4. In the top page selector, go to Products → Default product.

  5. In the left-side menu, expand Template → Product information.

  6. Hover between blocks and click the Add block (+) button.

  7. Switch to the Apps tab and select Add to Wishlist.

  8. Click Save.

Tip

You can drag the block to reposition it above or below other elements like product price, description, or buy buttons.


Embed the Add to Wishlist button into legacy themes

For legacy (vintage) Shopify themes:

  • Go to Shopify Admin → Online Store → Themes → Edit HTML/CSS.

  • Open the product.liquid file (or equivalent).

  • Add the following code where you want the button to appear:

{% capture the_snippet_fave %}
{% render 'socialshopwave-widget-fave' %}
{% endcapture %}
{% unless the_snippet_fave contains 'Liquid error' %}
{{ the_snippet_fave }}
{% endunless %}

Tip

Place the code right after the Add to cart button to ensure visibility.


FAQs

Why isn’t the Wishlist button showing up?

  • Make sure the Wishlist app is enabled in GrowaveSettings.

  • Check that App Embed is turned on in ShopifyCustomizeApp embeds.

  • If you’re using custom code, verify that product-id and variant-id are valid.

Why is the Wishlist button still visible after I turned it off?

  • Clear your store’s cache and hard refresh the page.

  • Make sure the Wishlist is disabled in GrowaveWishlistSettings.

  • Contact support if the button persists — it may require manual removal.

Can I change the Wishlist icon or customize the button?

Can I embed this Add to Wishlist button on product cards or collection pages?

  • No, this button is for product pages only. To show a Wishlist icon in product cards (like a heart counter), read our guide on integrating wishlist icon on product cards or ask support to help embed the AddToWishlistProductCardWidget.


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 of your Growave admin panel.

Did this answer your question?