メインコンテンツへスキップ

【クリエイターモード】テンプレートShiroでレビューを表示したいです。方法を教えてください。

  • 更新

全ページ共通CSS、商品詳細、商品レビュー一覧、商品レビュー投稿ページに
それぞれソースを追加することで表示が可能です。

◆全ページ共通CSSにレビュー関連で使用するCSSを追記

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「CSS」の末尾に以下の内容をコピー＆ペーストしてください。

/* -----------------------------------------------------------------
review
----------------------------------------------------------------- */
.item-review {
font-size: 12px;
}
.review-title{
font-size: 1.2rem;
text-align: left;
margin-bottom: 16px;
}
.review-category-title{
margin-bottom: 2em;
}
.review-wrap{
text-align: left;
}
.review-link {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.review-link a {
text-decoration: underline;
}
.review-link a:hover {
text-decoration: none;
text-align: left;
}
.item-review-detail {
margin-bottom: 60px;
text-align: left;
}
.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 {
width: 360px;
margin: 0 auto;
display: inline-block;
padding: 12px 0;
border: 1px solid #333333;
border-radius: 2px;
text-align: center;
}
.review-post a:before {
font-family: 'Font Awesome 5 Free';
content: "\f304";
font-size: 16px;
font-weight: 900;
padding-right: 10px;
color: fff;
}
.review-item-wrap {
border: 1px solid #333333;
padding: 20px;
border-radius: 3px;
display: flex;
margin-bottom: 60px;
}
.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 {
width: 80%;
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-content,
.review-form-content textarea{
width: 100%;
}
.review-form dd input {
border: 1px solid #707070;
width: 100%;
box-sizing: border-box;
}
.review-form dd .reviewRateStar:before {
font-size: 18px;
}
.review-post-btn {
border: none !important;
background: #707070;
color: #fff;
}

/* -----------------------------------------------------------------
responsive
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.review-category-title {
margin-bottom: 20px;
}
.item-review-list li {
margin-bottom: 30px;
}
.review-item-wrap {
margin-bottom: 30px;
display: block;
}
.section-title {
margin-bottom: 28px;
}
.section-title-deco::before,
.section-title-deco::after {
width: 25%;
}
.review-item-wrap .review-item-image {
padding-right: 0;
width: 100%;
}
.review-form-wrap,
.review-post a{
width: 100%;
}
.review-form {
display: block;
align-items: center;
margin-bottom: 30px;
}
.review-form:last-child {
margin-bottom: 60px;
}
.review-form dt {
width: 100%;
margin-bottom: 8px;
}
.review-form dd textarea {
width: 98%;
}
}
/******************************** REVIEW STAR */
.reviewRateStar {
display: inline-block;
font-size: 0;
color: #F8D803; 
}
.reviewRateStar::before {
font-family: 'Font Awesome 5 Free';
content: "\f005";
font-size: 1.5rem;
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"; 
}

 

◆商品詳細ページにレビュー、レビュー投稿ボタンを表示

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

（１）初期値では16行目の

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

の後ろなど、<head>～</head>内に

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

と追記してください。

 

（２）初期値122行目の

<section class="content-wrap">
<h2 class="content-title">Recently viewed items</h2>

の前など、レビュー、レビュー投稿ボタンを表示させたい位置にソースを追加してください。

追記例）

<{if $item.review.is_enabled}>
<section class="content-wrap">
<div class="item-review-detail">
<h3 class="review-title">この商品のレビュー</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}>&nbsp;<{$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}>">レビューを書く</a>
</p>
</div>
</section>
<{/if}>

 

◆商品レビュー一覧ページ

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

「HTML」に以下のソースをコピー＆ペーストしてください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<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 with Large Image">
<{$makeshop.head}><{* <head>～</head>内に必須 *}>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}><{* <body>直後に必須 *}>
<{$module.header}>

<div class="wrap">
<div class="page-wrap">
<section class="content-wrap">
<h2 class="section-title guide-title"><span class="section-title-deco">レビュー一覧</span></h2>
<section class="review-wrap">
<div class="category-title">
<h3 class="review-category-title"><{$item.name}>のレビュー一覧</h3>
</div>

<!--レビューアイテム-->
<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}></div>
</li>
<{/section}>
</ul>

<!--ページャー-->
<div class="pager-wrap">
<p class="total-count">（全<span><{$review.total_count}></span>件）<{$review.display_count}>件表示</p>
<{if $review.pager.has_item}>

<ul class="pager">
<{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> 

</section> 
</section>
</div>
<{$module.footer}>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>

◆商品レビュー投稿ページ

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

「HTML」に以下のソースをコピー＆ペーストしてください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<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 with Large Image">
<{$makeshop.head}><{* <head>～</head>内に必須 *}>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}><{* <body>直後に必須 *}>
<{$module.header}>
<div class="wrap">
<div class="page-wrap">
<section class="content-wrap">

<!--パンくず-->
<div class="breadcrumb">
<span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
<span class="breadcrumb-item current"><a href="<{$item.url}>"><{$item.name}></a>のレビュー投稿</span>
</div>

<h2 class="section-title review-title"><em><{$item.name}></em>のレビュー投稿</h2>

<!--レビュー対象商品-->
<div class="review-item-wrap">
<div class="review-item-image">
<img src="<{$item.image_S}>" alt="<{$item.name}>">
</div>
<div class="review-item-info">
<p class="review-item-category"><{$item.base_category.name}></p>
<p class="review-item-name"><a href="<{$item.url}>"><{$item.name}></a></p>
<{if $review.has_item}>
<div class="total-review">
<{$review.star_html}>
<p class="review-average"><{$review.average}></p>
<p class="review-count">（<{$review.total_count}>件）</p>
</div>
<{else}>
<p>まだレビューはありません</p>
<{/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="30" rows="10" data-id="<{$review.content_id}>"></textarea>
</dd>
</dl>

<a href="<{$review.entry_url}>" class="btn review-post-btn">この内容でレビューを投稿する</a>
</div>

</section>

</div>

<{$module.footer}>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}><{* </body>直前に必須 *}>
</body>
</html>
記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

お役に立てず申し訳ございません。

「いいえ」を選んだ理由をお聞かせください。

ページの先頭へ戻る

関連記事