【Shopify】Judge.meをインストールしたあとに手動で修正すべきところ

Shopify
Shopify

Judge.meとは(AIに解説させっぞ!)

Judge.meは、Shopifyストア向けのレビューアプリケーションで、顧客からのレビューやフィードバックを収集、表示、管理するためのアプリです。

主な機能

  1. レビュー収集:
    • Judge.meは、購入後の顧客に対して自動的にレビューリクエストメールを送信し、レビューを収集します。
    • 顧客はテキストレビュー、星評価、写真、ビデオなどを提供できます。
  2. レビュー表示:
    • 収集されたレビューは、製品ページやホームページに表示することができます。
    • ウィジェットやカスタマイズ可能なデザインオプションを使って、ブランドのスタイルに合わせた表示が可能です。
  3. SEO最適化:
    • Judge.meのレビューは、Googleリッチスニペットに対応しており、検索エンジンでの表示を最適化します。
    • これにより、オーガニック検索結果のクリック率とトラフィックが向上します。
  4. ソーシャルメディア連携:
    • Judge.meは、Facebook、Twitter、Instagramなどのソーシャルメディアプラットフォームと連携して、レビューをシェアすることができます。
    • これにより、レビューのリーチと影響力が拡大します。
  5. 自動翻訳:
    • 多言語対応のストア向けに、自動翻訳機能が提供されています。
    • 顧客が母国語でレビューを投稿でき、他の顧客も自分の言語でレビューを読むことができます。
  6. 分析とレポート:
    • Reviewのパフォーマンスや顧客のフィードバックを分析するための詳細なレポートを提供します。
    • ストアオーナーは、顧客満足度や製品の品質を把握し、改善に役立てることができます。

利用のメリット

  • 顧客信頼の向上: 実際の購入者からのレビューは、潜在顧客の信頼を得るために重要です。
  • コンバージョン率の向上: 良いレビューは、製品の魅力を高め、購入率を向上させます。
  • フィードバックの活用: 顧客のフィードバックをもとに、製品やサービスの改善が可能です。

料金プラン

Judge.meは、無料プランと有料プラン(Judge.me Awesome Plan)を提供しています。無料プランでも基本的な機能は利用可能ですが、有料プランでは以下のような追加機能が提供されます。

  • 高度なカスタマイズオプション
  • 詳細なレポートと分析
  • お客様へレビュー依頼メールを自動送信(この機能が無料では不可なので注意)
  • 優先サポート

Shopifyアプリページ

Judge.me: Product reviews & star ratings with photos & video | Shopify App Store
Send unlimited, automatic review requests via email, SMS, and push. Display stars and reviews on storefront, share reviews on social media and Google Shopping.

Judge.me公式ヘルプページ

Judge.Me Help Center
Judge.Me Help Center

Judge.me困った問題の対応方法)星が表示されないとき

アプリを組み込みし、商品ページ上のブロックでウィジェットを表示しただけでは、以下のように星のマークが表示されないことがあります。構築初心者はここでさっそく出鼻くじかれます。

アプリ管理画面右下のチャットボタンで、以下のようにキャプチャ付きでメッセージをお送りする

No stars are displayed.

するとかなり迅速にアプリ側でfixed(修理)してくれるはず。

または自力で以下のcssをテーマのcssに記述

.jdgm-star {font-family: 'JudgemeStar' !important;}

Judge.me困った問題の対応方法)「レビューを書く」ボタンを押した際に商品ページの最上部まで自動スクロールされる現状があったら

以下のスクリプトを追加することで解消される。

<script>
	setTimeout(() => {
	let writeReviewLinks = document.querySelectorAll('.jdgm-write-rev-link');
	let askQuestionBtns = document.querySelectorAll('.jdgm-ask-question-btn');
	
	writeReviewLinks.forEach(link => {
	link.removeAttribute('href');
	});
	
	askQuestionBtns.forEach(btn => {
	btn.removeAttribute('href');
	});
	}, 1000);
</script>

Judge.me困った問題の対応方法)“Review Carouselウィジェット”の表示が色々やばいのを修正

デフォルトの表示は少しカタコトになっており、アプリの翻訳設定にないところでした。

画像アップロードのアイコンが非表示になっている

どうやらストアのcssでfont awesomeを潰しているような記述がここに影響してしまうようだった。
font awesome、もう僕ほぼ使ってないんですよね。。使いたいアイコンは都度svgを設置してました。なのでこのアプリがfont awesomeマストのためにサイト内の仕様を微調整する必要が発生した。

「名前(のように表示 [John Smith]) 」というバグったラベル名をきちんとした日本語に修正


label.jdgm-form__inline-label.jdgm-always-visible {
	font-size: 0;
}
label.jdgm-form__inline-label.jdgm-always-visible:after {
	content: '表示方法を選択ください';
	font-size: 14px;
}

表示プルダウンのオプションを修正

    <script>
      document.addEventListener('webkitAnimationStart', function(event) {
        if (event.animationName == 'reviewer_name_format') {
          //window.alert('ddd');
          var select = document.querySelector('select[name="reviewer_name_format"]');
          var options = select.options;
      
          for (var i = 0; i < options.length; i++) {
            switch (options[i].value) {
              case '':
                options[i].text = 'フルネーム(例:山田 太郎)';
                break;
              case 'last_initial':
                options[i].text = '名のイニシャル(例:T.)';
                break;
              case 'all_initials':
                options[i].text = '名・姓のイニシャル(例:T.Y.)';
                break;
            }
          }
        }
      }, true);

    </script>
    <style>
      @-webkit-keyframes reviewer_name_format {
      0% {opacity: 0;}
      100% {opacity: 1;}
      }
      select[name="reviewer_name_format"] {
      -webkit-animation: reviewer_name_format 0.001s 1;
      }
    </style>

Judge.me困った問題の対応方法)以前からJudge.meを利用していてアプリ管理画面のUIが古い時

古いUI

最新UI (サイドメニュー内に”Settings”がなくなって項目も全然違っている)

新しいバージョンにアップグレードするには、Advanced > Advanced Settings > New Judge.me Admin のスイッチをオンにしてください。

UIが最新になった

最後に

アプリってノーコードで実装できるのが売りなんじゃないんかい!

Shopify構築で最も難しいのはアプリ組み込みだと個人的には思います。ここではこれまで丁寧に勉強してきたきれいなhtmlやcssやliquidコードが通用しなくなります。

だいたいが今回のようにところどころで地味に現れているハック的な手法を使い整えていくしかなく、不具合の原因調査でも経験則からの勘が重要になるので、Web技術全般的な経験が必要になることがあるように思います。

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

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

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

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

mail@prytymworks.tokyo

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

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

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

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

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

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    事業内容EC/Webサイトの構築、管理保守
    代表社員吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

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