こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は商品を買うときに参考になる『商品レビュー』を対象のテンプレートで表示する方法をご紹介します！
※対象テンプレート：ベーシックモード【ENKEL】／【Fashion】
ベーシックモードのテンプレートENKEL／Fashion以外は商品レビューのソースが初期値のソースに入力されています。
『商品レビュー』は管理画面の「商品レビュー機能の設定」から登録できます！
オンラインマニュアル「商品レビュー機能の設定」
商品レビューを表示したい！
（対象テンプレート: ENKEL／Fashion）
それでは、早速みていきましょう。
設定方法
【1】商品詳細にタグを追加
商品詳細ページにレビューを表示します。
【ショップデザイン（PC）】>【内部ページ編集I】>【商品詳細画面管理】
に下記のソースを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- レビュー --> [IF_REVIEW] <div class="section item-review"> <h3>この商品のレビュー</h3> [REVIEW_WRITE] <a href=[REVIEW_BUTTON] class="btn">レビューを書く</a> <div class=review-view"> [REVIEW_VIEW_ALL] </div> </div> [ENDIF_REVIEW] |
・下記の位置、または表示したい位置へ入力してください。
【ENKEL】：画面一番下位置 <script>タグの上に、6つ </div>タグが記述されています。下から2つ目の </div>タグの上位置に入力してください。
【Fashion】：<!–最近チェックした商品–> の記述の上位置に入力してください。
【2】中央画面管理にタグを追加
トップページページに新着のレビューを表示したい場合にのみ追加してください。
【ショップデザイン（PC）】>【トップページ編集】>【中央画面管理】
に下記のソースを追記します。
|
1 2 3 4 5 6 7 |
<!-- レビュー --> [IF_REVIEW] <div class="section index-review"> <h2>新着レビュー</h2> [REVIEW_VIEW_ALL_5] </div> [ENDIF_REVIEW] |
・一番下位置の </div>タグの上位置に入力してください。または表示したい位置へ入力してください。
【2】CSSを追加
デザインを整えます。
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
に下記のCSSを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/*商品詳細ページレビュー*/ .item-review h3{ font-size: 28px; text-align: center; margin: 48px auto; } .item-review input[type="text"], .item-review textarea { padding: 12px; font-size: 18px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; min-width:200px; } #M_review li { padding-left: 16px !important; } #M_review textarea { width: 1000px !important; height: 100px !important; margin-top: 20px; } #M_reviewViewAll { width: 1000px !important; } /*トップページレビュー*/ #M_reviewViewAll .M_reviewInner { display: flex; display: -webkit-flex; } #M_reviewViewAll .M_reviewImg { float: none !important; width: 16% !important; } #M_reviewViewAll .M_reviewList { border-radius: 5px; } .M_reviewBox { width: 95%; margin-left: 12px; text-align: left; padding-top: 8px; } #M_reviewViewAll .M_reviewImg img { border: solid 1px #ccc !important; border-radius: 5px; width: 68%; height:auto; } #M_reviewViewAll .M_reviewRead { border-radius: 5px; overflow: hidden; width: 100%; } .M_reviewBox{ text-align: left; padding-left: 10px; } #M_reviewViewAll .M_reviewerInfo { float: none !important; width: 100% !important; } |
・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記してください。
・デザインは一例となりますので、お好みで調整してください。
完了
▼商品詳細ページ表示例
▼トップページ表示例
いかがでしたでしょうか。
商品を購入する際に参考になる商品レビューをENKEL／Fashionテンプレートでも表示してみましょう。
それではまた！
