Product Reviews 進階自訂內容
此頁面列印時間為 Jan 16, 2021。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/products/product-reviews/advanced-customization。
Product Reviews 應用程式可供您自訂評論、評論表單及星評圖示的外觀與風格。若要自訂內容，您必須熟悉如何建立與編輯 CSS、HTML 及 Liquid 程式碼，並瞭解如何使用文字編輯器程式。
自訂 CSS
Product Reviews 的設計旨在盡可能適用於您的佈景主題。然而，您可能會需要覆寫 Product Review CSS，以進一步自訂評論及評論表單的外觀與風格。
若要自訂 CSS：
使用電腦的文字編輯器，以您的 CSS 覆寫建立一個檔案。將這個檔案儲存為「
product-reviews-override.css」。前往「佈景主題編輯器」。
按一下「資產」。
按一下「新增資產」，並上傳「
product-reviews-override.css」檔案。前往「theme.liquid」版面配置。
將下列程式碼貼上
</head>的前面。
{{ "product-reviews-override.css" | asset_url | stylesheet_tag }}自訂星評圖示
Product Reviews 會使用稱為「Font Awesome」的網頁字型來處理每個星評圖示。這能使星評圖示在任何解析度的顯示畫面中，都清楚呈現，並延續您佈景主題的顏色。
如果要自訂星評圖示的外觀，您必須使用圖片來取代網頁字型，並覆寫預設的 Product Reviews 樣式表。
若要自訂星評圖示：
建立一幅包含 4 個圖示的圖片，每個圖示各為 18px × 18px。將圖示以直立方式排列，總圖片尺寸為 18px × 72px：
前往「檔案」頁面，並上傳您的圖片。
將您所上傳之圖片的 URL 網址，複製於文字檔案中。
前往您的「theme.liquid 版面配置」。
將下列程式碼包含圖片的 URL 網址貼上
</head>的前面，然後按一下「儲存」按鈕。
<style>
/* All stars */
.spr-icon {
background-image: url("YOUR IMAGE URL GOES HERE");
background-position: 0 0;
display: inline-block;
position: static;
top: 0;
width: 18px;
height: 18px;
text-indent: -30000px;
}</p>
<p>/* Empty star <em>/
/</em> Shown in New Review form as unselected */
.spr-icon.spr-icon-star-empty,
.spr-icon.spr-icon.spr-icon-star-empty {
background-position: 0 0;
opacity: 1;
}</p>
<p>/* Empty star on hover <em>/
/</em> Displayed when user hovers mouse over an empty star in the review form */
.spr-icon.spr-icon-star-empty.spr-icon-star-hover {
background-position: 0 -18px;
}</p>
<p>/* Full star */
.spr-icon.spr-icon-star {
background-position: 0 -36px;
}</p>
<p>/* Half star <em>/
/</em> Displayed when a rating is a half value (3.5 stars) */
.spr-icon.spr-icon-star-half {
background-position: 0 -54px;
opacity: 1;
}
</style> HTML 標記參照
如果您在編輯 Product Reviews CSS，可以使用此參照來識別 HTML 元素及其屬性，以便您可以針對它們來撰寫 CSS 規則。
<div id="shopify-product-reviews">
<p></p><div class="spr-container">
<div class="spr-header">
<h2 class="spr-header-title">客戶評論</h2>
<div class="spr-summary">
<span class="spr-starrating spr-summary-starrating"> <i class="spr-icon spr-icon-star"></i> <i class="spr-icon spr-icon-star"></i> <i class="spr-icon spr-icon-star-half"></i> <i class="spr-icon spr-icon-star-empty"></i> <i class="spr-icon spr-icon-star-empty"></i> </span> <span class="spr-summary-caption">尚無評論</span> <span class="spr-summary-actions"> <a href="#" class="spr-summary-actions-newreview">撰寫評論</a> </span>
</div> <!-- /.spr-summary -->
</div> <!-- /.spr-header -->
<pre><code translate="no"><div class="spr-content">
<div class="spr-form">
<form class="new-review-form">
<h3 class="spr-form-title">Write a review</h3>
<fieldset class="spr-form-contact">
<div class="spr-form-contact-name">
<label class="spr-form-label" for="review_author">Name</label>
<input class="spr-form-input spr-form-input-text" id="review_author" type="text" name="review[author]" value="" placeholder="Enter your name">
</div>
<div class="spr-form-contact-email">
<label class="spr-form-label" for="review_email">Email</label>
<input class="spr-form-input spr-form-input-email" id="review_email" type="email" name="review[email]" value="" placeholder="john.smith@example.com">
</div>
</fieldset> <!-- /.spr-form-contact -->
<fieldset class="spr-form-review">
<div class="spr-form-review-rating">
<label class="spr-form-label" for="review[rating]">Rating</label>
<div class="spr-form-input spr-starrating ">
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
<a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
</div>
</div> <!-- /.spr-form-review-rating -->
<div class="spr-form-review-title">
<label class="spr-form-label" for="review_title">Review Title</label>
<input class="spr-form-input spr-form-input-text" id="review_title" type="text" name="review[title]" value="" placeholder="Give your review a title">
</div> <!-- /.spr-form-review-title -->
<div class="spr-form-review-body">
<label class="spr-form-label" for="review_body">Body of Review <span class="spr-form-review-body-charactersremaining">(1500)</span></label>
<div class="spr-form-input">
<textarea class="spr-form-input spr-form-input-textarea" id="review_body" name="review[body]" rows="10" placeholder="Write your comments here"></textarea>
</div>
</div> <!-- /.spr-form-review-body -->
</fieldset> <!-- /.spr-form-review -->
<fieldset class="spr-form-actions">
<input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Submit Review">
<input type="button" class="spr-button button btn" value="Cancel">
</fieldset> <!-- /.spr-form-actions -->
</form>
</div>
<div class="spr-reviews">
<div class="spr-review">
<div class="spr-review-header">
<span class="spr-starratings spr-review-header-starratings">
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
</span>
<h3 class="spr-review-header-title">I love this product!</h3>
<span class="spr-review-header-byline"><strong>John Appleseed</strong> on <strong>Jan 26, 2014</strong></span>
</div> <!-- /.spr-review-header -->
<div class="spr-review-content">
<p class="spr-review-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor aliquam lorem, rhoncus tincidunt massa condimentum nec.</p>
</div> <!-- /.spr-review-content -->
<div class="spr-review-footer">
<a href="#" class="spr-review-reportreview">Report as Inappropriate</a>
</div> <!-- /.spr-review-footer -->
</div> <!-- /.spr-review -->
</div> <!-- /.spr-reviews -->
</div> <!-- /.spr-content -->
</code></pre>
<p></p></div> <!-- /.spr-container -->
<p></p></div>
<!-- /#shopify-product-reviews -->