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:
Navigate to Onsite widgets → Wishlist tab.
Click the Add to store button under the Add to wishlist button card.
You’ll be redirected to the Shopify page customizer, with the button automatically added to your product page.
Drag the Wishlist button to the desired location (e.g., below the Add to cart or Buy now buttons) and click Save.
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:
Go to Shopify Admin → Online Store → Themes.
Find your live theme and click Customize.
In the theme editor, click App embeds and enable Growave.
In the top page selector, go to Products → Default product.
In the left-side menu, expand Template → Product information.
Hover between blocks and click the Add block (+) button.
Switch to the Apps tab and select Add to Wishlist.
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.liquidfile (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?
Why isn’t the Wishlist button showing up?
Make sure the Wishlist app is enabled in Growave → Settings.
Check that App Embed is turned on in Shopify → Customize → App embeds.
If you’re using custom code, verify that
product-idandvariant-idare valid.
Why is the Wishlist button still visible after I turned it off?
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 Growave → Wishlist → Settings.
Contact support if the button persists — it may require manual removal.
Can I change the Wishlist icon or customize the button?
Can I change the Wishlist icon or customize the button?
Yes! In Growave 2.0, go to Branding → Wishlist to update the icon and button styling. Learn more about Wishlist branding in Growave 2.0.
Can I embed this Add to Wishlist button on product cards or collection pages?
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 [email protected] or use the chat icon in the bottom-right corner of your Growave admin panel.