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

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.

IN THIS ARTICLE:

Growave 2.0

In Growave 2.0, you can install all Wishlist-related embedes from the Onsite widgets page. Navigate to Onsite widgets → Wihslist tab and click the "Add widget" button under the Add to wishlist button card:

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:

  1. Open Shopify Admin → Online Store → Themes.
  2. Select the theme you want to integrate the Wishlist button into and click Customize.

Shopify theme customizer

  1. In the theme editor, click on App Embeds and enable Growave.

Shopify theme customizer - app embeds

  1. Navigate to the Products → Default product → Product information section.
  2. Click Add block and select Add to Wishlist.

Shopify theme customizer - Add to Wishlist button

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.

Wishlist branding

📖 Learn more about Wishlist branding in Growave 2.0

Legacy theme

For stores using a Legacy 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.liquid file.
  • 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 support@growave.io or use the chat icon in the bottom-right corner.

Related Articles