Shopifyにお気に入りボタン(ウィッシュリスト)を導入できるアプリを解説

今回は、Shopifyにお気に入りボタン(ウィッシュリスト)を導入することができるアプリについて解説します。

ECサイトにお気に入りボタンを導入するメリット

大手ECサイトのAmazonでは、ほしい商品をとりあえず登録しておく「ほしい物リスト」という機能がありますよね。

Shopifyにお気に入りボタン(ウィッシュリスト)を導入すれば、この「ほしい物リスト」と同じような機能を搭載できます。

お気に入りボタンをShopifyの商品ページに設置した例
image.png

お気に入りボタンをShopifyのコレクションページに設置した例
image.png

お気に入りに追加した商品を、Shopifyのお気に入りページに一覧表示した例
image.png

Shopifyにお気に入りボタンを導入すると、以下の点から売上アップやサイトの再訪問率・回遊率アップなどが期待できます。

  • 売上アップ:ユーザーがサイトを再訪問した際、前にお気に入りにした商品を見て購入できる。再度商品を探す手間が省けるため機会損失を防ぐことができ、売上アップも見込める。
  • サイトの再訪問率・回遊率アップ:お気に入りにした商品を確認するためにサイトを再訪問してくれる可能性がある。また、お気に入りに追加する商品を探すためにサイトを回遊してくれる可能性がある。
  • 在庫管理が楽になる:どの商品が人気なのかを把握できるため、そのまま在庫管理に活かせる。

ECサイトの売上をアップさせたい方は、施策の一環として、お気に入りボタンの設置を一度は試しておきたいところです。

Shopifyにお気に入りボタンを導入するならアプリがおすすめ

Shopifyにお気に入りボタンを導入するには、「コーディングをする」「アプリを利用する」の2つの方法があります。

コーディングには知識が必要なため、多くの人におすすめなのはアプリを利用する方法です。アプリをインストールし、簡単な設定をするだけですぐにお気に入りボタンを導入できます。

今回は、Shopifyにお気に入りボタンを導入するために以下のアプリを使ってみたいと思います。

らくらくお気に入り | リテリア wishlist

アプリの特徴

  • ノーコードでお気に入りボタンを実装できる
  • 商品ページ・コレクションページにお気に入りボタンを設置できる
  • お気に入りページでお気に入りに追加した商品をリストにして確認できる
  • カスタマイズ性が高く好みのデザインに編集できる
  • 管理画面が日本語に完全対応している
  • 困った際には日本のエンジニアによるサポートが受けられる
  • 月額料金は14.99ドル、7日間の無料体験期間あり

このアプリでは以下のようなお気に入りボタンを導入できます。
image.png

らくらくお気に入り | リテリア wishlistの使い方

ここからは、Shopifyにお気に入りボタンを追加できるアプリ・らくらくお気に入り | リテリア wishlistのインストール方法やカスタマイズについて解説していきます。

アプリのインストール方法

Shopifyのストア管理画面でアプリを追加→Shopifyアプリストアでアプリをさらに探すとクリックしていきます。
image.png

Shopifyのアプリストアにある検索ボックスにらくらくお気に入り | リテリア wishlistと入力して検索し、該当するアプリをクリックします。
image.png
image.png

アプリを追加するをクリックし、アプリをインストールをクリックします。
image.png
image.png

アプリのダッシュボードが表示されるので、テーマに反映の欄でインストール先を選択して有効化ボタンをクリックします(ここではDownを選択)。アプリを有効化しましたというポップアップがでれば完了です。
image.png

商品ページにお気に入りボタンを設置

アプリをストアの商品ページに設置していきます。まず、ストア管理画面でオンラインストア→カスタマイズをクリックします。
image.png

ストア画面の画面上・中央にあるボックスをクリックし、商品→デフォルトの商品とクリックします。
image.png
image.png

商品画面に移動するので、画面左側のカラムを下の方までスクロールし、アプリの欄のブロックを追加をクリックして商品ページ | リテリア wishlistをクリックしましょう。
image.png
image.png
image.png

アプリの欄の右側をドラッグアンドドロップして、お気に入りボタンを置きたい場所に移動します。
image.png
image.png

今回は商品情報の下にお気に入りボタンを設置しました。
image.png

ホームページ画面に移動して、別の商品をクリックしても、同じように商品情報の下にお気に入りボタンが設置されているのが分かります。
image.png
image.png

なお、お気に入りボタンをクリックすると、以下のようにログイン画面が表示され、ユーザーはログイン後にお気に入り登録ができるようになります。
image.png
image.png

アプリのお気に入りボタンに関するデザインをカスタマイズしていきます。商品画面の画面左側のカラムで商品ページ | リテリア wishlistのアプリをクリックしましょう。画面右側のカラムにアプリの詳細設定画面が表示されます。
image.png

詳細設定では、以下の項目をカスタマイズできます。
image.png
image.png

カスタマイズできる項目

  • お気に入りボタンの色
  • 背景色
  • ホバー時(お気に入りボタンにマウスを移動したとき)の背景色
  • ホバー時の文字色
  • お気に入り追加後のハートの色
  • お気に入りボタンのテキスト編集
  • お気に入り削除のテキスト編集
  • ボタン上部の余白(PC・スマホ)

コレクションページにお気に入り機能を追加

コレクションページにお気に入り機能を追加していきます。まず、ストア管理画面でオンラインストア→カスタマイズをクリックします。
image.png

ストア画面の画面上・中央にあるボックスをクリックし、コレクション→デフォルトのコレクションとクリックします。
image.png
image.png

コレクションページが表示されるので、画面左側のカラムにあるセクションを追加をクリックしてコレクションページ | リテリア wishlistをクリックし、アプリを追加します。
image.png
image.png

アプリによるコレクションページが表示され、お気に入りボタン(ハートのマーク)が追加されているのが確認できます。
image.png

コレクションページの詳細設定では、以下の項目をカスタマイズできます。

image.png
image.png
image.png

カスタマイズできる項目

  • 商品タグの表示/非表示
  • 商品の表示数
  • お気に入りボタンの文字色
  • 背景色
  • ホバー時の背景色
  • ホバー時の文字色
  • ハートの色
  • 表示する列数(PC・スマホ)
  • 余白(PC・スマホ)
  • 商品名のフォントサイズ(PC・スマホ)
  • 「カートに追加」のテキスト編集
  • 「売り切れ」のテキスト編集

お気に入りページの作成

お気に入りに追加した商品を表示するお気に入りページを作成していきます。ストアの画面上・中央にあるボックスをクリックし、ページ→テンプレートを作成するとクリックします。
image.png
image.png

テンプレートの名前を入力し(ここでは「wishlist」)、テンプレートを作成するをクリックしましょう。
image.png

画面が表示されます。ここでは「お問い合わせ」と表示されてしまっているので、画面左側のカラムにあるプレビューの下にある「お問い合わせ」をクリックし、タイトルを「お気に入り」に変更しておきます。
image.png
image.png
image.png

ストアのお気に入りページに戻ると、表示が「お気に入り」に変更されています。
image.png

画面左側のカラムでセクションを追加をクリックし、お気に入りページ | リテリア wishlistをクリックしてアプリを追加します。
image.png
image.png

すると以下のように、お気に入りに追加した商品がお気に入りページに表示されるようになります。
image.png
image.png

このお気に入りページでは、以下の項目をカスタマイズできます。
image.png
image.png
image.png

カスタマイズできる項目

  • お気に入りボタンの色
  • 背景色
  • ホバー時(お気に入りボタンにマウスを移動したとき)の背景色
  • ホバー時の文字色
  • お気に入り追加後のハートの色
  • 購入ボタン上部の余白
  • 表示する列数(PC・スマホ)
  • 余白(PC・スマホ)
  • 商品名のフォントサイズ(PC・スマホ)
  • 「カートに追加」のテキスト編集
  • 「売り切れ」のテキスト編集

まとめ

今回は、Shopifyにお気に入りボタンを導入するメリットと、以下のアプリの使い方を解説しました。

らくらくお気に入り | リテリア wishlist

アプリの特徴

  • ノーコードでお気に入りボタンを実装できる
  • カスタマイズ性が高く好みのデザインに編集できる
  • 管理画面が日本語に完全対応している
  • 困った際には日本のエンジニアによるサポートが受けられる
  • 月額料金は14.99ドル、7日間の無料体験期間あり

ストアの売上アップを目指している方は、施策の一環として一度お気に入りボタンを導入してみるのがおすすめです。

ここまでお読みいただき、ありがとうございました。

おすすめ記事