📕U-KOMIの初期設定ガイド
※ベーシックモードはレスポンシブデザインではないため、
PC / スマホそれぞれのテンプレートにタグ設置をしていただく必要がございます。
※各写真はレビューデータがある状態の例の写真です。
U-KOMIタグはmakeshopの既存のレビュー機能のif文の外に設置します。
makeshopの既存のテンプレートには
[IF_REVIEW] のような、if文が設置されております。
これは、「makeshopの旧商品レビュー機能が有効だったら」というif文になります。
このif文の中にU-KOMIのタグを設置してしまうと、
makeshopの旧商品レビュー機能を無効にした際にU-KOMIのレビュー表示もされなくなってしまうのでご注意ください。
☝️「お客様の声ページ」を作成することで、全商品のレビューとショップレビューを１つのページにまとめて表示することができます。
また、TOPページに設置したレビュースライダーの「もっと見る」ボタンを押すと、このページに移動されるようにできます。
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > 独自ページ」のページを開きます。
②「独自ページの作成」より、ページ名などを入力し、HTML欄に下記のタグを入力します。
🔑全商品のレビュー一覧表示のタグ
③「保存する」を押すと、ページ下部の独自ページURL一覧に追加されます。
④お客様の声ページが作成できました🎉
☝️STEP１で作成した「お客様の声」をスライダー形式にして、トップページに表示させることができます。（レビュースライダー）
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > 中央画面（トップページ）」を開きます。
②「中央画面作業」で、スライダー形式で全表示のレビューを表示するタグを入力し、「保存」を押します。
🔑スライダー形式で全商品のレビュー表示するタグ
※data-morereview-page-link="○○"の○○には
「ショップデザイン > テンプレート選択・編集 > 独自ページ」下部にある
独自ページURL一覧のページURLから、
" "内にあるURLのみをコピーして入力してください。
例：ページURL：<a href="/html/page2.html">お客様の声</a> の場合のタグ
③トップページにレビュースライダーが表示されました🎉
☝️レビューを星の５段階評価で表示することで、視覚的にもわかりやすくなります。
（スターレーティング）
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > 商品詳細画面」を開きます。
②商品表示画面修正欄に、スターレーティングを表示するタグを入力し、「保存」を押します。
🔑スターレーティングを表示するタグ
③商品名と商品説明欄の間に、スターレーティングが表示されました🎉
☝️商品詳細ページの下にレビューを表示することで、ページの変遷を減らすことができます。
①（STEP３と同様）makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > 商品詳細画面」を開きます。
②商品表示画面修正欄に、レビュー一覧を表示するタグを入力し、「保存」を押します。
🔑レビュー一覧を表示させるタグ
③商品詳細下部に、レビュー一覧が表示されました🎉
makeshop管理画面の「商品管理 > 機能・設定 ＞ 旧商品レビュー ＞ 商品レビュー機能の設定 」から無効化することができます。
①商品レビューを「使用しない」にチェックを入れます。
②保存を押して完了です。
☝️makeshop管理画面の「ショップデザイン > テンプレート選択・編集」の上部で、
PCデザインとスマホデザインの切り替えができます
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > スマホ > 適用中のテンプレートの【編集】」を開きます。
②デザインセット編集画面一覧より、「独自ページ」を開きます
③独自ページ一覧より、「新規追加」を開きます
④独自ページ作成のHTML欄に、全商品のレビューを一覧表示するタグを入力し、「保存」を押します。
🔑全商品のレビューを一覧表示するタグ
📖PC独自ページと紐付け機能について
PCとスマホの独自ページを紐づけることで、スマホ向けSEO対策を有利にすることができます。（それぞれalternateタグ・canonicalタグが設定されます）
PC・スマホ独自ページ間で自動リダイレクトされます。
（PCでスマホのページにログインしても、自動でPCのページに移動します）
⑤お客様の声ページが完成しました🎉
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > スマホ > 適用中のテンプレートの【編集】」のデザインセット編集画面一覧より、「トップ画面」を開きます
②トップページ編集のHTML欄に、スライダー形式で全表示のレビューを表示するタグを入力します。
🔑スライダー形式で全商品のレビューを表示させるタグ
※data-morereview-page-link="○○"の○○には
「ショップデザイン > テンプレート選択・編集 > 独自ページ>独自ページ一覧」の中で
表示したい独自ページ名の「編集」から独自ページの作成ページを開き、
ページ名の下部にあるURLをコピーして入力してください。
③タグを入力したら、「保存」を押します。
④トップページにレビュースライダーが表示されました
①makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > スマホ > 適用中のテンプレートの【編集】」のデザインセット編集画面一覧より、「商品詳細画面」を開きます。
②商品表示画面修正欄に、スターレーティングを表示するタグを入力し、「保存」を押します。
スターレーティングを表示するタグ
③価格の下に、スターレーティングが表示されました
①（STEP３と同様）makeshop管理画面の「ショップデザイン > テンプレート選択・編集 > スマホ > 適用中のテンプレートの【編集】」のデザインセット編集画面一覧より、「商品詳細画面」を開きます。
②商品表示画面修正欄に、レビュー一覧を表示するタグを入力し、「保存」を押します。
レビュー一覧を表示させるタグ
③商品詳細下部に、レビュー一覧が表示されました🎉