Zenn
💭

Shopifyでお気に入り（wishlist）を実装する方法を考察

2024/08/10に公開
Shopify
tech

はじめに

今回は、Shopify でお気に入り（wishlist）を実装する方法について考察してみました。

メタフィールドを用いて実装する方法は、App Proxy を用いて実装する方法を考察しました。

それでは、頑張っていきましょう。

お気に入り（wishlist）の定義

まずは、Shopify のお気に入り（wishlist）の定義からです。

「お気に入り」機能は、顧客がオンラインストアを閲覧している際に、気に入った商品を後で再度確認したり、購入したりできるようにするためのリストを提供するものです。このリストに商品を追加することで、顧客はショッピングカートに商品を入れることなく、興味のあるアイテムを追跡できます。

主な機能と特徴

  • 商品保存:

    • 顧客は、気になる商品をワンクリックで「お気に入り」に追加できます。これにより、購入の決定を急がせることなく、商品を保存しておくことができます。

  • リストの管理:

    • 顧客は、「お気に入り」リストに追加した商品を簡単に管理できます。リストから商品を削除したり、商品の詳細を再確認したりすることが可能です。

具体的に書くと、Shopify の商品ページやコレクションページにハートマークを表示させ、顧客がクリックしてお気に入り登録できるようにします。

そして、お気に入り登録した商品を顧客が管理できるようにします。

ここまでで、Shopifyのお気に入り（wishlist）の定義は終了です。

次に、Shopifyでお気に入り（wishlist）を導入するメリットについて解説していきます。

Shopifyにお気に入り（wishlist）を導入するメリット

Shopify にお気に入り（wishlist）を導入するメリットについて解説していきます。

お気に入り（wishlist）を導入するメリットが無いと、実装方法を考察する意味があまり無いですからね。

1. 顧客の購買体験の向上

「お気に入り」機能を利用することで、顧客は気になる商品を簡単にリストに保存でき、後でじっくり検討して購入することができます。これにより、ショッピングカートに入れる前に商品を比較したり、家族や友人と共有したりする手間が省けます。結果として、顧客のショッピング体験がスムーズになり、ストアへの満足度が向上します。

2. 購買意欲の喚起と売上の向上

「お気に入り」リストに保存された商品は、顧客が購入を検討しているアイテムであることが多いため、これらの商品に対するターゲットマーケティングが可能です。例えば、「お気に入り」に追加された商品がセール対象となった場合に通知を送ることで、顧客の購買意欲を喚起し、コンバージョン率の向上につなげることができます。また、在庫が少なくなった際にも通知を行うことで、早めの購入を促すことができます。

3. 顧客リテンションの向上

「お気に入り」機能を活用することで、顧客が一度気に入った商品をリストに保存しておけるため、再訪の動機を与えることができます。顧客が再度ストアを訪れた際に、保存した商品がまだ購入可能であることを確認できることで、リテンション率が向上します。これにより、リピート購入が促進され、長期的な顧客関係の構築に寄与します。

4. リマーケティングの強化

「お気に入り」リストに追加された商品データを活用することで、リマーケティング戦略を効果的に展開することが可能です。顧客の興味を引く商品に対してパーソナライズされたオファーや割引を提供することで、再訪率とコンバージョン率を高めることができます。また、このデータをもとに新たなプロモーションやキャンペーンを企画する際の参考材料としても活用できます。

5. 顧客インサイトの獲得

「お気に入り」機能を通じて、顧客がどのような商品に興味を持っているのかを把握することができます。このデータを分析することで、人気商品の傾向や季節ごとの顧客の好みを予測し、在庫管理や商品ラインナップの最適化に役立てることができます。これにより、売上の増加と在庫の効率的な運用が期待できます。

6. ソーシャルシェアの促進

「お気に入り」リストをソーシャルメディアでシェアする機能を提供することで、顧客が友人や家族と気に入った商品を共有しやすくなります。これにより、口コミ効果やソーシャルプルーフが期待でき、新規顧客の獲得にもつながります。特に、ホリデーシーズンやギフトシーズンにおいて、他者と共有できる「お気に入り」リストは、顧客の購買行動を促進する重要なツールとなります。

ここまでで、Shopifyにお気に入り（wishlist）を導入するメリットについて解説しました。

次に、Shopifyにお気に入り（wishlist）を導入するデメリットについて解説します。

ShopifyにWishlist機能を導入するデメリット

ここから、Shopifyにお気に入り（wishlist）を導入するデメリットについて解説します。

Shopifyにお気に入り（wishlist）機能を導入することは、多くのメリットをもたらしますが、同時にいくつかのデメリットや課題も存在します。これらのデメリットを理解し、事前に対策を講じることで、Wishlist機能の導入がもたらすリスクを最小限に抑えることができます。以下に、ShopifyでWishlist機能を導入する際の主なデメリットについて解説します。

1. 実装と運用のコスト

お気に入り機能を導入するためには、通常、サードパーティのアプリやカスタム開発が必要です。このため、初期導入時には開発コストやアプリの購入費用が発生します。また、機能の運用には定期的なメンテナンスが必要となり、システムのアップデートやバグ修正にリソースを割く必要があります。これにより、ストアの運営コストが増加する可能性があります。

2. システムの複雑化とパフォーマンスへの影響

お気に入り機能を導入すると、ストアのシステムが複雑化する可能性があります。特に、お気に入りに関連するデータの管理や、顧客ごとにカスタマイズされたリストの処理が必要になるため、サーバーへの負荷が増加し、ストア全体のパフォーマンスに影響を与えることがあります。これにより、ページの読み込み速度が遅くなったり、ユーザーエクスペリエンスが損なわれたりするリスクがあります。

3. 購買プロセスの分断

お気に入り機能を利用することで、顧客が商品を「後で購入する」ためにリストに保存することが増える一方、実際の購買行動が先延ばしにされる可能性があります。これにより、顧客がショッピングカートに商品を入れてすぐに購入するプロセスが分断され、最終的には購買に至らないケースが増加するリスクがあります。お気に入りに追加された商品が放置されることで、売上機会が減少する可能性があります。

4. カスタマーサポートの負担増加

お気に入り機能を導入すると、顧客からの問い合わせやサポートリクエストが増加する可能性があります。たとえば、リストに保存した商品が在庫切れになった場合や、リストにアクセスできない場合など、顧客からのサポート依頼が発生することがあります。これにより、カスタマーサポートチームに対する負担が増加し、迅速な対応が求められるようになります。

5. 競合との差別化が難しくなるリスク

お気に入り機能は、多くのオンラインストアで導入されている一般的な機能であるため、単独では他の競合ストアとの差別化要素としては効果が薄い場合があります。特に、同業他社がすでに同様の機能を導入している場合、お気に入りの提供が競争優位性をもたらすとは限りません。そのため、他の差別化戦略と組み合わせる必要があります。

6. データプライバシーとセキュリティのリスク

お気に入り機能を提供することで、顧客の個人データや購買意向に関するデータを追加で管理する必要があります。これにより、データプライバシーやセキュリティに関するリスクが増大します。顧客のデータが不正にアクセスされたり、漏洩したりする可能性を最小限に抑えるためには、強固なセキュリティ対策が必要です。しかし、その対策には時間とコストがかかるため、ストア運営者にとっての負担となります。

ここまでで、Shopifyにお気に入り（wishlist）機能を導入するメリットとデメリットについて解説しました。

ここから、お気に入り（wishlist）機能を導入する方法について考察していきます。

Shopifyにお気に入り（wishlist）機能を導入する方法

それでは、Shopify のお気に入り機能について解説していきます。

まずは、お気に入り（wishlist）機能を実装するためのデータ構造から考えていきましょう。

お気に入り機能を実装するためのデータ構造

今回は、メタフィールドを使ってお気に入り機能を実装していきましょう。

顧客がお気に入りを行うので、customerオブジェクトのメタフィールドに商品のidを持たせる形で実装すれば良さそうです。

まずは、customerオブジェクトのドキュメントを確認していきましょう。

以下が、Graphql API のcustomerオブジェクトになります。

https://shopify.dev/docs/api/admin-graphql/2024-07/objects/Customer

こちらのmetafieldを使用していきましょう。

以下のデータ形式でデータを格納していきましょう。

{
  product_ids: string[]
}

メタフィールドに設定した値は、Liquid オブジェクトのcustomerから参照できます。

以下が、Liquid オブジェクトのcustomerです。こちらも、Shopify 公式のドキュメントを確認しましょう。

https://shopify.dev/docs/api/liquid/objects/customer

以下のデータにアクセスできます。

{
  "accepts_marketing": true,
  "addresses": [],
  "addresses_count": 4,
  "b2b?": false,
  "company_available_locations": [],
  "company_available_locations_count": 1,
  "current_company": {},
  "current_location": null,
  "default_address": {},
  "email": "cornelius.potionmaker@gmail.com",
  "first_name": "Cornelius",
  "has_account": true,
  "has_avatar?": false,
  "id": 5625411010625,
  "last_name": "Potionmaker",
  "last_order": {},
  "name": "Cornelius Potionmaker",
  "orders": [],
  "orders_count": 1,
  "phone": "+441314960905",
  "tags": [
    "newsletter"
  ],
  "tax_exempt": false,
  "total_spent": "56.00"
}

ここまでで、customerオブジェクトに格納するデータに関しては終了です。

customerオブジェクトのメタフィールドに格納したproductIdと比較することで、その商品がお気に入り登録されているかどうかを確認することができます。

また、カスタムアプリの管理画面でどの商品がどれぐらいお気に入りされているかを確認したい場合は、productオブジェクトのメタフィールドにcustomerのidを持たせるようにしましょう。

以下の、Product の GraphQL API のドキュメントを参照してください。

https://shopify.dev/docs/api/admin-graphql/2024-04/objects/Product

productのメタフィールドに、以下のようにcustomerIdの配列を渡しましょう。

{
  customer_ids: string[]
}

これで、どの商品がどれぐらいお気に入り登録されているかを確認できるようになりました。

データ構造の確認が終わったので、実際にメタフィールドのデータ構造の定義を行っていきましょう。

お気に入りを実装するためのメタフィールドの定義

それでは、お気に入り（wishlist）を実装するためのメタフィールドの定義を行っていきましょう。

設定からカスタムデータを開いてください。

まずは、顧客のメタフィールドの定義を行いましょう。

以下のように顧客をクリックしてください。

定義を追加するから、メタフィールドの定義を追加していきましょう。

下記のように、入力項目を埋めて下さい。

次に、データタイプを選択しましょう。

今回は、JSONを選択します。

以下のJSONスキーマを入力してください。

{
  "product_ids": []
}

ここまでの設定が完了したら、保存をクリックしましょう。

これで、顧客のメタフィールドの定義を行えました。

同様の手順で、商品のメタフィールドも定義していきましょう。

ここまでで、お気に入りを実装するためのデータ構造の決定とメタフィールドの定義は終了です。

次に、データをShopifyのストアフロントから更新する方法について考察していきましょう。

商品をお気に入りに登録する機能の実装

顧客が、Shopify のストアフロントから商品をお気に入り登録する方法について考察していきます。

Shopify のストアフロントからAdmin APIを叩く必要があるので、今回は App Proxy を用いて実装することにします。

以下が、App Proxyの公式ドキュメントです。

https://shopify.dev/docs/apps/build/online-store/display-dynamic-data

以下に、App Proxyの内容をざっくりとまとめます。

Shopifyで動的なストアデータを表示するためのApp Proxyの活用方法

Shopifyでは、外部ソースから取得したデータをストア上で表示するために、App Proxy機能を活用することができます。この機能は、Shopifyストアの特定のURLからのリクエストを外部のリンクにリダイレクトし、外部サーバーからデータを取得して表示することを可能にします。この記事では、App Proxyの基本的な動作、設定方法、そしてプロキシリクエストの処理方法について詳しく解説します。

App Proxyの基本的な動作

App Proxyは、Shopifyストアのリンクから受け取ったリクエストを外部リンクにリダイレクトする機能です。この機能を利用することで、マーチャントのストアに外部データを動的に表示することができます。たとえば、商品のレビューや在庫情報、カスタマイズされた商品リストなど、外部サーバーからリアルタイムで取得した情報を表示することが可能です。

App Proxyを利用する場合、特別な設定や準備は不要です。アプリを公開した後でも、いつでもApp Proxyを追加・更新することができ、既存のアプリインストールに自動的に反映されます。また、個々のオンラインストアでURLを手動で更新する必要もありません。

App Proxyの設定方法

App Proxyの設定はShopifyのパートナーダッシュボードから行います。以下の手順で設定を進めてください：

  1. パートナーダッシュボードへのアクセス:

    • Shopifyのパートナーダッシュボードにログインし、「Apps」セクションをクリックします。

  2. アプリの選択:

    • 設定を行いたいアプリの名前をクリックし、「Configuration（設定）」ページに移動します。

  3. App Proxyの設定:

    • 「App proxy」セクションに移動し、「Set up（設定）」ボタンをクリックします。
    • 「Subpath prefix」のドロップダウンリストからプレフィックスを選択し、「Subpath」フィールドに具体的なサブパスを入力します。たとえば、/apps/store-pickupのように設定します。
    • 「Proxy URL」フィールドに、リクエストをリダイレクトする外部サーバーのURLを入力します。

例:

  • Subpath prefix: apps
  • Subpath: my-app-proxy
  • Proxy URL: https://my-app-proxy.com/app_proxy

この設定により、https://example.myshopify.com/apps/my-app-proxy/app_pathへのリクエストは、https://my-app-proxy.com/app_proxy/app_pathにリダイレクトされます。また、サブパスに含まれるルートやクエリパラメータもすべてリダイレクトされます。

プロキシリクエストの処理方法

Shopifyは、指定されたプロキシURLにリクエストを転送する際、いくつかの追加パラメータやヘッダをリクエストに付加します。これにより、外部サーバーで受け取ったリクエストが正当であることを確認することができます。

追加される主なパラメータ
  • shop: Shopifyストアのドメイン名 (.myshopify.com)
  • path_prefix: プロキシサブパスのプレフィックス（例: /apps/awesome_reviews）
  • timestamp: リクエストのタイムスタンプ（1970年1月1日からの経過秒数）
  • signature: これらのパラメータのSHA-256 HMAC署名（リクエストの正当性を確認するため）
  • logged_in_customer_id: ログイン中の顧客ID（ログインしていない場合は空）

これらのパラメータを使用して、リクエストがShopifyから送信されたものであるかを確認します。特に署名（signature）は、リクエストが改ざんされていないことを保証するために重要です。

上記の方法を利用してApp Proxyを使用することで、Shopify のストアフロントから GraphQL の API を叩くことができます。

それでは、App Proxyを用いて叩く GraphQL の API についてまとめていきます。

App Proxy を用いて叩く GraphQL の API

App Proxyを用いてやるべきことは、以下の三つです。

  • productIdから商品を取得
  • お気に入りボタンがクリックされた際に、customerのメタフィールドを更新
  • お気に入りボタンがクリックされた際に、productのメタフィールドを更新

上記の三つを行っていきましょう。

productIdから商品を取得は、GraphQL Admin API のproductsQueries を利用すれば可能です。

以下が、Shopify 公式のドキュメントになります。

https://shopify.dev/docs/api/admin-graphql/2024-04/queries/products

以下が、サンプルコードです。

query {
  products(first: 10, reverse: true) {
    edges {
      node {
        id
        title
        handle
        resourcePublicationOnCurrentPublication {
          publication {
            name
            id
          }
          publishDate
          isPublished
        }
      }
    }
  }
}

{
  "products": {
    "edges": [
      {
        "node": {
          "id": "gid://shopify/Product/912855135",
          "title": "SEO Boots",
          "handle": "seo_boots",
          "resourcePublicationOnCurrentPublication": null
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/910489600",
          "title": "Crafty Shoes",
          "handle": "crappy-shoes",
          "resourcePublicationOnCurrentPublication": null
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/558169081",
          "title": "Unpublished Boots",
          "handle": "unpublished_boots",
          "resourcePublicationOnCurrentPublication": null
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/440089423",
          "title": "IPod Nano - 8GB",
          "handle": "ipod-nano",
          "resourcePublicationOnCurrentPublication": null
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/121709582",
          "title": "Boots",
          "handle": "boots",
          "resourcePublicationOnCurrentPublication": null
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/108828309",
          "title": "Draft",
          "handle": "draft",
          "resourcePublicationOnCurrentPublication": {
            "publication": {
              "name": "Generic Channel",
              "id": "gid://shopify/Publication/762454635"
            },
            "publishDate": "2005-01-02T00:00:00Z",
            "isPublished": true
          }
        }
      },
      {
        "node": {
          "id": "gid://shopify/Product/20995642",
          "title": "Element",
          "handle": "element",
          "resourcePublicationOnCurrentPublication": null
        }
      }
    ]
  }
}

上記の GraphQL Admin API を、App Proxy の中で実行すれば良さそうですね。

また、customerのメタフィールドの更新とproductのメタフィールドの更新は、metafieldSetの Admin GraphQL API を叩けば良さそうですね。

以下が、Shopify 公式のドキュメントになります。

https://shopify.dev/docs/api/admin-graphql/2024-07/mutations/metafieldsSet

以下が、metafield を更新するサンプルコードになります。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

{
  "metafields": [
    {
      "key": "materials",
      "namespace": "my_fields",
      "ownerId": "gid://shopify/Product/20995642",
      "type": "multi_line_text_field",
      "value": "95% Cotton\n5% Spandex"
    },
    {
      "key": "manufactured",
      "namespace": "my_fields",
      "ownerId": "gid://shopify/Product/20995642",
      "type": "single_line_text_field",
      "value": "Made in Canada"
    }
  ]
}

ここまでで、Shopify でお気に入り（wishlist）を実装する方法について理解できたかと思います。

後は、カスタムアプリを作成して GraphQL Admin API を実行していくだけですね。

しかし、非エンジニアの方には難しいかと思いますので、Shopify アプリを用いた実装方法も紹介しておきます。

Shopify アプリを用いてお気に入り（wishlist）を実装する方法

それでは、Shopify アプリを使ってお気に入り（wishlist）を実装する方法を紹介します。

今回紹介するのはシンプル Wishlist｜お手軽お気に入りというアプリです。

以下が、Shopify 公式のアプリストアになります。

https://apps.shopify.com/wishlist-38?locale=ja

以下の記事を参考にしています。

https://unreact.jp/blog/shopify-app-favorite-app-ranking

https://unreact.jp/blog/shopify-blog-how-to-wishlist

https://unblog.unreact.jp/blog/z4occ2h5pc

https://qiita.com/eijiSaito/items/b077d486d0cea0fcab91

https://unblog.unreact.jp/blog/81io2etxdxr

それでは、こちらのアプリの機能について紹介していきます。

シンプル Wishlist｜お手軽お気に入りの機能について

シンプル Wishlist｜お手軽お気に入りは、商品数・お気に入り数の上限なし、かつ追加料金無しで利用できる Shopify アプリです。

コレクションページでお気に入り機能の追加・削除を行えます。

また、商品ページでお気に入りの追加・削除が行えます。

お気に入りに登録した商品は、マイページでリストとして表示できます。

こちらは恐らく、customerのメタフィールドにproductIdの配列を格納しておいて、それをApp Proxyを用いて取得することで実装しています。

また、商品ごとのお気に入り数を一覧で確認できます。

非常にシンプルで安価なお気に入り（wishlist）アプリであるため、カスタムアプリを用いてお気に入り（wishlist）機能を実装するのが難しい場合は、選択肢の一つとして入ってくるかと思います。

https://apps.shopify.com/wishlist-38?locale=ja

最後に

今回は、カスタムアプリやメタフィールド、App Proxy を用いてお気に入り（wishlist）機能を実装する方法と、Shopify アプリを用いてお気に入り（wishlist）機能を実装する方法についてまとめました。

お疲れさまでした。

Discussion