การปรับแต่งขั้นสูงสำหรับการรีวิวสินค้า
รีวิวสินค้าช่วยให้คุณสามารถปรับแต่งรูปลักษณ์และการใช้งานของรีวิว แบบฟอร์มรีวิวและไอคอนดาว คุณควรลองใช้การปรับแต่งเหล่านี้หากคุณมีความสามารถในการสร้างและแก้ไข CSS, HTML และโค้ด Liquid ด้วยการใช้โปรแกรมแก้ไขข้อความ
ปรับแต่ง CSS
รีวิวสินค้าได้รับการออกแบบมาเพื่อปรับให้เข้ากับธีมของคุณมากที่สุดเท่าที่จะเป็นไปได้ อย่างไรก็ตามคุณอาจจำเป็นต้องแทนที่ CSS รีวิวสินค้าเพื่อปรับแต่งรูปลักษณ์และการใช้งานของรีวิวและแบบฟอร์มการตรวจสอบให้ดียิ่งขึ้น
วิธีปรับแต่ง CSS:
สร้างไฟล์ที่มีการแทนที่ CSS ของคุณโดยใช้โปรแกรมแก้ไขข้อความบนคอมพิวเตอร์ของคุณ บันทึกไฟล์เป็น
product-reviews-override.css
.ไปยังเครื่องมือแก้ไขธีม
คลิกสินทรัพย์
คลิกเพิ่มสินทรัพย์ใหม่แล้วอัปโหลดไฟล์
product-reviews-override.css
ไปที่เลย์เอาต์theme.liquid
วางโค้ดต่อไปนี้หน้า
</head>
.
{{ "product-reviews-override.css" | asset_url | stylesheet_tag }}
ปรับแต่งไอคอนดาว
รีวิวสินค้าใช้รูปแบบอักษรบนเว็บที่เรียกว่า Font Awesome ในการแสดงไอคอนดาวแต่ละรายการ การทำเช่นนี้จะทำให้ไอคอนดาวดูชัดเจนในการแสดงผลความทึกระดับละเอียดและการใช้สีของธีมของคุณ
หากคุณต้องการปรับแต่งรูปลักษณ์ของไอคอนเหล่านี้คุณต้องแทนที่รูปแบบอักษรบนเว็บด้วยรูปภาพและแทนที่สไตล์ชีตรีวิวสินค้าเริ่มต้น
วิธีปรับแต่งไอคอนดาว:
สร้างรูปภาพที่ประกอบด้วยไอคอน 4 ไอคอน แต่ละไอคอนมีขนาด 18px X 18px จัดเรียงในแนวตั้งให้ขนาดรูปภาพทั้งหมดออกมาเป็น 18px X 72px:
ไปที่หน้าไฟล์และอัปโหลดรูปภาพของคุณ
คัดลอก URL ของรูปภาพที่อัปโหลดไปยังไฟล์ข้อความ
วางโค้ดต่อไปนี้รวมถึง 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
หากคุณกำลังแก้ไขการ 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 -->