ShopifyとYOTPOの連携ガイド

本ページでは、Shopify利用企業さまから問い合せの多い、UGCマーケティングツール「YOTPO」との連携手順をご紹介します。

Shopify側の準備

YOTPOはShopifyのアプリで簡単に利用を開始することができます。

まずは、YOTPOアプリをShopifyアカウントに追加しましょう。

  1. Shopifyにログインし、「アプリ管理」をクリックします。
  2. 「Shopify アプリストアに行く」をクリックしてください
  3. 「YOTPO」を検索して「Yotpo:UGCマーケティング」を選択します。
  4. 「アプリを追加する」をクリックしてください。
  5. 「アプリをインストールする」をクリックします。
  6.  YOTPO アカウントのパスワードを作成してください。

<重要:インストール時の注意点>

  • ショップのテーマによっては手動インストールが必要となります。すでに自動インストールしている場合、簡単に削除、再インストールし、手動インストールすることができます。
  • 任意の箇所に表示したい場合は、手動インストールを行ってください。

インストール手順

■YOTPO側の設定

  • YOTPO管理画面のインストールウィザードで、レビューリクエストメールとレビューウィジェットの設定を行います。
  • インストールウィザードの最後のステップで、「Manual Installation」の「See Instructions」をクリックしてください。

■Shopify側の設定

【注意】以下の案内は、よく利用されるファイルで記載しておりますので、環境によってはファイルが異なる可能性がございます。

(共通:テンプレートの編集方法)

  • 「オンラインストア」をクリックします。
  • 「テーマ」をクリックしてください。
  • 「アクション」から「コードを編集する」をクリックします。
1.JavaScript のライブラリーの設置します【必須】

テンプレートの theme.liquid を開いてください。

</head> のすぐ上に、下記にあるコードを貼り付けます。

<script type="text/javascript"> (function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/###APP_KEY###/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})(); </script>

###APP_KEY### の部分を、YOTPO アカウントの APP KEY に書き換えてください。
APP KEY は、YOTPO 管理画面の「右上アカウント > Store Settings」にて確認することができます。

確認できましたら、「保存する」をクリックしてください。

2.レビューウィジェットの設置【必須】

テンプレートの product.liquid を開きます。
表示したい箇所に、下記にあるコードを貼り付けてください。

<div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}" data-price="{{ variant.price | money_without_currency | replace: ',', '' }}" data-currency="{{ shop.currency }}" data-description="{{ product.description | escape }}"> {%- assign yotpo_offload_content = shop.metafields.yotpo.yotpo_offload_content %} {%- assign time_now = 'now' | date: '%s' %} {%- assign yotpo_live_time = shop.metafields.yotpo.yotpo_live | date: '%s' %} {%- assign diff_seconds_from_live = time_now | minus: yotpo_live_time %} {%- assign yotpo_main_widget_last_updated = product.metafields.yotpo.main_widget_update_time | date: '%s' %} {%- assign diff_seconds_from_last_main_widget_update = time_now | minus: yotpo_main_widget_last_updated %} {%- if yotpo_live_time and diff_seconds_from_live < 86400 or yotpo_main_widget_last_updated and diff_seconds_from_last_main_widget_update < 86400 -%} {%- assign yotpo_main_widget_obsolete = false %} {%- else %} {%- assign yotpo_main_widget_obsolete = true %} {%- endif %} {%- if yotpo_offload_content == 'yes' and yotpo_main_widget_obsolete != true -%} {%- for field in product.metafields.yotpo_reviews -%} {{ field | last }} {%- endfor -%} {%- endif %} </div>

貼り付けが完了しましたら、「保存する」をクリックしてください。

英文参考ページ:https://support.yotpo.com/en/article/shopify-installing-yotpo
※ data-price については、カンマを含まないようにする必要があります。

3.コンバージョントラッキングコードの設置【必須】

左下にある「設定」に開きます。
「チェックアウト」をクリックしてください。
「注文処理」の「追加スクリプト」に下記にあるコードを貼り付けます。

<script type="text/javascript">(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/##APP_KEY##/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script> <script>yotpoTrackConversionData = {source:"pixel_v2", platform:"shopify", orderId:"{{order_id}}", orderNumber:"{{order_number}}", orderName:"{{order_name|handleize}}", orderAmount:"{{subtotal_price|money_without_currency|replace: ',', ''}}", orderCurrency:"{{shop.currency}}"}</script> <noscript><img src="//api.yotpo.com/conversion_tracking.gif?app_key=##APP_KEY##&source=pixel_v2&platform=shopify&noscript=1&order_id={{order_id}}&order_number={{order_number}}&order_name={{order_name|handleize}}&order_amount={{subtotal_price|money_without_currency|replace: ',', ''}}&order_currency={{shop.currency}}" width="1" height="1"></noscript>

https://support.yotpo.com/en/article/shopify-installing-yotpo#3-install-the-conversion-tracking-code-required
###APP_KEY### の部分を、YOTPO アカウントの APP KEY に書き換えます。
price について、カンマを含まないようにします。

APP KEY は、YOTPO 管理画面の「右上アカウント > Store Settings」にて確認することができます。
APPKEYの置き換えが完了したら、「保存する」をクリックしてください。

4.商品ページにスターレーティングの設置(任意、推奨)

テンプレートの product-template.liquid を開く
表示したい箇所に、下記にあるコードを貼り付けてください。
(タイトル {{ product.title }} のすぐ後が推奨となります)

<div class="yotpo bottomLine" data-product-id="{{ product.id }}"> {%- assign yotpo_offload_content = shop.metafields.yotpo.yotpo_offload_content %} {%- assign time_now = 'now' | date: '%s' %} {%- assign yotpo_live_time = shop.metafields.yotpo.yotpo_live | date: '%s' %} {%- assign diff_seconds_from_live = time_now | minus: yotpo_live_time %} {%- assign yotpo_bottomline_last_updated = product.metafields.yotpo.bottomline_update_time | date: '%s' %} {%- assign diff_seconds_from_last_bottomline_update = time_now | minus: yotpo_bottomline_last_updated %} {%- if yotpo_live_time and diff_seconds_from_live < 86400 or yotpo_bottomline_last_updated and diff_seconds_from_last_bottomline_update < 86400 -%} {%- assign yotpo_bottomline_obsolete = false %} {%- else %} {%- assign yotpo_bottomline_obsolete = true %} {%- endif %} {%- if yotpo_offload_content == 'yes' and yotpo_bottomline_obsolete != true -%} {{ product.metafields.yotpo.bottomline }} {%- endif %} </div>

https://support.yotpo.com/en/article/shopify-installing-yotpo#4-install-the-star-rating-on-product-pages-optional-yet-highly-recommended

コードの貼り付けが完了しましたら、「保存する」をクリックしてください。

5.カテゴリーページにスターレーティングの設置(任意・推奨機能)

カテゴリーページのテンプレートを開きます。
表示したい箇所に、下記にあるコードを貼り付けてください。
(商品名と価格の間が推奨となります)

<div class="yotpo bottomLine" data-product-id="{{ product.id }}"> {%- assign yotpo_offload_content = shop.metafields.yotpo.yotpo_offload_content %} {%- assign time_now = 'now' | date: '%s' %} {%- assign yotpo_live_time = shop.metafields.yotpo.yotpo_live | date: '%s' %} {%- assign diff_seconds_from_live = time_now | minus: yotpo_live_time %} {%- assign yotpo_bottomline_last_updated = product.metafields.yotpo.catalog_bottomline_update_time | date: '%s' %} {%- assign diff_seconds_from_last_bottomline_update = time_now | minus: yotpo_bottomline_last_updated %} {%- if yotpo_live_time and diff_seconds_from_live < 86400 or yotpo_bottomline_last_updated and diff_seconds_from_last_bottomline_update < 86400 -%} {%- assign yotpo_bottomline_obsolete = false %} {%- else %} {%- assign yotpo_bottomline_obsolete = true %} {%- endif %} {%- if yotpo_offload_content == 'yes' and yotpo_bottomline_obsolete != true -%} {{ product.metafields.yotpo.catalog_bottomline }} {%- endif %} </div>

https://support.yotpo.com/en/article/shopify-installing-yotpo#5-installing-the-star-rating-on-category-pages-optional-yet-highly-recommended

貼り付けが完了しましたら、「保存する」をクリックします。
ここまでの設定が完了となります。

世界200,000サイトの導入実績

GoPro
snow peak
マウスコンピューター
アウンワークス
ACE
Furbo
オフィスコム
ノーリツ
puravida bracelets

お問い合わせ/資料ダウンロード

YOTPOやUGCマーケティングについて詳しく聞きたい方は
お気軽にご相談ください。