This guide will help you add the "Add to Wishlist" button to your product pages, whether you're using a Shopify Online Store 2.0 theme or a Legacy theme. Follow the instructions below for the method that matches your store's setup.
Growave 2.0
In Growave 2.0, you can install all Wishlist-related embeds from the Onsite widgets page. Navigate to Onsite widgets → Wishlist tab and click the "Add widget" button under the Add to wishlist button card:
"Add to Wishlist" button placeholder
If you're using Shopify Online Store 2.0 and want to manually insert the "Add to Wishlist" button using your Shopify theme code or a custom liquid block, you can use the following widget placeholder:
<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.
📖 Learn more about embedding Wishlist widgets using placeholders in this guide
Online store 2.0
Integrating the "Add to Wishlist" button into Shopify's Online Store 2.0 theme is simple. This option works for both Growave 1.0 and Growave 2.0 versions.
Follow these steps:
Open Shopify Admin → Online Store → Themes.
Select the theme you want to integrate the Wishlist button into and click Customize.
In the theme editor, click on App embeds and enable Growave.
Navigate to the Products → Default product → Product information section.
Click Add block and select Add to Wishlist.
Wishlist branding
You can customize the button’s colors, fonts, and dimensions to match your store's design in the Growave admin panel → Branding → Wishlist.
Legacy theme
For stores using a Legacy (also called vintage) theme, follow these steps to manually integrate the "Add to Wishlist" button:
Go to Shopify Admin → Online Store → Themes → Edit HTML/CSS.
Open the
product.liquidfile.Add the following code wherever you want the "Add to Wishlist" button to appear:
{% capture the_snippet_fave %}{% render 'socialshopwave-widget-fave' %}{% endcapture %} {% unless the_snippet_fave contains 'Liquid error' %} {{ the_snippet_fave }} {% endunless %}In our example, we place the code right after the "Add to Cart" button code:
<button type="submit" name="add" id="add" class="btn"> <span id="addText">{{ 'products.product.add_to_cart' | t }}</span> </button>This will ensure the "Add to Wishlist" button appears on your product page.
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.