【クリエイターモード】テンプレートWabisabiで商品詳細ページにレビューを表示することはできますか。 – makeshop よくある質問

商品詳細ページにレビューの表示は可能です。
レビューを表示するためのHTMLを追記してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

「HTML」欄

（1）「HTML」のソース入力欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

<{$makeshop.head}>

をコピーペーストし、Enterキーを押して該当のソースを探してください。

見つかりましたら、その行の前に以下をコピー＆ペーストしてください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

（2）レビューがある場合にレビュー平均値を商品名の後方に表示させる場合

以下の記述を変更してください。

（1）と同様に

<{if $item.is_soldout}>

を検索し、以下のソースを探してください。

◆変更前

<{if $item.is_soldout}>
	<span class="detail-sold-out">SOLD OUT</span><br>
	<h2 class="product-name"><{$item.name}></h2>
	<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{elseif $item.is_sale}>
	<h2 class="product-name"><{$item.name}></h2>
	<div class="product-price-block detail-product-discount">￥<{$item.original_price|number_format}><small>（税込）</small></div>
	<span class="detail-product-sale-price">￥<{$item.price_html}>（税込）<br><small><{$item.sale_rate}>%OFF</small></span>
<{else}>
	<h2 class="product-name"><{$item.name}></h2>
	<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{/if}>

◆変更後

<{if $item.is_soldout}>
	<span class="detail-sold-out">SOLD OUT</span><br>
	<h2 class="product-name"><{$item.name}></h2>
	<{if $item.review.is_enabled}>
		<div class="item-review review-average">
			<{if $item.review.has_item}>
				<{$item.review.star_html}>
				<p class="item-review-average"><{$item.review.average}></p>
				<p class="item-review-count">（<a href="<{$item.review.list_url}>"><{$item.review.total_count}>件</a>のレビュー）</p>
			<{else}>
				<p class="review-empty">レビューはまだありません</p>
			<{/if}>
		</div>
	<{/if}>
	<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{elseif $item.is_sale}>
	<h2 class="product-name"><{$item.name}></h2>
	<{if $item.review.is_enabled}>
	<div class="item-review review-average">
		<{if $item.review.has_item}>
			<{$item.review.star_html}>
			<p class="item-review-average"><{$item.review.average}></p>
			<p class="item-review-count">（<a href="<{$item.review.list_url}>"><{$item.review.total_count}>件</a>のレビュー）</p>
		<{else}>
			<p class="review-empty">レビューはまだありません</p>
		<{/if}>
	</div>
	<{/if}>
	<div class="product-price-block detail-product-discount">￥<{$item.original_price|number_format}><small>（税込）</small></div>
	<span class="detail-product-sale-price">￥<{$item.price_html}>（税込）<br><small><{$item.sale_rate}>%OFF</small></span>
<{else}>
	<h2 class="product-name"><{$item.name}></h2>
	<{if $item.review.is_enabled}>
		<div class="item-review review-average">
			<{if $item.review.has_item}>
				<{$item.review.star_html}>
				<p class="item-review-average"><{$item.review.average}></p>
				<p class="item-review-count">（<a href="<{$item.review.list_url}>"><{$item.review.total_count}>件</a>のレビュー）</p>
			<{else}>
				<p class="review-empty">レビューはまだありません</p>
			<{/if}>
		</div>
	<{/if}>
	<div class="product-price-block">￥<{$item.price_html}><small>（税込）</small></div>
<{/if}>

（3）
（2）のレイアウト用のスタイルは「CSS」欄に記述してください。

.review-average{
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	font-size:85%;
}
.item-review-count a{
	text-decoration:underline;
}

（4）投稿されたレビューとレビュー投稿ボタンを表示させる場合は
表示させたい位置に以下を追記してください。

例）「複数商品画像」の後ろ（フッターの前）に表示させる場合
HTML欄のソース末尾から数えて10行目付近の </main>
の前に以下を追記してください。

<{if $item.review.is_enabled}>
	<div class="item-review-detail contents-section">
		<h3 class="contents-heading">
		<div class="heading-title">商品レビュー</div>
		<div class="heading-sub-title">Review</div>
		</h3>
		<{if $item.review.has_item}>
			<div class="item-review-list-link">
				<a href="<{$item.review.list_url}>">レビュー一覧</a>
			</div>
			<ul class="item-review-list">
				<{section name=i loop=$item.review.list}>
				<li class="review-list-unit">
					<p class="review-list-name"><span><{$item.review.list[i].reviewer_name}></span>さん</p>
					<div class="star-score">
						<div class="review-star"><{$item.review.list[i].star_html}></div>
						<p class="review-score"><{$item.review.list[i].score}></p>
					</div>
					<p class="review-list-date"><{$item.review.list[i].date.year}>/<{$item.review.list[i].date.month}>/<{$item.review.list[i].date.day}> <{$item.review.list[i].date.hour}>:<{$item.review.list[i].date.minute}></p>
					<p class="review-list-content"><{$item.review.list[i].content|nl2br}></p>
				</li>
				<{/section}>
			</ul>
		<{else}>
			<p class="item-review-detail-empty">レビューはまだありません</p>
		<{/if}>
		<p class="review-post">
		<a href="<{$item.review.post_url}>" class="btn">レビューを書く</a>
		</p>
	</div>
<{/if}>

（5）
（4）のレイアウト用のスタイルは「CSS」欄に記述してください。

.item-review-detail{
	text-align:left;
}
.item-review-detail-empty{
	margin-bottom: 20px;
}
.review-post a {
	padding:0;
	padding-left: 20px;
}

関連記事