U-KOMIカラーミーアプリ設定画面の初期設定

下記4つのステップでU-KOMI導入の初期設定が完了となります。

ご質問やご不明点がありましたら info@u-komi.com までご連絡いただければ導入のお手伝いをさせていただきます。

1. U-KOMIアカウントを作成してください

https://admin.u-komi.com/register

2. U-KOMIカラーミーアプリ設定画面にログインしてください

U-KOMIカラーミーアプリ設定画面
https://color.u-komi.com/

3. U-KOMIカラーミーアプリ設定画面でU-KOMIアカウントにログインしてください



連携ができましたらレビュー依頼メールの送信タイミングを指定していただけます。デフォルトは「発送済み」で、こちらの設定ではある注文を発送したタイミングで受注データがU-KOMIと連携されて、その日からU-KOMI管理画面→メール→メール設定で指定してある日数後にレビュー依頼メールが配信されます。

また、右側の「過去受注データ送信」のところで過去受注データの連携・レビュー依頼メールの送信を行うことが可能です。レビュー依頼メールを送信したい対象期間を選択していただき、対象注文ステータスを選択していただき、送信していただけます。

4. サイト上にレビューコンテンツを表示させるためのタグ設置を行ってください

ヘッダーにJSを追加

サイト内でU-KOMIを表示するために、下記のコードをヘッダー内に設置してください。
「ショップ作成 > デザイン > テンプレート編集 > 共通の「HTML・CSS編集」 > HTML編集」
jqueryスクリプトより下に設置してください。

<script type="text/javascript"> (function u(){var u=document.createElement("script");u.type="text/javascript",u.async=true,u.src="//api.u-komi.com/API_KEY/widget.js";var k=document.getElementsByTagName("script")[0];k.parentNode.insertBefore(u,k)})(); </script>

【API_KEY】はU-KOMI管理画面から確認できるAPIキーを入力します。

レビューコンテンツを設置

レビュー一覧の表示
サイト内でレビュー一覧を表示するためのコードです。
商品詳細ページに設置する場合のコード:
「ショップ作成 > デザイン > テンプレート編集 > 商品詳細の「HTML・CSS編集」 > HTML編集」
<div class="review-container" data-pid="<{$product.id}>" data-gname="<{$product.id}>" data-action="widget"></div>

スターレーティングの表示
サイト内でスターレーティングを表示するためのコードです。

商品一覧ページに設置する場合のコード:
「ショップ作成 > デザイン > テンプレート編集 > 商品一覧の「HTML・CSS編集」 > HTML編集」
<div class="review-summary-container" data-pid="<{$productlist [num] .id}>" data-gname="<{$productlist [num] .id}>" data-action="summary"></div>

商品詳細ページに設置する場合のコード:
「ショップ作成 > デザイン > テンプレート編集 > 商品詳細の「HTML・CSS編集」 > HTML編集」
<div class="review-summary-container" data-pid="<{$product.id}>" data-gname="<{$product.id}>" data-group="true" data-action="summary"></div>

レビュースライダーの表示
サイト内でレビュースライダーを表示するためのコードです。

TOPページに設置する場合のコード(全商品のレビュー表示):
「ショップ作成 > デザイン > テンプレート編集 > トップの「HTML・CSS編集」 > HTML編集」
<div class="review-summary-container" data-review-type="product" data-action="slider"></div>

商品詳細ページに設置する場合のコード(商品毎のレビュー表示):
「ショップ作成 > デザイン > テンプレート編集 > 商品詳細の「HTML・CSS編集」 > HTML編集」
<div class="review-summary-container" data-review-type="product" data-pid="<{$product.id}>" data-gname="<{$product.id}>" data-group="true" data-action="slider"></div>

インスタコンテンツを設置

インスタギャラリー表示コード設置までの手順です。
※コードの発行まではU-KOMI管理画面から設定を行ってください。

TOPページ用のインスタギャラリー設置:

「キュレーション > すべてのメディア > インスタグラム」へ移動
TOPページ表示用に新規カスタムアルバムを作成
追加したい投稿の左下のアルバムアイコンから、1で作成したアルバムに割り当てる
「ギャラリー > 写真ギャラリー」に移動して、ギャラリーを作成
(※この時にアルバムの種類をカスタムアルバムに設定し、アルバムのソースを1で作成したアルバムに設定)
作成したギャラリー編集画面にて各設定を行う
保存したら、「コードを発行する」ボタンを押してコードをコピー
カラーミー管理画面へ移動して、任意の場所にコードを設置

商品詳細ページ用のインスタギャラリー設置:

「キュレーション > すべてのメディア > インスタグラム」へ移動
追加したい投稿の左下のタグアイコンから、対象商品に割り当てる
「ギャラリー > 写真ギャラリー」に移動して、ギャラリーを作成
(※この時にアルバムの種類を、商品アルバムに設定)
作成したギャラリー編集画面にて各設定を行う
保存したら、「コードを発行する」ボタンを押してコードをコピー
カラーミー管理画面へ移動して、任意の場所にコードを設置
この記事は役に立ちましたか?
キャンセル
ありがとうございます