【Shopify】最近見た商品、お気に入り追加機能の実装のさいのすゝめ

positive woman choosing between donut and apple liquid
Photo by Andres Ayrton on Pexels.com
liquid Shopfy2.0 Shopify

Shopifyストアを作成する際の、「え、これサポートしてないの!💦」と意外に思われ、かつ見落とすとけっこう金額的にもめんどい注意点として、
「メールアドレス」「メールサーバー」は自前で用意する必要があることや、
日本のECサイトでは割と当然デフォルトで入っている「代引き」という決済方法がShopifyでは一筋縄ではいかないことが挙げられる。

ほかにも、もう感覚の世界なんだが、「これもデフォルトで無いの?お金取られるの?Shopifyイケてないじゃん!」
と思われるものとして、「商品の閲覧履歴ページ」や「お気に入り商品追加機能」も挙げられる。

商品の閲覧履歴ページを作成する方法は、テーマによっては初期に機能として備わっているものもあったり、Liquidのコーディングで実現できるようだ。

最近見た商品(Recentry Viewed Products)の表示のさせ方

閲覧履歴を表示するアプリを使用する方法もありますが、ここではliquidカスタマイズで行う方法を紹介します。

liquidコーディングの知識がある前提で書きます。

イメージは以下のようになります。

No.002の商品を見たあと(No.002が”Recentry Viewed Products”に表示されている)
No.003、No.004と商品を巡回していったところ。No.003がリストに加わって表示されたことがわかる。

Githubでモジュールを公開してくれている戦士がおります

GitHub - carolineschnapp/recently-viewed: To use in Shopify to show recently viewed products. Requires jQuery.
To use in Shopify to show recently viewed products. Requires jQuery. - carolineschnapp/recently-viewed

そしてこのモジュールの組み込み方法を丁寧に解説してくれている記事はこちらです。

Shopifyで「最近閲覧した商品」を表示する方法【アプリ不要】
ECサイトで商品を閲覧しているときに、少し前に見たアイテムが表示されることがありますよね。閲覧履歴の表示をShopifyで実装するためにはどうしたら良いでしょうか?

お気に入り商品を追加

では、「この商品をお気に入りに追加」という機能はどう実現するのがベストアンサーか?

いろいろなアプリがあるが、どれも結構いい値段・・・

Wishlist Plus

Wishlist Plus - Full-featured wishlist for ecommerce merchants | Shopify App Store
Enables customers to bookmark their favorite products and pick up where they left off when they return
プラン制限機能
無料毎月最大2,500のサイトセッション簡単でコードフリーのセットアップ
メールでウィッシュリストを共有する
メトリックダッシュボード
構成可能なウィッシュリストモジュール
1か月あたり最大100個のウィッシュリストアイテム
月額$14.99最大10,000の月間サイトセッションすべての無料機能に加えて:
詳細なエンゲージメントレポート
ソーシャルメディアを介してウィッシュリストを共有する
英語以外の言語のサポート
ウィッシュリストのリマインダーメールを送信する
1か月あたり最大1,000のウィッシュリストアクション
月額$49.99毎月最大50,000のサイトセッションすべての無料機能に加えて:
詳細なエンゲージメントレポート
ソーシャルメディアを介してウィッシュリストを共有する
英語以外の言語のサポート
ウィッシュリストのリマインダーメールを送信する
1か月あたり最大1,000のウィッシュリストアクション
月額$99.991か月あたり最大100,000のサイトセッションすべてのスターター機能に加えて:
高度なカスタマイズオプション
Facebookのピクセル統合
KlaviyoとOmnisendの統合
MailchimpとHubspotの統合
カスタムブランディング
1か月あたり最大50,000のウィッシュリストアクション

Wishlist Hero

Grow Sales with a customizable Wishlist & Email reminders | Shopify App Store
Fast and responsive customer care. Automated install for popular Shopify themes (and help to install for other themes). Works on product, collectio...
プラン制限機能
無料500 wishlist itemお気に入り追加と追加したお気に入りリストの表示
月額$41,000 wishlist itemウィッシュリストの商品の在庫が少なくなったり、価格が下がったりしたときに、メールでお知らせを送ることができます。
月額$113,000 wishlist item同上
月額$175,000 wishlist item同上&
Mailchimp、SendGrid、KlaviyoまたはOmniSendメールプロバイダを使用するオプションをサポートしています。
月額$2910,000 wishlist item同上
月額$9950,000 wishlist item同上
月額$180100,00 wishlist item同上

カウントの方法が独特、、以下、ベンダー回答の翻訳。

1ユーザが1商品をお気に入りに追加 = 1wishlist itemです。

例えば、1000人のユーザーがそれぞれ10個のウィッシュリストを作成した場合、10,000個とカウントされます。 もし制限数に達した場合、プランをアップグレードするまでお客様はウィッシュリストに商品を追加することができなくなります。
80%に達した時点でメールが届くはずです。 この場合、ウィッシュリストに何も追加されないので、プランをアップグレードする必要があります。 また、アプリのダッシュボードでウィッシュリストの追加を確認することができます。

追加のみをカウントします。後でリストを削除しても関係なく、ユーザがwishlistにアイテムを追加するアクションをカウントします。

月が変わるとリセットされるのか?という質問をしたところ、

カウントがゼロから始まることはありませんが、以前に追加した商品に加えて、新たに1000個の商品を追加することができます。

とのこと。商品数や会員数の大きいストアだと、あっという間に月額$99(約1万円。。)の月額プランが必要になりそう。。

Wishlist King

完全カスタマイズ可能な、コンバージョンをサポートする、ウィッシュリストアプリ。 | Shopify App Store
ウィッシュリストキングを活用し、顧客は気に入った商品を保存し、都合の良い時に購入できます。 顧客は、人気商品に関する最新情報を入手し、購買行動を起こすためのリマインダーをメールで受信します。 ウィッシュリストキングは、サイト訪問者を顧客へと転換し、売上を増加させ、ショッピングエクスペリエンスを...
プラン制限機能
月額$4.95ShopifyプランがBASICのストアでウィッシュリストの登録数が無制限・ソーシャルメディアでウィッシュリストを共有できる。(Facebook、Pinterest、Twitter、Email、Link & WhatsApp。)
・CSVエクスポートによるウィッシュリストアナリティクス
・Googleアナリティクス イベント/コンバージョントラッキング
月額$19ShopifyプランがSTANDARDのストアでウィッシュリストの登録数が無制限同上
月額$29ShopifyプランがADVANCEDのストアでウィッシュリストの登録数が無制限同上
月額$49ShopifyプランがPLUSのストアでウィッシュリストの登録数が無制限同上

以下、ベンダー回答の翻訳。

各プランは同じ機能とフル機能を備えています。

小規模なストアは、大規模なストアよりもサーバーへのトラフィックが少なく、その分コストも少ないと考えるのが妥当なため、変動価格を採用しています。

このWishlist KingがShopifyのプランで金額も固定で無制限なので最もコスパが高く思える。

アプリの操作感や見た目、拡張のしやすさ(カスタマイズできるかどうか)

デモストアを用意した。

すべての商品
Shopifyのテスト用ECサイト。 デジタルコンテンツ販売、逆オクのプラットフォーム、PWAのテスト。

お気に入りに追加→お気に入りリストの表示 を録画してみた。

このWishlist King。

ちょっとインストールに欠陥がある。

まず、アプリはONLINESTORE 2.0の仕様に対応していない。

なので、お気に入りリストのページテンプレートをliquidで作成することになる。

一度アプリの仕様に沿ってliquidでテンプレートを作成(”page.wishlist.liquid”)して、動作確認をしてからjson化すると間違いがなさそうだ。

次に、

アプリのインストール手順に従っても正常に
お気に入り一覧ページが表示されない。何も表示されない。

それもそのはず、アプリのインストールガイドに従って

page.wishlist.liquidを作成しても、その中にコードを記述しないで”Success”としてセットアップが完了したことにされる。

なので、page.wishlist.liquidの中に何を書けばいいのかわからない。

念のためなぜセットアップの過程でコードが生成されないかベンダーに確認したところ、

テーマによっては、自動的にデフォルトのページテンプレートを見つけ、必要なコードをpage.wishlist.liquid内に配置できないことがあります。

このような場合、弊社にご相談ください。

とのこと。もはやShopifyアプリインストールあるあるといってもいい。こっちとしては、知らんがなって感じだが、ともかくセットアップでそれを教えてくれないで”Success”とか言ってくるからややこしい。

なぜかうまくいかないセットアップ対処の方法

Wishlist Kingをインストールした以下のGithubに公開している、有志のお手本テーマのデータをDL

Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

これを自身のShopifyストアにテーマアップロードすると、

template/pages.wishlist.liquid

のファイル内で以下のコードによって

<!-- include 'wishlist-collection' -->

アプリがお気に入り一覧を表示するのだとわかる。

アプリインストール時に生成された

snippet/appmate-wishlist-king.liquid

の一部HTMLコードが呼ばれる仕様のようなので、

このHTMLコードをカスタマイズすることで、先にあげたWishlistアプリの中では最も柔軟にUIのカスタマイズができた。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました