Build A Simple Wishlist Using Customer Metafields With MESA

Got a request recently for a very simple wishlist functionality that simply saved products to the customer account. Lord knows there are hundreds of wishlist apps in the app store, but sometimes someone just wants the simplest possible solution. And this just might be the simplest wishlist app ever created.

We’re using MESA web request triggers in order to read and write products to a customer wishlist metafield that we’ve created.

Watch The Demo

Product Page

Here is the Add to wishlist button we’ve created with some custom liquid:

<button id="mesa-wishlist-add-product" class="product-form__submit button button--full-width button--secondary" style="position: relative;">
  <span>Add to wishlist</span>

  document.getElementById('mesa-wishlist-add-product').addEventListener('click', function() {
      document.getElementById('mesa-wishlist-add-product').textContent = 'Adding to wishlist';
      fetch('', {
          method: 'POST', // or 'POST', 'PUT', 'DELETE', etc.
          headers: {
              // Headers, if needed (e.g., content type, authorization)
          body: JSON.stringify({
              "product_id": {{ }},
              "customer_id": {{ }},
      .then(response => response.json()) // or .text(), etc., depending on the response type
      .then(data => {
        if (data.success) {
          document.getElementById('mesa-wishlist-add-product').textContent = 'Added to wishlist';
      .catch((error) => {
          console.error('Error:', error); // Handle any errors

Account Page

<div class="customer account">
  <ul id="mesa-account-wishlist">
    {% for product in customer.metafields.custom.wishlist.value %}
        <a href="{{ product.url }}" target="_blank">{{ product.title }}</a>
    {% endfor %}

Preview Workflow: Add Product To Wishlist

How do I use this demo file?

  1. Add MESA from the Shopify App Store. Enjoy a 7-day free trial to start.
  2. Import this download to My Workflows. Navigate to your automations then follow the prompt to import a workflow. Upload the downloaded ZIP file from this demo.
  3. That's it! Personalize any step if you want. You got this.
  4. Questions? Shoot me an email: [email protected]
We literally wrote the book on Shopify automation

Learn how to make Shopify work easier with your business processes.

Get the playbook - Free!

shopify automation playbook PDF