商品レビュー投稿ページに内容を表示するための記述を追加していただければ可能です。
ショップデザイン / テンプレート選択・編集
クリエイターモード>商品レビュー投稿
（1）
HTML欄に以下を記述してください。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="<{$page.css}>">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<{$makeshop.head}>
</head>
<body>
<{$makeshop.body_top}>
<div class="wrapper">
<{$module.header}>
<div class="item-title-wrap">
<h3 class="contents-heading">
<div class="heading-title">レビューを投稿する</div>
<div class="heading-sub-title">Review</div>
</h3>
</div>
<main class="main">
<section class="contents-section">
<div class="contents-wrap">
<div class="review-section">
<!--レビューアイテム-->
<div class="review-item-wrap">
<div class="review-item-image">
<a href="<{$item.url}>"><img src="<{$item.image_S}>" alt="<{$item.name}>"></a>
</div>
<div class="review-item-info">
<p class="review-item-category"><a href="<{$item.base_category.url}>"><{$item.base_category.name}></a></p>
<p class="review-item-name"><a href="<{$item.url}>"><{$item.name}></a></p>
<{if $review.has_item}>
<div class="total-review">
<div class="review-star"><{$review.star_html}></div>
<p class="review-average"><{$review.average}></p>
<p class="review-count">（<{$review.total_count}>件）</p>
</div>
<{/if}>
</div>
</div>
<!--レビュー投稿フォーム-->
<div class="review-form-wrap">
<dl class="review-form">
<dt class="review-form-title">
ニックネーム
</dt>
<dd class="review-form-content">
<input type="text" data-id="<{$review.name_id}>">
</dd>
</dl>
<dl class="review-form">
<dt class="review-form-title">
評価
</dt>
<dd class="review-form-content">
<{$review.star_select_html}>
</dd>
</dl>
<dl class="review-form">
<dt class="review-form-title">
コメント
</dt>
<dd class="review-form-content">
<textarea name="" id="" cols="50" rows="10" data-id="<{$review.content_id}>"></textarea>
</dd>
</dl>
<p class="review-post"><a href="<{$review.entry_url}>" class="review-post-btn">この内容でレビューを書く</a></p>
</div>
</div>
</div>
</section>
</main>
<{$module.footer}>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>
（2）
レイアウト用のスタイルは「CSS」欄に記述してください。
/* -----------------------------------------------------------------
review
----------------------------------------------------------------- */
.review-wrap{
text-align: left;
}
.review-item-wrap {
border: 1px solid #333333;
padding: 20px;
border-radius: 3px;
display: flex;
margin: 50px 0;
}
.review-item-wrap .review-item-image {
padding-right: 20px;
width: 120px;
}
.review-item-wrap .review-item-image img {
width: 100%;
height: 120px;
object-fit: cover;
}
.review-item-info .review-item-category {
font-size: 12px;
margin-bottom: 8px;
}
.review-item-info .review-item-name {
font-size: 18px;
}
.review-item-info .total-review {
display: flex;
align-items: baseline;
margin-top: 10px;
}
.review-item-info .review-star {
margin-right: 10px;
}
.review-item-info .review-average {
font-size: 20px;
font-weight: bold;
}
.review-item-info .review-count {
font-size: 12px;
}
.review-form-wrap {
max-width: 600px;
margin: 0 auto;
}
.review-form {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.review-form:last-child {
margin-bottom: 60px;
}
.review-form dt {
width: 150px;
text-align: left;
}
.review-form .review-form-content {
width: 100%;
}
.review-form dd input {
border: 1px solid #707070;
width: 100%;
}
.review-form dd .reviewRateStar:before {
font-size: 18px;
}
.review-post-btn {
border: none !important;
background: #707070;
color: #fff;
}
/* review star */ .item-review-detail {
margin-bottom: 60px;
}
.item-review-detail h3 {
font-size: 18px;
margin-bottom: 20px;
}
.item-review-list li {
margin-bottom: 60px;
}
.item-review-list-link {
margin-bottom: 30px;
font-size: 12px;
}
.item-review-list-link a {
text-decoration: underline;
}
.item-review-list-link a:hover {
text-decoration: none;
}
.review-list-unit .review-list-name {
margin-bottom: 12px;
}
.review-list-unit .star-score {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.review-list-unit .review-star {
margin-right: 6px;
}
.review-list-unit .review-list-date {
font-size: 12px;
color: #B5B5B5;
margin: 12px 0;
}
.review-list-unit .review-list-content {
font-size: 12px;
}
.reviewRateStar {
display: inline-block;
font-size: 0;
color: #FFA41C;
}
.reviewRateStar::before {
font-family: 'Font Awesome 5 Free';
content: "\f005";
font-size: 12px;
font-weight: 900;
}
.starOff::before {
font-family: 'Font Awesome 5 Free';
content: "\f005";
font-weight: 400;
}
.starHalf::before {
font-family: 'Font Awesome 5 Free';
content: "\f5c0";
}
.review-post {
margin-top: 40px;
}
.review-post {
text-align: center;
}
.review-post a {
margin: 0 auto;
display: block;
padding-left: 12px 30px;
border: 1px solid #333333;
border-radius: 2px;
text-align: center;
text-decoration: none;
height: auto;
}
.review-post a:before {
font-family: 'Font Awesome 5 Free';
content: "\f304";
font-size: 16px;
font-weight: 900;
padding-right: 10px;
color: fff;
}
@media screen and (max-width: 768px){
.contents-heading {
max-width: 96%;
}
.main {
width: 94%;
box-sizing:border-box;
}
.review-list-content {
line-height: 1.4;
}
.item-review, .item-review-detail{
padding: 0 18px;
}
}