How to add Growave Wishlist widgets using placeholders

Growave offers multiple ways to add wishlist widgets to your Shopify store. You can use the Onsite widgets page in Growave admin to automatically place widgets on relevant pages or add them manually through the Shopify theme customizer.

For more control over placement, you can insert widget placeholders directly into your theme’s code. This approach allows you to position widgets exactly where you need them, including custom sections or pages that aren’t covered by default settings. Each widget requires a specific class name and may support additional attributes for customization.

This guide provides the necessary placeholder codes and attributes for each wishlist widget, helping you integrate them seamlessly into your store.

Use a placeholder with data attributes

To insert a wishlist widget, create an empty <div> element with the corresponding class name. Shopify hides empty <div> blocks in embedded mode, so you must add style="display:block" to ensure visibility.

Some wishlist widgets require data attributes to function correctly. These attributes pass essential information, such as product IDs. Refer to each widget's details below for the required attributes.

Example:

<div
    class="widget-placeholder-class-name"
    style="display:block"
    data-gw-attribute1="value1"
    data-gw-attribute2="value2"
></div>

Add the widget to your Shopify store

You can add placeholders to your Shopify store in two ways:

• Theme customizer: Go to Online Store → Themes → Customize, select the relevant page, and add a Custom Liquid section from the Sections tab. Insert the placeholder code into the text area.

• Edit code: Go to Online Store → Themes → ⋮ (three dots menu) → Edit code, select the relevant Liquid template file, and add the placeholder code directly into the HTML.

Add to Wishlist product card widget

This widget allows users to add or remove items from their wishlist directly from product cards within catalogs. It also displays the current wishlist count, enhancing user interaction with the wishlist feature on product cards.

• Code:

<div
    class="gw-add-to-wishlist-product-card-placeholder"
    data-gw-product-id="1234567890"
    data-gw-variant-id="1234567890"
    style="display: block"
></div>

• Attributes:
  • data-gw-product-id: specifies the unique identifier for the product used for adding and deleting wishlist items.
  • data-gw-variant-id: specifies the unique identifier for the product variant used for adding and deleting wishlist items.

Add to Wishlist product page widget

This widget allows users to add or remove the current product and its variant to or from their wishlist on product pages. It provides a seamless way for customers to manage their wishlist directly from the product page.

• Code:

<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.

Go to Wishlist page header widget

This widget provides a direct link to the wishlist page (/pages/wishlist ), allowing users to access their saved items with a single click. It enhances user convenience by offering quick access to the wishlist directly from the header.

• Code:

<div class="gw-wl-header-icon-placeholder" style="display: block"></div> 

If you have any questions or need assistance, please don’t hesitate to contact our support team at support@growave.io or via the chat icon in the right-bottom corner. We're here to help! 🤗