ShopifyとYOTPOの連携ガイド

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

Shopify側の準備

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

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

Shopifyにログインし、「アプリ管理」をクリックします。
「Shopify アプリストアに行く」をクリックしてください
「YOTPO」を検索して「Yotpo：UGCマーケティング」を選択します。
「アプリを追加する」をクリックしてください。
「アプリをインストールする」をクリックします。
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.コンバージョントラッキングコードの設置【必須】

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

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

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