# Fish Wishlist App

Welcome to our Express Wishlist App for Shopify stores. Quick setup, simple customer UX and wishlist upsell widgets on checkout.

We have built the wishlist app that we always wish existed.

{% hint style="success" %}
:link:[ **Install from the Shopify App Store** ](https://apps.shopify.com/fish-wishlist)
{% endhint %}

{% hint style="info" %}
**Need help?** [Contact Us](mailto:undefined) or [Book a Meeting](https://calendly.com/nativeappco-support/30min) with us
{% endhint %}

### Key Features

These are the first things you'll notice about our app:

* **It's fast**. Every interaction is built natively for Shopify. No slow third party hosted wishlist pages.
* **It's simple**.&#x20;
* **It's native**. We're 100% built for the best parts of Shopify using:
  * Theme Sections for easy setup
  * Checkout Extensibility to enable customers to shop their wishlist from the checkout
  * Shopify Flow to let you send wishlist data to your marketing platforms like Klaviyo and Dotdigital&#x20;
  * All wishlists are stored in Shopify admin as customer metafields, which means you own all your customer data
  * Wishlists can be accessed and updated via Shopify POS.
* **It's customisable**. Everything is set up to make it easy for you to customise for your business. Features include:

  * Multiple wishlists per customer
  * Customers can name their wishlists
  * Translate your wishlist to cater for different languages, or update your terminology for different business types (eg. B2B)

  &#x20;


# Pricing & Features

Our pricing plans are simple and cost-effective.

| **Feature**                              | **Starter (Free)** | **Lightning**        | **Trade**            |
| ---------------------------------------- | ------------------ | -------------------- | -------------------- |
| Price (Monthly)                          | Free               | $40/month            | $90/month            |
| Price (Annual)                           | N/A                | $400/year (Save 17%) | $900/year (Save 17%) |
| 14-day free trial                        | N/A                | ✅                    | ✅                    |
| 2 Minute Setup                           | ✅                  | ✅                    | ✅                    |
| Customer Limit                           | 100                | Unlimited            | Unlimited            |
| Unlimited Wishlists                      | N/A                | ✅                    | ✅                    |
| Shopify Flow Triggers                    | ✅                  | ✅                    | ✅                    |
| Klaviyo Integration                      | ✅                  | ✅                    | ✅                    |
| Free Migration from Other Apps           | N/A                | ✅                    | ✅                    |
| Checkout Upsell & Account Page Extension | N/A                | ✅                    | ✅                    |
| Previously Purchased & Abandoned Cart    | N/A                | ✅                    | ✅                    |
| Designed for B2B                         | N/A                | N/A                  | ✅                    |
| Request a Quote function                 | N/A                | N/A                  | ✅                    |
| Create Draft Orders from Wishlist        | N/A                | N/A                  | ✅                    |
| Auto Invoicing                           | N/A                | N/A                  | ✅                    |
| Quantity Picker on Wishlist              | N/A                | N/A                  | ✅                    |

### I have multiple stores - can I get a discount?

[Contact us](mailto:undefined) for discounted pricing if you have multiple Shopify stores. We are happy to provide extended free trials for staging and development stores too.


# Theme Setup

Fish Wishlist can be natively installed on any Shopify 2.0 Theme using the steps below

{% embed url="<https://www.youtube.com/watch?v=XYPrxN0VXL4>" %}

{% hint style="info" %}
If you have an older theme or encounter any problems setting up on your theme, please [Contact Us ](mailto:fish@nativeappco.com)and we will gladly help.
{% endhint %}

{% stepper %}
{% step %}

### [Enable Fish Wishlist app embeds ->](/install-and-setup/theme-setup/enable-app-embeds) &#x20;

{% endstep %}

{% step %}

### [Add Fish Wishlist app blocks to your theme ->](/install-and-setup/theme-setup/add-app-blocks-to-your-theme)

{% endstep %}

{% step %}

### [Add our code snippet to collection grid ->](/install-and-setup/theme-setup/add-code-snippet-to-collection-grid)

{% endstep %}
{% endstepper %}


# Enable app embeds

Activate our app embeds to add our wishlist functionality to your site

## **Instructions**

{% stepper %}
{% step %}

### Open theme editor

In Shopify Admin, navigate to Online Store -> [Themes](https://admin.shopify.com/themes) -> Customise Theme
{% endstep %}

{% step %}

### Enable our Fish Wishlist app embeds

* Within your theme editor, go to your **App Embeds**&#x20;
* Then enable our three App Embeds:
  * **Add to Wishlist Drawer**: This drawer is shown when adding a variable product to wishlist, and/or when selecting which wishlist to add to.&#x20;
  * **Wishlist:** This adds all the core Wishlist Functionality to your site.
  * **Wishlist Drawer:** This drawer is shown when viewing your wishlist/s. <br>

    <figure><img src="/files/KfIGf2Uwa8jfzOAqQhiN" alt=""><figcaption><p>Theme Editor App Embeds</p></figcaption></figure>

{% endstep %}
{% endstepper %}


# Add app blocks to your theme

Utilise our app blocks to add our wishlist buttons to your site header & product page templates.

## **Instructions**&#x20;

{% stepper %}
{% step %}

### Open theme editor

In Shopify Admin, navigate to Online Store -> [Themes](https://admin.shopify.com/themes) -> Customise Theme
{% endstep %}

{% step %}

### Add app block to header

* Within your theme editor, expand your '**Header**' section
* Click to 'Add block' in your '**Header**' section
* Select '**Apps**' -> **'Open wishlist button'** block\
  \ <img src="/files/ZoiDB5WnlLPb0U4HDsNT" alt="" data-size="original"><br>
  {% endstep %}

{% step %}

### Configure header app block settings&#x20;

* Within the '**Open wishlists button**' app block you can configure settings to customise the styling as per your needs.
  * *Learn more about the available settings* [*here*](/customisation/custom-styling/product-page-button)*.*\
    ![](/files/jnPVRSxPEA2TV68wOtBF)
    {% endstep %}

{% step %}

### Add app block to product template/s

* Within your theme editor, navigate to your **Default Product** template
* Click to 'Add block' in your '**Product Information**' section&#x20;
  * *This section may have different name depending on your theme*
* Select '**Apps**' -> '**Add To List Button PDP'** bloc&#x6B;**.**\
  \
  ![](/files/SQUDS2W4OAuOTExzpPKK)<br>
* Drag and drop the block within your product section to position it as required.
  {% endstep %}

{% step %}

### Configure product app block settings&#x20;

* Within the '**Add to list button PDP**' app block you can configure settings to customise the styling as per your needs.
  * *Learn more about the available settings* [*here*](/customisation/custom-styling/header-button)*.*\
    \
    ![](/files/PoF4y774eLolZZcN5tCm)
    {% endstep %}

{% step %}

### Repeat steps 4 & 5 for any other product templates

If your theme is running multiple product templates, you'll need to repeat steps 4 & 5 (above) for any other product templates you use.
{% endstep %}
{% endstepper %}


# Add code snippet to collection grid

Insert our code snippet to your product grid item to add our wishlist buttons to your collection grid.

Our snippet can be used with any search/filter provider such as Algolia, SearchSpring or Boost.

{% hint style="info" %}
This requires some edits to your theme code. If you need help, please [Contact Us](mailto:undefined).
{% endhint %}

## Instructions

1. **Access Your Theme Files**:
   * In your Shopify admin, go to **Online Store** > **Themes**.
   * Find your published theme, and click **Actions** > **Edit Code**.
2. **Locate Product Grid Code**:
   * In the **Sections** or **Snippets** folder, open the file responsible for your product grid or product cards. Common file names include `product-grid-item.liquid`, `product-card.liquid`, or similar.
   * If you’re not sure which file it is, you can check your theme’s documentation or look for templates associated with collections or products.
3. **Insert the Wishlist Button Code**:
   * Within the code for the product grid item, locate a position where you want the wishlist button to appear.
   * Paste the following code snippet within each product card section where you’d like the button:

     ```liquid
     <wishlist-button class="position-absolute top-right" data-variant-id="{{ card_product.variants | map: "id" | join: "," }}"></wishlist-button>
     ```
4. **Adjust Button Positioning** (Optional):
   * The `wishlist-button` class includes additional position attributes you can adjust to place the button inside the product card.
   * Replace `"top-right"` with one of the following options based on your desired placement:
     * **`top-right`**: Top right corner (default).
     * **`top-left`**: Top left corner.
     * **`bottom-right`**: Bottom right corner.
     * **`bottom-left`**: Bottom left corner.
5. **Save and Preview**:
   * Click **Save** after making changes.
   * Preview your store to ensure the wishlist button appears correctly within each product card.

This should set up the wishlist functionality for your theme!

<figure><img src="/files/VzpGMxBI5Lx5A0BqL5FK" alt=""><figcaption></figcaption></figure>


# Add "Open Wishlist" Button to Your Site

This document explains the various methods to integrate the "Open Wishlist" button into your website. Our automatic installation typically handles the basic setup, but manual options are available.

### When to Use Manual Setup

Consider manual setup for the following scenarios:

* **Adding a second button to your mobile menu:** If you need more than one wishlist button, for example, one in your header and another specifically for mobile navigation.
* **Adding to older themes that don't support app blocks:** For themes that predate or do not fully support Shopify's app block functionality.
* **You prefer to add the code to your theme yourself:** For developers or users who want direct control over their theme's code.

### Installation Options

#### **Option 1: Using App Blocks (Recommended for Compatible Themes)**

If your theme supports Shopify's app blocks, this is the most straightforward and recommended method. App blocks allow for easy integration and management of app-related functionalities directly within the theme customizer.

For detailed instructions on adding app blocks to your header, please refer to our dedicated guide:

[Add App Blocks to Your Theme - Add App Block to Header](https://wishlist.nativeappco.com/install-and-setup/theme-setup/add-app-blocks-to-your-theme#add-app-block-to-header)

#### **Option 2: Manual HTML Element Integration**

You can manually add the "Open Wishlist" button anywhere on your site by inserting the following HTML element directly into your theme's Liquid files (e.g., `header.liquid`, `footer.liquid`, or any relevant section files).

This method provides full flexibility in terms of button placement.

**HTML:**

```
<open-wishlists-button role="button" data-primary="">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" fill="none"><path d="M20.583 22.75 13 17.333 5.417 22.75V5.417A2.167 2.167 0 0 1 7.583 3.25h10.834a2.167 2.167 0 0 1 2.166 2.167V22.75Z" stroke="currentColor"></path></svg>
<div class="wishlist-count-bubble"> </div>
</open-wishlists-button>
```

**Customizing the Icon:**

In the snippet above, the `<svg>` element represents the default wishlist icon. You have the flexibility to replace this SVG with your own custom wishlist icon or an image file to match your brand's aesthetics. Ensure that your replacement icon is appropriately sized and styled to fit within your design.


# Add Wishlist Button to Product Page

Adding a Wishlist Button to your product page is easy. Use App Blocks for a super quick setup, or use our Manual setup for advanced customisation.

### Installation Options

#### **Option 1: Using App Blocks (Recommended for Compatible Themes)**

If your theme supports Shopify's app blocks, this is the most straightforward and recommended method. App blocks allow for easy integration and management of app-related functionalities directly within the theme customizer.

For detailed instructions on adding app blocks to your product page, please refer to our dedicated guide:

[Add App Blocks to Your Theme - Add Button to Product Page](https://wishlist.nativeappco.com/install-and-setup/theme-setup/add-app-blocks-to-your-theme#add-app-block-to-product-template-s)

#### **Option 2: Manual HTML Element Integration**

Consider manual setup for the following scenarios:

* **Adding to older themes that don't support app blocks:** For themes that predate or do not fully support Shopify's app block functionality.
* **You prefer to add the code to your theme yourself:** For developers or users who want direct control over their theme's code.

You can manually add the "Add to Wishlist" button anywhere on your site by inserting the following HTML element directly into your theme's Liquid files.

This method provides full flexibility in terms of button placement.

**HTML:**

{% code overflow="wrap" %}

```html
<wishlist-button-pdp role="button" class="fish-wishlist-button--pdp fish-wishlist-button--secondary button" data-variant-id="{{ product.selected_or_first_available_variant.id }}" data-preselected-id="{{ product.selected_or_first_available_variant.id }}" data-is-added="false">
</wishlist-button-pdp>
```

{% endcode %}

**Customizing the Text:**

Regardless of whether you are using App Blocks or manual setup, you can modify the text for your wishlist button in [Language Settings](https://admin.shopify.com/store/fish-wishlist/apps/fish-wishlist/app/languages). If you don't want to display any text, you can remove the text from this page.

<figure><img src="/files/zZjla0binu0MCr9Eq35U" alt=""><figcaption></figcaption></figure>


# App Configuration

Before you set up Fish Wishlist on your store, you should visit the Settings page and configure it to meet your needs.  You can change these settings any time.

### Instructions

* Open Fish Wishlist in Shopify Admin and go to [**Settings**](https://admin.shopify.com/apps/fish-wishlist/app/settings)
* From this page, you can update the global configuration of your app.

<figure><img src="/files/VZlF7vAqB5DUaGqWF5d0" alt=""><figcaption></figcaption></figure>

### **Wishlist Icon Configuration**

* Choose the icon that will represent the wishlist on your store.&#x20;
* You can add an SVG icon (24 x 24 pixels). You must upload different icons for Empty State and Added State.
* Options for customizing the wishlist's name (e.g., "Shopping List," "Requisition List").

### **Maximum Wishlists**

Set whether you allow 1 wishlist or multiple wishlists. If you enable multiple wishlists, customers can create up to 15 wishlists each.

### **Visibility Options**

* Decide if logged-in customers can view wishlists.
* Enable guest wishlists if desired.

### **CSS Selectors**

* Use CSS selectors to define where wishlist icons will be displayed on your site.

### **Integrations**

* Enable Meta and GA4 integrations.

### **Marketing Opt-in**

* Include an opt-in box for marketing emails. Toggle this feature on/off as needed.


# Checkout Upsell Widget

Fish Wishlist has a Checkout Upsell widget to encourage logged in customers to add to their order from within the checkout.

### Instructions

* In Shopify, go to your Checkout Editor (Find it under Settings -> Checkout -> [Customize](https://admin.shopify.com/settings/checkout/editor/))
* Open the Apps tab in Checkout Editor <img src="/files/yE9rx2F0tBY7Sveh1cRj" alt="" data-size="line">
* Add the **Wishlist Checkout Upsell** app block\
  ![](/files/uGrkoB42f567KDk2uWhk)
* Choose whether you want to include wishlist as part of Shop Pay
* Navigate to the Sections tab in Checkout Editor
* Choose a position for your Wishlist Checkout Upsell. For best user experience we recommend positioning it under **Items in cart**\
  ![](/files/PuNCnpshm933gtHFpjht)
* Save your checkout&#x20;
* Customers will start seeing the widget if they are logged in. It looks like this:<br>

  <figure><img src="/files/K7d1VppoyXOP3CIVoBnf" alt=""><figcaption><p>Fish Wishlist Checkout Widget Example</p></figcaption></figure>

:grey\_exclamation:**Note:** The Checkout Upsell widget only appears for logged in customers. Don't be worried if you don't see it appear in the Checkout Editor.


# Account Portal

Fish Wishlist has an Account widget to enable logged in customers to access their wishlist easily from the account dashboard.

<figure><img src="/files/bgdFQmM7bAakAwd7nhok" alt=""><figcaption></figcaption></figure>

To set up the Fish Wishlist Shopify Account extensibility widget, follow these steps:

1. **Access the Account Editor**: Navigate to your Shopify Admin. Go to **Settings > Customer accounts > Customize**.
2. **Open the Apps Tab**: In the Account Editor, open the Apps tab.
3. **Add the App Block:** Add the "Wishlist Account Widget" app block to your account section.

   <figure><img src="/files/z9RBMC3HF4tX7wnTCJHe" alt=""><figcaption></figcaption></figure>
4. Save Your Changes: Save your modifications to the customer account section.

Once saved, the widget will be visible to logged-in customers within their account section. Please note that the Account Widget is exclusively displayed to logged-in customers only.


# Migrating from another Wishlist App

Switching from another wishlist app? We make it easy to bring your customer data with you so nobody loses their saved items.

#### Supported Apps

We can assist with migrations from most major Shopify wishlist apps, including:

* Swym
* Growave
* Smart Wishlist
* Wishlist Plus

#### How to Migrate

1. Export your data: From your previous app’s dashboard, export your wishlist data as a CSV file. Depending on the app, you may need to contact their support team to get an export.
2. Ensure Customer Emails are included: For the best results, ensure your export includes the `Customer Email`, `Product Handle`, and `Variant ID`.
3. Send it to us: Email your CSV file to <support@nativeappco.com>
4. We handle the rest: Our team will format the data and import it directly into your Shopify Customer Metafields.

> Note: Because Fish Wishlist uses native Shopify Metafields, once your data is migrated, you "own" it forever—even if you decide to change wishlist apps later. You can export your wishlist data using an app such as Matrixify.


# Enabling Collaborator Access

To provide the best support possible, our team sometimes needs to look under the hood of your store.

#### Why we request access

If you are experiencing a theme conflict (like the wishlist heart not appearing or a mini-cart error), we need access to your theme files to apply a custom fix.

#### Our Safety Protocol

* Duplicate Themes: We never work on your live theme. We will always create a duplicate of your current theme, apply the fixes there, and ask you to preview it before any changes go live.
* Limited Access: We only request access to "Apps" and "Online Store." We do not need access to your finances, orders, or private customer data.

#### How to approve

When we request access, you will receive an email from Shopify (request will come from "Native App Co". You can also find the request in your Shopify Admin under Settings > Users and Permissions.


# Managing Product Variants

Fish Wishlist doesn't just save products; it saves the exact version of the product your customer wants.

#### Saving Specific Variants

By default, the app is designed to capture the `Variant ID` currently selected on the product page. If a user selects "Large" and "Blue," that is exactly what will appear in their wishlist.

#### Enabling the Variant Selector

If you want customers to be able to change their mind (e.g., change the size) directly from the wishlist drawer:

1. Go to Settings in the Fish Wishlist app.
2. Toggle on Enable Variant Selector in Drawer.
3. Click Save.

#### Troubleshooting "Default Title"

If your shared wishlists are showing "Default Title" instead of the product name, this usually means the theme isn't passing the product title correctly to the sharing metadata. Please contact support, and we can add a small snippet to your theme to fix this instantly.


# Custom Styling

### **Custom Styling**

In the Wishlist App Embed settings you can modify lots of the colours and styles for your Wishlist widgets:

<figure><img src="/files/HyYYnzNFErUqqaB2X1Uh" alt="" width="375"><figcaption></figcaption></figure>

Within each section you can add Additional CSS to tweak the appearance of your wishlist functionality.

<figure><img src="/files/2asE9JESWfAzcyiCDOeJ" alt="" width="299"><figcaption><p>Edit the CSS for any of your Wishlist features</p></figcaption></figure>


# Drawers

## **Custom Styling Settings**&#x20;

Within the theme editor, you can apply custom styles to our wishlist drawers via our '**Wishlist**' app embed settings.

<div data-full-width="false"><figure><img src="/files/3q5sxZjLC18U7jcgDL13" alt="" width="183"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="General" %}
**Primary text colour:** Set colour code for the primary text colour which will apply in our wishlist drawers.

**Secondary text colour:** Set colour code for the secondary text colour which will apply in our wishlist drawers.

**Tertiary text colour:** Set colour code for the tertiary text colour which will apply in our wishlist drawers.

**Drawer background colour:** Set colour code for the background colour which will apply to our wishlist drawers.
{% endtab %}

{% tab title="Card" %}
**Border:** Available dropdown options:&#x20;

* No border - no border is shown around the card. &#x20;
* Border - full border is shown around each card
* Bottom border only - bottom border is shown below each card

*Note - borders are only show when multiple wishlists enabled*

**Border colour:** Set colour code for the border that will display around each wishlist card in our wishlist drawer.&#x20;

**Border radius:** Set radius of the borders shown around each wishlist card

**Background:** Set colour code for the background colour which will apply to each wishlist card.
{% endtab %}

{% tab title="Buttons" %}
**Button font size:** Controls font size of text within buttons

**Vertical padding:** Controls top/bottom padding within buttons&#x20;

**Horizontal padding:** Controls left/right padding within buttons

**Border radius:** Controls border radius of buttons
{% endtab %}

{% tab title="Button Primary" %}
**Font colour:**&#x20;

**Background:**

**Border colour:**

**Font colour hover:**&#x20;

**Background colour hover:**

**Border colour hover:**
{% endtab %}

{% tab title="Button Secondary" %}
Font colour:

Background:

Border colour:

Font colour hover:&#x20;

Background colour hover:

Border colour hover:
{% endtab %}
{% endtabs %}

## **Custom CSS**

Within each section you can add Additional CSS to tweak the appearance of your wishlist functionality.

<figure><img src="/files/2asE9JESWfAzcyiCDOeJ" alt="" width="299"><figcaption><p>Edit the CSS for any of your Wishlist features</p></figcaption></figure>


# Header Button

### **Custom Styling**

Within the theme editor, you can apply custom styles to our wishlist drawers via our 'Wishlist' app embed settings.

<figure><img src="/files/RP28YnkOzbdz0Z4RVEam" alt="" width="178"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="General" %}
**Icon colour:** Set colour code for the primary text colour which will apply in our wishlist drawers.

**Show product count:** Set colour code for the secondary text colour which will apply in our wishlist drawers.

**Count text colour:** Set colour code for the tertiary text colour which will apply in our wishlist drawers.
{% endtab %}
{% endtabs %}

## **Custom CSS**

Within each section you can add Additional CSS to tweak the appearance of your wishlist functionality.

<figure><img src="/files/2asE9JESWfAzcyiCDOeJ" alt="" width="299"><figcaption><p>Edit the CSS for any of your Wishlist features</p></figcaption></figure>


# Product Page Button

## **Custom Styling**

Within the theme editor, you can apply custom styles to our wishlist drawers via our 'Wishlist' app embed settings.

<figure><img src="/files/79mZ0KWWdv8HymcHPLU7" alt="" width="182"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Position" %}
**Primary text colour:** Set colour code for the primary text colour which will apply in our wishlist drawers.

**Secondary text colour:** Set colour code for the secondary text colour which will apply in our wishlist drawers.

**Tertiary text colour:** Set colour code for the tertiary text colour which will apply in our wishlist drawers.

**Drawer background colour:** Set colour code for the background colour which will apply to our wishlist drawers.
{% endtab %}

{% tab title="Button" %}

{% endtab %}

{% tab title="Button Colours" %}
**Button font size:** Controls font size of text within buttons

**Vertical padding:** Controls top/bottom padding within buttons&#x20;

**Horizontal padding:** Controls left/right padding within buttons

**Border radius:** Controls border radius of buttons
{% endtab %}

{% tab title="Button Hover Colours" %}
**Font colour:**&#x20;

**Background:**

**Border colour:**

**Font colour hover:**&#x20;

**Background colour hover:**

**Border colour hover:**
{% endtab %}
{% endtabs %}

## **Custom CSS**

Within each section you can add Additional CSS to tweak the appearance of your wishlist functionality.

<figure><img src="/files/2asE9JESWfAzcyiCDOeJ" alt="" width="299"><figcaption><p>Edit the CSS for any of your Wishlist features</p></figcaption></figure>


# Copy & Translations

Fish Wishlist is compatible with Shopify's native translations. You can easily translate any of your wishlist content for any language that you have configured in Shopify Markets.

### Instructions

* Open Fish Wishlist in Shopify Admin and go to [**Copy & Translations**](https://admin.shopify.com/apps/fish-wishlist/app/translations)
* From this page, you can update any of the text that appears in your Wishlist Drawer and other widgets throughout your site.
* ![](/files/2MlaVFp9d7dg5zyc8z0z)&#x20;

### Tip

Personalise the **PDP Add to Wishlist Button** and **Marketing Opt In** messaging to encourage users to interact with your wishlist.

![](/files/8aANLUSQNjMqwk0DAOkb)

### Multi Language Setup

Any language that you have configured in Shopify Markets will appear as a tab on your Copy & Translations page. To add new languages to your store, refer to Shopify Documentation: <https://help.shopify.com/en/manual/international/languages/manage-languages#add-new-language>&#x20;


# Wishlist Sharing

Customers can share their wishlist with friends using our share feature. Store owners can customise this feature using our advanced editor.

### Turn on Wishlist Sharing

Wishlist Sharing can be turned from the [Settings](https://admin.shopify.com/apps/fish-wishlist/app/settings) tab:

<figure><img src="/files/rSR1D0ix5jwtdMbMwfpG" alt=""><figcaption></figcaption></figure>

### How It Works

Fish Wishlist uses a **two-step sharing flow** by default:

1. **Step 1 - Customer Shares Wishlist**<br>

   * When a user clicks the **Share Wishlist** button, the wishlist is marked public by generating a **metaobject** and a **public link** to the wishlist page.

   <div data-full-width="false"><figure><img src="/files/vsP8tf9axfhXXSnsIdUS" alt="" width="324"><figcaption></figcaption></figure></div>
2. **Step 2 - Share the Link**
   * A **share popup** is triggered with the link that can be copied or shared via social/email.
3. **Unsharing the Wishlist**
   * If the user decides to revoke access, they can click **Unshare Wishlist**, which marks the wishlist as private and invalidates the public URL.

***

### Accessing the Custom Page Editor (advanced)

<figure><img src="/files/V6jINuv6F2pntlBEtMA4" alt=""><figcaption></figcaption></figure>

Fish Wishlist provides a **hidden editor** for advanced users. You can manage your wishlist page directly through the following link:

➡️ [Wishlist Page Editor (Advanced Access)](https://admin.shopify.com/apps/fish-wishlist/app/pages)

> **Note:** This link is hidden in your app admin. Use it only if you’re familiar with theme development and advanced customization.

### Editing the Shared Wishlist Page Template

The shared wishlist page uses a **generic grid-based layout**, which is designed to work across Shopify themes.

You can fully customize this page via the hidden editor and insert any theme-compatible code. Below is a sample template for rendering the shared wishlist using Shopify’s Dawn theme structure.

#### Sample Code for Dawn Theme:

```liquid
{{ 'component-card.css' | asset_url | stylesheet_tag }}
<div class="collection page-width">
    <h2> {{ wishlist.title | default: "Shared wishlist" }}</h2>
    <ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop"> 
      {% for item in wishlist.items.value %}
      <li class="grid__item">
        {% render 'card-product',
          card_product: item.product,
          media_aspect_ratio: "adapt",
          image_shape: "default",
          show_secondary_image: true,
          show_vendor: true,
          show_rating: true,
          skip_styles: false,
          section_id: section.id,
          quick_add: false
        %}
        </li>
      {% endfor %}
    </ul>
</div>

```

#### Adding a "Share button" to your Wishlist page

To allow your customers to easily share their wishlists, you can add a dedicated "Share button" to their wishlist page. This button will generate a shareable link to their public wishlist.

You can implement this feature by adding the following code snippet to your wishlist page template:

Code snippet

```
{% if metadata.sharedWishlist.handle != blank %}
<fish-wishlist-share-button
  data-url="https://<MYSTORE.COM>/apps/fish-wishlist/shared-wishlist/{{ metadata.sharedWishlist.handle }}"
  data-title="{{ metadata.sharedWishlist.title }}"
  title="{{ metadata.sharedWishlist.title }}">
  <button class="fish-wishlist-share-button fish-wishlist-button--link button--share">
    <svg width="13" height="12" viewBox="0 0 13 12" class="icon icon-share" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path d="M1.625 8.125V10.2917C1.625 10.579 1.73914 10.8545 1.9423 11.0577C2.14547 11.2609 2.42102 11.375 2.70833 11.375H10.2917C10.579 11.375 10.8545 11.2609 11.0577 11.0577C11.2609 10.8545 11.375 10.579 11.375 10.2917V8.125" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.14775 1.27137C6.34301 1.0761 6.65959 1.0761 6.85485 1.27137L9.56319 3.9797C9.75845 4.17496 9.75845 4.49154 9.56319 4.6868C9.36793 4.88207 9.05135 4.88207 8.85609 4.6868L6.5013 2.33203L4.14652 4.6868C3.95126 4.88207 3.63468 4.88207 3.43942 4.6868C3.24415 4.49154 3.24415 4.17496 3.43942 3.9797L6.14775 1.27137Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.125C6.77614 1.125 7 1.34886 7 1.625V8.125C7 8.40114 6.77614 8.625 6.5 8.625C6.22386 8.625 6 8.40114 6 8.125V1.625C6 1.34886 6.22386 1.125 6.5 1.125Z" fill="currentColor"></path> </svg>
    <span>Send Share Link</span>
  </button>
  <button class="fish-wishlist-share-button button--copy">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="4 3 12 14"><path fill-rule="evenodd" d="M6.515 4.75a2 2 0 0 1 1.985-1.75h3a2 2 0 0 1 1.985 1.75h.265a2.25 2.25 0 0 1 2.25 2.25v7.75a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-7.75a2.25 2.25 0 0 1 2.25-2.25h.265Zm1.985-.25h3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-1.987 1.73.002.02h-.265a.75.75 0 0 0-.75.75v7.75c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.75a.75.75 0 0 0-.75-.75h-.265a2 2 0 0 1-1.985 1.75h-3a2 2 0 0 1-1.987-1.77Z"></path></svg>
    <span>Copy Share Link</span>
  </button>
</fish-wishlist-share-button>
{% endif %}
```

**Important Note:** These share buttons will only be visible to a customer if they have previously enabled the shared wishlist feature using the dedicated button within the wishlist drawer.

#### 🛠 Customization Tips:

* You can use  `card-product` or any custom snippet from your current theme.
* Adjust the grid layout, headings, and styling to better fit your brand.
* Use conditional logic to show different views for empty wishlists or logged-in users.


# Wishlist Landing Page

Let your customers access their wishlist via a specific page on your site (rather than just via the slide out drawer). This feature is available by default on all stores.

You can simply add this link anywhere on your site (or in your email templates) to point customers to their wishlist:

https\://`<<yourstore.com>>`/apps/fish-wishlist/customer-wishlist/WL1  `(replace yourstore.com with your store's domain)`<br>

***

### Accessing the Custom Page Editor (advanced)

<figure><img src="/files/V6jINuv6F2pntlBEtMA4" alt=""><figcaption></figcaption></figure>

Fish Wishlist provides a **hidden editor** for advanced users. You can manage your wishlist page directly through the following link:

➡️ [Wishlist Page Editor (Advanced Access)](https://admin.shopify.com/apps/fish-wishlist/app/pages)

> **Note:** This link is hidden in your app admin. Use it only if you’re familiar with theme development and advanced customization.

### Editing the Shared Wishlist Page Template

The shared wishlist page uses a **generic grid-based layout**, which is designed to work across Shopify themes.

You can fully customize this page via the hidden editor and insert any theme-compatible code. Below is a sample template for rendering the shared wishlist using Shopify’s Dawn theme structure.

#### Sample Code for Dawn Theme:

```liquid
{{ 'component-card.css' | asset_url | stylesheet_tag }}
<div class="collection page-width">
    <h2> {{ wishlist.title | default: "Shared wishlist" }}</h2>
    <ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop"> 
      {% for item in wishlist.items.value %}
      <li class="grid__item">
        {% render 'card-product',
          card_product: item.product,
          media_aspect_ratio: "adapt",
          image_shape: "default",
          show_secondary_image: true,
          show_vendor: true,
          show_rating: true,
          skip_styles: false,
          section_id: section.id,
          quick_add: false
        %}
        </li>
      {% endfor %}
    </ul>
</div>

```

#### 🛠 Customization Tips:

* You can use  `card-product` or any custom snippet from your current theme.
* Adjust the grid layout, headings, and styling to better fit your brand.
* Use conditional logic to show different views for empty wishlists or logged-in users.


# Wishlist Section On Any Page

The Wishlist Page section allows you to insert a customer's dynamic product collection (Wishlist, Abandoned Cart, or Recently Purchased items) into any template on your Shopify site.

#### Key Benefits & Use Cases

This section is a powerful tool for driving conversions by reminding customers of the items they intended to purchase. Use the Wishlist Page section to:

* **Boost Conversions on Product/Collection Pages:** Place the section *Above your Related Products* on PDPs (Product Detail Pages) or PLPs (Product Listing Pages) to encourage customers to add a desired item to their cart before they browse similar products.
* **Engage Shoppers on the Homepage**: Feature a customer's saved products directly on your homepage to personalize the shopping experience from the moment they arrive.
* **Enhance Loyalty Programs**: Display a customer's personalized wishlist on Loyalty or Promotion pages to motivate them to redeem points or meet a spending threshold.

***

<figure><img src="/files/OInGcKVuhmvpBJ54l0RG" alt=""><figcaption></figcaption></figure>

#### How to Add the Wishlist Page Section to a Template

Adding the Wishlist Page section is done via the standard Shopify theme editor, making it quick and easy to deploy anywhere on your site.

1. From your Shopify Admin, navigate to Online Store > Themes.
2. Find your live theme and click the Customize button.
3. In the theme editor, use the dropdown menu at the top to navigate to the desired page or template where you want to add the wishlist (e.g., `Product page`, `Collection page`, or `Homepage`).
4. In the left sidebar menu, under the Template area, click the + Add section button.
5. Search for and select the Wishlist Page section.
6. Configure the section settings in the sidebar (see below).
7. Click Save in the top right corner.

***


# Customise Wishlist Rules for Specific Products

Use Fish Wishlist's Tag Actions to customise the way the Add to Wishlist and Add to Cart buttons function.

{% embed url="<https://www.youtube.com/watch?v=TpIeVfmW51Q>" %}

***

### Accessing Tag Actions

1. Open the Fish Wishlist app in your Shopify admin.
2. Navigate to the Settings page.
3. Scroll down until you reach the Tag Actions section.

***

### Available Action Types

There are three main categories of actions you can configure:

#### 1. Add to Cart Button Action

This overrides the behavior of the "Add to Cart" button inside the wishlist drawer.

* **Rename Label**: Change the text of the button (e.g., change "Add to Cart" to "Pre-order").
* **Disable Button**: Keeps the button visible but makes it unclickable.
* **Hide Button**: Removes the button entirely from the wishlist item.
* **Redirect after Click**: Send the user to a specific URL (like a collection page or a custom form) after they click the button.
* **Custom JavaScript**: For advanced users who want to trigger a custom script.

#### 2. Social Proof Widget Action

This affects the social proof notifications (e.g., "5 people have this in their wishlist") that appear on your product pages.

* Hide Widget: Use this to prevent the widget from showing on specific products, such as out-of-stock items or new arrivals where data might still be low.

#### 3. Wishlist Item Action

This controls elements of the wishlist item display on the product page or within the wishlist itself.

* **Hide Price**: Useful for "Price on Application" items or products where you wish to hide the cost until a specific tag is removed.

***

### How to Set Up an Action

#### Identify the Product Tag

In the Product Tag field, enter the specific tag you use in Shopify (e.g., `new`, `clearance`, or `pre-order`).

> Pro Tip: Use an asterisk `*` in the tag field to act as a wildcard. This will apply the action to all products in your store.

#### Select the Function

Choose the desired behavior from the dropdown menu (e.g., *Rename Label*).

#### Example: Renaming the Button for All Products

1. Under Add to Cart Button Action, enter `*` in the Product Tag field.
2. Select Rename Label from the dropdown.
3. Type your new text (e.g., "Buy Now") into the value field.
4. Click Save.
5. Open your wishlist drawer on your store to see the updated button label.

***

### Need Custom Functionality?

The Tag Actions system is flexible, and we frequently add new capabilities on a case-by-case basis. If you have a specific requirement—such as a different type of redirect or a unique button behavior not listed here—please [contact our support team](mailto:support@nativeappco.com) and we will be happy to assist you.


# Print Add to Wishlist QR Codes

Stores can create QR Codes for products that can be printed and allow customers to scan products in store and automatically add them to their wishlist.

{% hint style="info" %}
This feature is available for all stores using Fish Wishlist. You do not need to use Shopify POS.
{% endhint %}

### Benefits:

* **Instant Wishlist Saves**: Customers can scan a barcode on any product in-store and immediately save it to their wishlist.
* **Shopify POS Integration**: If using Shopify POS, staff can easily access a customer’s wishlist directly within their profile.
* **Online Accessibility**: Even without Shopify POS, customers can always access their wishlist online.
* **Enhanced Marketing Campaigns**: Wishlist data can be integrated with your marketing platforms to power customer reminders, sale notifications, and back-in-stock alerts.

### How it works:

The QR Code Add to Wishlist Function allows customers to effortlessly add products to their wishlist by simply scanning a QR code.

* Stores can print "add to wishlist" QR codes directly on their product labels.
* When a customer scans the QR code, it opens the store's website and triggers the wishlist add function for the specified product variant.
* An example URL for adding an item to a wishlist is: `https://fish-wishlist.myshopify.com/?fvid=<variantid>&opendrawer=true`
* The `opendrawer` parameter is optional and, if included, will open the wishlist drawer after the item is added.

Sample QR Code:

<figure><img src="/files/DLGbMP2HgW2AirANd9Xc" alt=""><figcaption></figcaption></figure>

### Populating QR codes:

{% hint style="info" %}
We are more than happy to help with bulk generating QR codes- please email <fish@nativeappco.com> if you'd like us to help.
{% endhint %}

* To create QR codes for all your products, you first need to export a list of product variant IDs using an app such as Matrixify. The variant ID is the only column you need for generating your QR code URLs, however you may wish to also export other columns such as SKU, barcode, title & price.
* Once you have your data, you need to create a list of URLs in the following format: `https://<yourdomain.com>/?fvid=<variantid>&opendrawer=true`
  * \<yourdomain.com> = your store's domain
  * \<variantid> = the variant ID of the product you want to add to wishlist (this is a value generated by Shopify. It is different to your SKU and barcode.
* You may have existing barcode printing software that can print the barcodes. If not, there are lots of [online tools](https://www.google.com/search?q=bulk+qr+code+generator) available that can generate QR codes in bulk.


# GA4 Integration

With GA4 integration, Fish Wishlist helps Shopify merchants track “Add to Wishlist” events for Google Analytics 4. GA4 integration is enabled by default and you can easily toggle it on and off.

This data provides valuable insights into customer preferences and lets you see which products are popular with your audience.

### Key Benefits

1. **Track Wishlist Events in GA4**:\
   Automatically captures “Add to Wishlist” actions and sends them to GA4 for reporting. Track events such as:
   * **Product ID**: Identifies specific products added to wishlists.
   * **Product Name**: Records the product name, making it easy to track which items customers are interested in.
2. **Hassle-Free Setup**:\
   GA4 tracking is enabled by default, so you can start monitoring wishlist activity in GA4 without any additional setup. For custom tracking needs, you can disable this feature anytime.

### How It Works

1. **Automatic Tracking Setup**:\
   Fish Wishlist has built-in GA4 event tracking for “Add to Wishlist” events, which is turned on by default. You can verify or modify this in the app’s admin settings if necessary.

   <figure><img src="/files/Pjtw1h3VarG3m4OVXtl7" alt=""><figcaption></figcaption></figure>
2. **Data Captured**:\
   Each time a customer adds a product to their wishlist, Fish Wishlist sends a GA4 “add\_to\_wishlist” event with product details. This makes it easy to monitor which products are popular across your site.
3. **GA4 Reporting**:\
   Access your “Add to Wishlist” events in GA4 to analyze customer interests. You can also use these insights for retargeting or promotional campaigns.

### Example Data Sent

* **Event Name**: `add_to_wishlist`
* **Product ID**: Tracked as `item_id`
* **Product Name**: Captured as `item_name` for easy identification.

### Troubleshooting

* **Existing GA4 Setup**: If your store already uses a custom GA4 setup, you can disable Fish Wishlist’s GA4 integration in the settings.
* **Missing Product Data**: If product information doesn’t show as expected in GA4, double-check that the app's GA4 integration is enabled and that your GA4 setup is configured to accept wishlist events.


# Meta Integration

The Meta Integration in the Fish Wishlist app makes it easy to track and use wishlist actions on Facebook and Instagram for effective marketing.

With just a few clicks, you can set up tracking for “Add to Wishlist” events, which helps you reach customers on social media based on what they love.

### Key Benefits

1. **Track Wishlist Events**:\
   Automatically sends “Add to Wishlist” data to Meta, which you can use to create ads for Facebook and Instagram. This includes:
   * **Product IDs**: Tracks which product was added to the wishlist.
   * **Product Names**: Captures the item name for better reporting and targeting.
2. **Simple Setup in Admin Settings**:\
   Meta tracking is pre-enabled in your app's admin settings, so it's ready to go right away. For stores with custom tracking, you can easily turn off this feature if needed.

### How It Works

1. **Easy Configuration**:\
   By default, Meta Integration is switched on. You can go to Admin -> Settings to verify it or disable it if your store has another tracking setup.\
   ![](/files/iB7IGXeaoEjkTtEzPhHc)
2. **Tracking in Action**:\
   When a customer adds an item to their wishlist, Fish Wishlist sends the “Add to Wishlist” event directly to Meta with all the details.
3. **Verify with Meta Pixel Helper**:\
   Use the Meta Pixel Helper Chrome extension to confirm tracking is active. If the pixel isn’t detected, check your store’s theme and ensure custom scripts are enabled.

### Example Data

* **Product ID**: Sent with the event as `content_ids`.
* **Product Name**: Captured as `content_name` for easy identification.

### Troubleshooting

* **Already Have a Pixel?** No problem. Just turn off the Meta Integration in settings if your store has its own tracking solution.
* **Extensions Not Detecting**: If there’s an issue with detection, double-check that tracking is enabled in your store theme settings.


# Klaviyo

Fish Wishlist supports Klaviyo integration via Shopify Flow. This allows you to trigger Klaviyo events when customers add or remove products from their wishlist.

***

### How it works

When a customer adds or removes a product from their wishlist, Fish Wishlist creates a **Shopify Flow trigger**. You can then use Shopify Flow to send event data to Klaviyo as events.

We’ve created **ready-to-use templates** to help you get started quickly.

***

### Prerequisites

To use this integration, you’ll need:

* Fish Wishlist installed and active on your Shopify store
* Klaviyo installed and integrated with Shopify
* Shopify Flow installed (free for Shopify and Shopify Plus plans)
* Your **Klaviyo Private API Key** (for sending event data)

***

### Available Templates

<figure><img src="/files/4v4LlxQNlQjgqRFY92db" alt=""><figcaption></figcaption></figure>

You can load our prebuilt Shopify Flow templates here:\
👉 [Use Templates](https://admin.shopify.com/apps/flow/editor/templates?apps=157109354497)

#### 1. Trigger marketing campaign when customer adds product to wishlist

Sends a custom event to Klaviyo when a product is added to a wishlist.\
**Useful for flows like:** “Send a reminder if item hasn’t been purchased in X days.”

#### 2. Cancel marketing campaign when customer removes product from wishlist

Sends a custom event to Klaviyo when a product is removed from a wishlist.\
**Useful for flows like:** “Stop reminding users about items they’re no longer interested in.”

***

### Customizing the Flow

Each template delivers events to Klaviyo. You can customize the payload based on your needs.

The only field you have to populate is your Klaviyo Public API Key. To fetch this, Navigate to "Account > Settings > API Keys" inside Klaviyo app.

<figure><img src="/files/8U3tW6NldGsjMLgVAW6R" alt=""><figcaption></figcaption></figure>

Once you have added your API key, you can publish the Flow and wishlist data will start flowing through to Klaviyo.

***

### Notes

* This integration is managed entirely via **Shopify Flow**
* Fish Wishlist triggers do not require any additional setup
* You can customize your own flows beyond the provided templates

***

### Support

Need help or want a custom flow? [Contact us](mailto:undefined) — we're happy to help you set it up.


# FoxSell Bundles

Stores using the [FoxSell Bundles](https://apps.shopify.com/foxsell-bundles-plus) app can use [Fish Wishlist](https://apps.shopify.com/fish-wishlist) to let customers add a bundle to their wishlist.

### Key Benefits

1. **Customers can save bundles for later**: If a customer users the bundle builder they can save the bundle to their wishlist and purchase later.
2. **Bundles appear as a single item in Wishlist**: Customers can build multiple bundles to their list and save for later.
3. **Add to Cart from Wishlist:** When a Bundle is added to cart from wishlist, it will work the same way as if you added directly from the FoxSell Bundles widget.<br>

### How it works

1. Before you start, you should have FoxSell Bundles and Fish Wishlist apps active on your store.
2. Add a snippet to your theme called `fish-foxsell.liquid`&#x20;
3. Paste this code into the file and save (it looks like a lot of code, but all you need to do is Copy and Paste).

```
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if(!FishWishlist) return
    const bundleAtcButton = document.querySelector('.fsb__bundle-add-to-cart')
    if(!bundleAtcButton) return
    const wishlistButton = FishWishlist.helpers.insertPDPButton({
      cssSelector: ".fsb__bundle-add-to-cart",
      insertPosition: "insertbefore",
      classes: { pdpButton: "fsb__button" }
    })
    if(!wishlistButton) return
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.attributeName === 'disabled') {
          // Sync disabled state
          if(wishlistButton.dataset.isAdded == "true") return
          if(bundleAtcButton.disabled) wishlistButton.classList.add("disabled")
          else wishlistButton.classList.remove("disabled");
        }
      }
    });
    if(wishlistButton.dataset.isAdded != "true") wishlistButton.classList.add("disabled")
    observer.observe(bundleAtcButton, { attributes: true });
  })
  document.addEventListener("fishwishlist:item-removed-from-wishlist", function(e, d) {
    let bundleWishlistButton = document.querySelector('wishlist-button-pdp.fsb__button')
    let isBundleDisabled = document.querySelector('.fsb__bundle-add-to-cart').disabled
    if(isBundleDisabled) bundleWishlistButton.classList.add("disabled")
    else bundleWishlistButton.classList.remove("disabled")
  })
  document.addEventListener("fishwishlist:item-added-to-wishlist", function(e, d) {
    if(!FishAPI) return
    let variant = e?.detail?.variant
    let wishlistId = e?.detail?.wishlistId
    const bundleSideBar = document.querySelector('.fsb__sidebar')
    if(!bundleSideBar) return
    const container = bundleSideBar.closest('section')
    const wishlistButton = container.querySelector(`wishlist-button-pdp[data-variant-id="${variant.id}"]`)
    if(!wishlistButton) return
    const selectedVariants = [
      ...Object.entries(bundleSideBar.bundleItems).map(([id, variantData]) => ({
        variantId: parseInt(id, 10),
        quantity: variantData.quantity,
        category: variantData.category,
        type: "product",
        properties: {}
      })), ...Object.entries(bundleSideBar.addOnItems).map(([id, variantData]) => ({
        variantId: parseInt(id, 10),
        quantity: variantData.quantity,
        type: "addOns",
        properties: {}
      }))
    ]
    
    const readableProperties = {};
    [...Object.entries(bundleSideBar.bundleItems), ...Object.entries(bundleSideBar.addOnItems)].forEach(([id, variantData]) => {
      let d = variantData.title;
      readableProperties[d] = readableProperties[d] ? `x${parseInt(readableProperties[d].replace("x", "")) + variantData.quantity}` : readableProperties[d] = `x${variantData.quantity}`
    })
    
    properties = {
      ...readableProperties,
      '__foxsell:dynamic_add_on_bundle_id': `${bundleId}_${Date.now()}`,
      '__foxsell:dynamic_add_on_bundle_items': JSON.stringify(selectedVariants),
      "__foxsell:original_bundle_price": 10000
    }
    FishAPI.addProperties(e.detail.wishlistId, e.detail.variant.id, properties)
  })
</script>
```

4. To activate the integration, insert  the following liquid tag to the theme template where FoxSell Bundles are active: `{% render 'fish-foxsell' %}`\
   If you are using Dawn theme, you can insert this at the bottom of `main-product.liquid`
5. After you Save, you will see the "Add to List" button appear within the FoxSell Bundle widget on your site, as follows:

<figure><img src="/files/Lk8fRtwYSFxLsopmqskG" alt=""><figcaption></figcaption></figure>

For help with installation, email <fish@nativeappco.com>&#x20;


# Quiz Kit

The Fish Wishlist and Quiz Kit integration allows quiz results to automatically populate a customer’s wishlist.

When a shopper completes a quiz, the recommended products from Quiz Kit are seamlessly added to their wishlist.

This integration is available to any store with both [**Fish Wishlist**](https://apps.shopify.com/fish-wishlist) and [**Quiz Kit**](https://apps.shopify.com/quiz-kit) installed.

***

<figure><img src="/files/gXCbv0bBpSCZwt2Wcxmq" alt=""><figcaption></figcaption></figure>

***

### How it works

* A customer completes a quiz in Quiz Kit.
* Quiz Kit generates product recommendations.
* The recommended products are automatically added to the customer’s Fish Wishlist.

This makes it easier for customers to revisit their personalized quiz results later and take action directly from their wishlist.

***

### Setup Instructions

1. In your Shopify Admin, open the theme editor or theme code editor.
2. Locate the section where your Quiz Kit quiz is installed.
3. Create a new Liquid section (or edit an existing one under the quiz section).
4. Add the following script to the section:

```html
<script>
document.addEventListener('quizKitResultsPageLoaded', function (e) { 
  if(!("FishWishlist" in window)) return
  for(let recommendedProduct of e.detail.recommendedProducts) {
    let fishVariant = recommendedProduct.variants?.[0]
    if(!fishVariant) continue
    FishAPI.addToWishlist('WL1', {
      ...fishVariant,
      title: `${recommendedProduct.title}`,
      availableForSale: fishVariant.available_for_sale,
      featured_image: {
        src: fishVariant.image.src || recommendedProduct.image.src,
        src_small: fishVariant.image.src || recommendedProduct.image.src
      },
      price: {
        amount: parseFloat(fishVariant.price.replace(/[^0-9.]/g, ''))
      },
      compareAtPrice: {
        amount: fishVariant.compare_at_price
      }
    })
    FishWishlist.helpers.setCount()
    document.querySelector('wishlists-drawer').renderWishlistElements()
  }
}, false);
</script>
```

***

### That’s it!

Now, whenever a customer completes a quiz in Quiz Kit, their recommended products will automatically appear in their Fish Wishlist.

***


# Common Issues

This page contains issues that are commonly reported, along with solutions. We will continue to add to this page over time.

### When a customer Adds to Cart from Wishlist, their cart doesn't update

Fish Wishlist is built to be compatible with most Shopify themes. However, in some themes, the cart does not automatically refresh when you use the Add To Cart button in the wishlist drawer.

Please [Contact Us ](mailto:support@nativeappco.com)and we can apply a fix for your theme.

### Fish Wishlist is breaking the "Close (X)" button on my theme's native mini-cart

This is an issue that has been reported on some Shopify themes. &#x20;

Please [Contact Us ](mailto:support@nativeappco.com)and we can apply a fix for your theme.


# Frequently Asked Questions

### **Installation & Setup**

#### How do I get started with Fish Wishlist?

Fish Wishlist is built natively for Shopify. You can install it and use Theme Sections for a code-free setup.

[View Setup Guide](https://wishlist.nativeappco.com/install-and-setup/theme-setup)

#### How do I add the wishlist heart to collection pages?

You can add the "Add to Wishlist" heart icon to product cards by adding a specific code snippet to your collection grid.

[View Collection Grid Instructions](https://www.google.com/search?q=https://wishlist.nativeappco.com/install-and-setup/theme-setup%23add-our-code-snippet-to-collection-grid)

#### Can I add a wishlist widget to the checkout?

Yes! Shopify Plus users can add a checkout upsell widget to encourage logged-in customers to add items from their wishlist during checkout.

[View Checkout Widget Guide](https://wishlist.nativeappco.com/install-and-setup/checkout-upsell-widget)

### **Customization**

#### How do I change the wording of the wishlist buttons?

All text, including button labels and marketing opt-ins, can be modified via the "Copy & Translations" settings in the app admin.

[View Translation Guide](https://wishlist.nativeappco.com/customisation/copy-and-translations)

#### Can I use a separate wishlist page instead of a sidebar drawer?

Yes, the app supports a dedicated landing page for customers to view their saved items.

[View Landing Page Guide](https://www.google.com/search?q=https://wishlist.nativeappco.com/customisation/wishlist-landing-page)

#### Can customers share their wishlists?

Yes, sharing functionality is built-in, allowing customers to send their lists to friends or family.

[View Sharing Guide](https://www.google.com/search?q=https://wishlist.nativeappco.com/customisation/wishlist-sharing)

### **Common Issues**

#### Why doesn't my cart update immediately after adding from the wishlist?

Some themes require a manual fix to ensure the cart refreshes instantly when adding items from the wishlist drawer.

[View Troubleshooting Info](https://wishlist.nativeappco.com/faq/common-issues)

***


# Contact Us

Need more help.


# Privacy Policy

## Privacy policy

We respect your privacy and are committed to protecting it through our compliance with this privacy policy (“Policy”). This Policy describes the types of information we may collect from you or that you or your customers may provide (“Personal Information”) in the "Fish Wishlist" or "Stork Credit" Shopify application (“Shopify Application” or “Service”) and any of its related products and services (collectively, “Services”), and our practices for collecting, using, maintaining, protecting, and disclosing that Personal Information. It also describes the choices available to you regarding our use of your Personal Information and how you can access and update it.

This Policy is a legally binding agreement between you (“User”, “you” or “your”) and Native App Co (“Native App Co”, “we”, “us” or “our”). If you are entering into this agreement on behalf of a business or other legal entity, you represent that you have the authority to bind such entity to this agreement, in which case the terms “User”, “you” or “your” shall refer to such entity. If you do not have such authority, or if you do not agree with the terms of this agreement, you must not accept this agreement and may not access and use the Shopify Application and Services. By accessing and using the Shopify Application and Services, you acknowledge that you have read, understood, and agree to be bound by the terms of this Policy. This Policy does not apply to the practices of companies that we do not own or control, or to individuals that we do not employ or manage.

### Collection of personal information

You can access and use the Shopify Application and Services without telling us who you are or revealing any information by which someone could identify you as a specific, identifiable individual. If, however, you wish to use some of the features offered in the Shopify Application, you may be asked to provide certain Personal Information (for example, your store name and e-mail address).

We receive and store any information you knowingly provide to us when you install the Service. When required, this information may include the following:

* Online store details (such as myShopify domain, store currency, store domain etc)
* Contact information (such as store email address)

You can choose not to provide us with your Personal Information, but then you may not be able to take advantage of some of the features in the Shopify Application. Users who are uncertain about what information is mandatory are welcome to contact us.

App does not collect any personal information from your online store customers.

### Privacy of children

We do not knowingly collect any Personal Information from children under the age of 18. If you are under the age of 18, please do not submit any Personal Information through the Shopify Application and Services. If you have reason to believe that a child under the age of 18 has provided Personal Information to us through the Shopify Application and Services, please contact us to request that we delete that child’s Personal Information from our Services.

We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce this Policy by instructing their children never to provide Personal Information through the Shopify Application and Services without their permission. We also ask that all parents and legal guardians overseeing the care of children take the necessary precautions to ensure that their children are instructed to never give out Personal Information when online without their permission.

### Use and processing of collected information

We act as a data controller and a data processor in terms of the GDPR when handling Personal Information, unless we have entered into a data processing agreement with you in which case you would be the data controller and we would be the data processor.

Our role may also differ depending on the specific situation involving Personal Information. We act in the capacity of a data controller when we ask you to submit your Personal Information that is necessary to ensure your access and use of the Shopify Application and Services. In such instances, we are a data controller because we determine the purposes and means of the processing of Personal Information and we comply with data controllers’ obligations set forth in the GDPR.

We act in the capacity of a data processor in situations when you submit Personal Information through the Shopify Application and Services. We do not own, control, or make decisions about the submitted Personal Information, and such Personal Information is processed only in accordance with your instructions. In such instances, the User providing Personal Information acts as a data controller in terms of the GDPR.

In order to make the Shopify Application and Services available to you, or to meet a legal obligation, we may need to collect and use certain Personal Information. If you do not provide the information that we request, we may not be able to provide you with the requested products or services. Any of the information we collect from you may be used for the following purposes:

* Create and manage your store’s account
* Deliver products or services
* Run and operate the Shopify Application and Services

Processing your Personal Information depends on how you interact with the Shopify Application and Services, where you are located in the world and if one of the following applies: (i) you have given your consent for one or more specific purposes; this, however, does not apply, whenever the processing of Personal Information is subject to California Consumer Privacy Act or European data protection law; (ii) provision of information is necessary for the performance of an agreement with you and/or for any pre-contractual obligations thereof; (iii) processing is necessary for compliance with a legal obligation to which you are subject; (iv) processing is related to a task that is carried out in the public interest or in the exercise of official authority vested in us; (v) processing is necessary for the purposes of the legitimate interests pursued by us or by a third party.

We rely on user’s consent as a legal base as defined in the GDPR upon which we collect and process your Personal Information.

Note that under some legislations we may be allowed to process information until you object to such processing by opting out, without having to rely on consent or any other of the legal bases above. In any case, we will be happy to clarify the specific legal basis that applies to the processing, and in particular whether the provision of Personal Information is a statutory or contractual requirement, or a requirement necessary to enter into a contract.

### Payment processing

In case of Services requiring payment, we rely on Shopify Payment API. We use third-party payment processors (“Payment Processors”) to assist us in processing your payment information securely.

Payment Processors adhere to the latest security standards as managed by the PCI Security Standards Council, which is a joint effort of brands like Visa, MasterCard, American Express and Discover. Sensitive and private data exchange happens over a SSL secured communication channel and is encrypted and protected with digital signatures, and the Shopify Application and Services are also in compliance with strict vulnerability standards in order to create as secure of an environment as possible for Users. We will share payment data with the Payment Processors only to the extent necessary for the purposes of processing your payments, refunding such payments, and dealing with complaints and queries related to such payments and refunds.

Please note that the Payment Processors may collect some Personal Information from you, which allows them to process your payments (e.g., your email address, address, credit card details, and bank account number) and handle all the steps in the payment process through their systems, including data collection and data processing. The Payment Processors’ use of your Personal Information is governed by their respective privacy policies which may or may not contain privacy protections as protective as this Policy. We suggest that you review their respective privacy policies.

### Disclosure of information

To maintain the highest level of privacy and to protect your Personal Information to the full extent, we do not share your Personal Information with anyone and for any reason.

### Retention of information

We will retain and use your Personal Information for the period necessary to enforce our agreements, resolve disputes, and unless a longer retention period is required or permitted by law up to a maximum of 24 months.

We may use any aggregated data derived from or incorporating your Personal Information after you update or delete it, but not in a manner that would identify you personally. Once the retention period expires, Personal Information shall be deleted. Therefore, the right to access, the right to erasure, the right to rectification, and the right to data portability cannot be enforced after the expiration of the retention period.

### Transfer of information

Depending on your location, data transfers may involve transferring and storing your information in a country other than your own. However, this will not include countries outside the European Union and European Economic Area. If any such transfer takes place, you can find out more by checking the relevant sections of this Policy or inquire with us using the information provided in the contact section.

### Data protection rights under the GDPR

If you are a resident of the European Economic Area (“EEA”), you have certain data protection rights and we aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Information. If you wish to be informed what Personal Information we hold about you or about your store customers and if you want it to be removed from our systems, please contact us. In certain circumstances, you have the following data protection rights:

(i) You have the right to withdraw consent where you have previously given your consent to the processing of your Personal Information or Personal Information of your customers. To the extent that the legal basis for our processing of your Personal Information is consent, you have the right to withdraw that consent at any time. Withdrawal will not affect the lawfulness of processing before the withdrawal.

(ii) You have the right to learn if your Personal Information or Personal Information of your customers is being processed by us, obtain disclosure regarding certain aspects of the processing, and obtain a copy of your Personal Information undergoing processing.

(iii) You have the right to verify the accuracy of your information and ask for it to be updated or corrected. You also have the right to request us to complete the Personal Information you believe is incomplete.

(iv) You have the right to object to the processing of your information if the processing is carried out on a legal basis other than consent. Where Personal Information is processed for the public interest, in the exercise of an official authority vested in us, or for the purposes of the legitimate interests pursued by us, you may object to such processing by providing a ground related to your particular situation to justify the objection.

(v) You have the right, under certain circumstances, to restrict the processing of your Personal Information. These circumstances include: the accuracy of your Personal Information is contested by you and we must verify its accuracy; the processing is unlawful, but you oppose the erasure of your Personal Information and request the restriction of its use instead; we no longer need your Personal Information for the purposes of processing, but you require it to establish, exercise or defend your legal claims; you have objected to processing pending the verification of whether our legitimate grounds override your legitimate grounds. Where processing has been restricted, such Personal Information will be marked accordingly and, with the exception of storage, will be processed only with your consent or for the establishment, to exercise or defense of legal claims, for the protection of the rights of another natural, or legal person or for reasons of important public interest.

(vi) You have the right, under certain circumstances, to obtain the erasure of your Personal Information from us. These circumstances include: the Personal Information is no longer necessary in relation to the purposes for which it was collected or otherwise processed; you withdraw consent to consent-based processing; you object to the processing under certain rules of applicable data protection law; the processing is for direct marketing purposes; and the personal data have been unlawfully processed. However, there are exclusions of the right to erasure such as where processing is necessary: for exercising the right of freedom of expression and information; for compliance with a legal obligation; or for the establishment, to exercise or defense of legal claims.

(vii) You have the right to receive your Personal Information that you have provided to us in a structured, commonly used, and machine-readable format and, if technically feasible, to have it transmitted to another controller without any hindrance from us, provided that such transmission does not adversely affect the rights and freedoms of others.

(viii) You have the right to complain to a data protection authority about our collection and use of your Personal Information. If you are not satisfied with the outcome of your complaint directly with us, you have the right to lodge a complaint with your local data protection authority. For more information, please contact your local data protection authority in the EEA. This provision is applicable provided that your Personal Information is processed by automated means and that the processing is based on your consent, on a contract which you are part of, or on pre-contractual obligations thereof.

### California privacy rights

Consumers residing in California are afforded certain additional rights with respect to their Personal Information under the California Consumer Privacy Act (“CCPA”). If you are a California resident, this section applies to you.

In addition to the rights as explained in this Policy, California residents who provide Personal Information as defined in the statute to obtain Services for personal, family, or household use are entitled to request and obtain from us, once a calendar year, information about the categories and specific pieces of Personal Information we have collected and disclosed.

Furthermore, California residents have the right to request deletion of their Personal Information or opt-out of the sale of their Personal Information which may include selling, disclosing, or transferring Personal Information to another business or a third party for monetary or other valuable consideration. To do so, simply contact us. We will not discriminate against you if you exercise your rights under the CCPA.

### How to exercise your rights

Any requests to exercise your rights can be directed to us through the contact details provided in this document. Please note that we may ask you to verify your identity before responding to such requests. Your request must provide sufficient information that allows us to verify that you are the person you are claiming to be or that you are the authorized representative of such person. If we receive your request from an authorized representative, we may request evidence that you have provided such an authorized representative with power of attorney or that the authorized representative otherwise has valid written authority to submit requests on your behalf.

You must include sufficient details to allow us to properly understand the request and respond to it. We cannot respond to your request or provide you with Personal Information unless we first verify your identity or authority to make such a request and confirm that the Personal Information relates to you.

### Links to other resources

The Shopify Application and Services contain links to other resources that are not owned or controlled by us. Please be aware that we are not responsible for the privacy practices of such other resources or third parties. We encourage you to be aware when you leave the Shopify Application and Services and to read the privacy statements of each and every resource that may collect Personal Information.

### Information security

We secure information you provide on computer servers in a controlled, secure environment, protected from unauthorized access, use, or disclosure. We maintain reasonable administrative, technical, and physical safeguards in an effort to protect against unauthorized access, use, modification, and disclosure of Personal Information in our control and custody. However, no data transmission over the Internet or wireless network can be guaranteed.

Therefore, while we strive to protect your Personal Information, you acknowledge that (i) there are security and privacy limitations of the Internet which are beyond our control; (ii) the security, integrity, and privacy of any and all information and data exchanged between you and the Shopify Application and Services cannot be guaranteed; and (iii) any such information and data may be viewed or tampered with in transit by a third party, despite best efforts.

As the security of Personal Information depends in part on the security of the device you use to communicate with us and the security you use to protect your credentials, please take appropriate measures to protect this information.

### Data breach

In the event we become aware that the security of the Shopify Application and Services has been compromised or Users’ Personal Information has been disclosed to unrelated third parties as a result of external activity, including, but not limited to, security attacks or fraud, we reserve the right to take reasonably appropriate measures, including, but not limited to, investigation and reporting, as well as notification to and cooperation with law enforcement authorities. In the event of a data breach, we will make reasonable efforts to notify affected individuals if we believe that there is a reasonable risk of harm to the User as a result of the breach or if notice is otherwise required by law. When we do, we will post a notice in the Shopify Application, send you an email.

### Changes and amendments

We reserve the right to modify this Policy or its terms related to the Shopify Application and Services at any time at our discretion. When we do, we will revise the updated date at the bottom of this page. We may also provide notice to you in other ways at our discretion, such as through the contact information you have provided.

An updated version of this Policy will be effective immediately upon the posting of the revised Policy unless otherwise specified. Your continued use of the Shopify Application and Services after the effective date of the revised Policy (or such other act specified at that time) will constitute your consent to those changes. However, we will not, without your consent, use your Personal Information in a manner materially different than what was stated at the time your Personal Information was collected.

### Acceptance of this policy

You acknowledge that you have read this Policy and agree to all its terms and conditions. By accessing and using the Shopify Application and Services and submitting your information you agree to be bound by this Policy. If you do not agree to abide by the terms of this Policy, you are not authorized to access or use the Shopify Application and Services.

### Contacting us

If you have any questions regarding the information we may hold about you or if you wish to exercise your rights, you may use the following data subject request form to submit your request:\
Submit a data access request

If you have any other questions, concerns, or complaints regarding this Policy, we encourage you to contact us using the details below:

<fish@nativeappco.com>

We will attempt to resolve complaints and disputes and make every reasonable effort to honor your wish to exercise your rights as quickly as possible and in any event, within the timescales provided by applicable data protection laws.

This document was last updated on 10 July, 2025

\ <br>


# Page 1


