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:

Online store 2.0

Integrating the "Add to Wishlist" button into an Online Store 2.0 theme is simple. 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

You can now 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 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