商品レビュー一覧ページにレビュー内容を表示するための記述を追加していただければ可能です。
ショップデザイン / テンプレート選択・編集
クリエイターモード>商品レビュー一覧
（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-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>
<!--レビュー一覧-->
<{if $review.has_item}>
<ul class="item-review-list all-review">
<{section name=i loop=$review.list}>
<li class="review-list-unit">
<p class="review-name"><span><{$review.list[i].reviewer_name}></span>さん</p>
<div class="star-score">
<div class="review-star"><{$review.list[i].star_html}></div>
<p class="review-score"><{$review.list[i].score}></p>
</div>
<p class="review-list-date"><{$review.list[i].date.year}>/<{$review.list[i].date.month}>/<{$review.list[i].date.day}> <{$review.list[i].date.hour}>:<{$review.list[i].date.minute}></p>
<div class="review-list-content"><{$review.list[i].content|nl2br}></div>
</li>
<{/section}>
</ul>
<!--ページャー-->
<div class="pager-wrap pager">
<p class="total-count">（全<span><{$review.total_count}></span>件）<{$review.display_count}>件表示</p>
<{if $review.pager.has_item}>
<ul class="pager pagination">
<{if !$review.pager.is_first_display}>
<li><a href="<{$review.pager.first_url}>"><span class="prev">一番前へ</span></a></li>
<{/if}> <{section name=i loop=$review.pager.list}>
<{if $review_list.is_current_page}>
<li><span class="current"><{$review.pager.list[i].number}></span></li>
<{else}>
<li><a href="<{$review.pager.list[i].url}>"><span><{$review.pager.list[i].number}></span></a></li>
<{/if}>
<{/section}>
<{if !$review.pager.is_last_display}>
<li><a href="<{$review.pager.last_url}>"><span class="next">最後へ</span></a></li>
<{/if}>
</ul>
<{/if}>
</div>
<{else}>
<p class="empty">この商品のレビューはまだありません</p>
<{/if}>
<!--レビュー投稿-->
<p class="review-post">
<a href="<{$review.post_url}>">レビューを書く</a>
</p>
</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;
}
}