「商品詳細ページ＞お客様の声＞すべてのレビューを参照」を追加する方法

※本記事は2022年6月30日までにご契約されたショップ様限定の内容です。
※2022年7月以降にご契約されたショップ様は標準状態でご利用可能になっています。

■商品レビュー表示ページの標準状態を呼び出す
・「デザイン＞PC＞ページ設定＞商品レビュー表示ページ＞テンプレート＞更新履歴＞デフォルトテンプレートを読み込む」をクリック後に「登録する」ボタンをクリック。
・「デザイン＞スマートフォン＞ページ設定＞商品レビュー表示ページ＞テンプレート＞更新履歴＞デフォルトテンプレートを読み込む」をクリック後に「登録する」ボタンをクリック。

■PC版のCSSに追記記述を行う
・「デザイン＞PC＞CSS設定＞contents.css＞編集」で、下記CSSを追加記述する。

/* -- 商品レビュー表示ページ --*/
@media screen and (min-width: 601px){
	.Products_ReviewList #photo {
		float: left;
		width: 250px;
	}
	.Products_ReviewList #photo a img {
		cursor: -webkit-zoom-in;
		cursor: -moz-zoom-in;
		cursor: zoom-in;
	}
}
@media screen and (max-width:600px){
	.Products_ReviewList #photo {
		text-align: center;
	}
}
.Products_ReviewList dl.product_code {
	margin-bottom: 5px;
	font-size: 1.2rem;
	font-size: 12px;
}
.Products_ReviewList dl.product_code dt,
.Products_ReviewList dl.product_code dd {
	display: inline-block;
}
.Products_ReviewList p.product_catch {
	margin: 0;
}
.Products_ReviewList h2.product_name {
	padding: 0;
	margin-bottom: 10px;
	background-color: transparent;
	color: #333;
	font-size: 1.8rem;
	font-size: 18px;
}
.Products_ReviewList #customervoice_area .review_bloc {
	margin: 10px 0;
}
.Products_ReviewList #customervoice_area .review_bloc p {
	text-align: center;
}
/* 投稿数が多い場合にスクロール
.Products_ReviewList #customervoice_area .review_viewbloc {
	height: 1000px;
	overflow-y: scroll;
	overflow-x: hidden;
}
*/
.Products_ReviewList #customervoice_area dl {
	margin: 0 0 20px 0;
	padding: 10px;
	background-color: #FCFCF9;
	border-radius: 4px;
	border: 1px solid #EFEFEF;
}
.Products_ReviewList #customervoice_area dl dt {
	border-bottom: 1px dotted #CCCCCC;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
.Products_ReviewList #customervoice_area .review {
	float: left;
}
.Products_ReviewList #customervoice_area .date {
	float: right;
}
.Products_ReviewList #customervoice_area span.recommend_level {
	color: #E65C0F;
}
.Products_ReviewList #customervoice_area .voicetitle {
	font-weight: bold;
	margin-bottom: 5px;
}

■商品詳細ページからリンクを作成する
・「デザイン＞PC＞ページ設定＞商品詳細ページ＞レイアウト＞お客様の声＞編集」
・「デザイン＞スマートフォン＞ページ設定＞商品詳細ページ＞レイアウト＞お客様の声＞編集」
上記2つのブロック中の任意位置に、下記のリンクを追加する

<a href="/<!--{productName|escape:"url"}-->/product-review/<!--{productBaseCode}-->/">すべてのレビューを参照します</a>