本ページでは、Shopify利用企業さまから問い合せの多い、UGCマーケティングツール「YOTPO」との連携手順をご紹介します。
YOTPOはShopifyのアプリで簡単に利用を開始することができます。
まずは、YOTPOアプリをShopifyアカウントに追加しましょう。
＜重要：インストール時の注意点＞
【注意】以下の案内は、よく利用されるファイルで記載しておりますので、環境によってはファイルが異なる可能性がございます。
（共通：テンプレートの編集方法）
テンプレートの 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」にて確認することができます。
確認できましたら、「保存する」をクリックしてください。
テンプレートの 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 については、カンマを含まないようにする必要があります。
左下にある「設定」に開きます。
「チェックアウト」をクリックしてください。
「注文処理」の「追加スクリプト」に下記にあるコードを貼り付けます。
<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の置き換えが完了したら、「保存する」をクリックしてください。
テンプレートの 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
コードの貼り付けが完了しましたら、「保存する」をクリックしてください。
カテゴリーページのテンプレートを開きます。
表示したい箇所に、下記にあるコードを貼り付けてください。
（商品名と価格の間が推奨となります）
<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>
貼り付けが完了しましたら、「保存する」をクリックします。
ここまでの設定が完了となります。
© Gaprise Inc. All Rights Reserved
