การปรับแต่งขั้นสูงสำหรับการรีวิวสินค้า

หน้านี้พิมพ์ขึ้นเมื่อ Sep 20, 2020 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/products/product-reviews/advanced-customization

รีวิวสินค้าช่วยให้คุณสามารถปรับแต่งรูปลักษณ์และการใช้งานของรีวิว แบบฟอร์มรีวิวและไอคอนดาว คุณควรลองใช้การปรับแต่งเหล่านี้หากคุณมีความสามารถในการสร้างและแก้ไข CSS, HTML และโค้ด Liquid ด้วยการใช้โปรแกรมแก้ไขข้อความ

ปรับแต่ง CSS

รีวิวสินค้าได้รับการออกแบบมาเพื่อปรับให้เข้ากับธีมของคุณมากที่สุดเท่าที่จะเป็นไปได้ อย่างไรก็ตามคุณอาจจำเป็นต้องแทนที่ CSS รีวิวสินค้าเพื่อปรับแต่งรูปลักษณ์และการใช้งานของรีวิวและแบบฟอร์มการตรวจสอบให้ดียิ่งขึ้น

วิธีปรับแต่ง CSS:

  1. สร้างไฟล์ที่มีการแทนที่ CSS ของคุณโดยใช้โปรแกรมแก้ไขข้อความบนคอมพิวเตอร์ของคุณ บันทึกไฟล์เป็นproduct-reviews-override.css.

  2. ไปยังเครื่องมือแก้ไขธีม

  3. คลิกสินทรัพย์

  4. คลิกเพิ่มสินทรัพย์ใหม่แล้วอัปโหลดไฟล์product-reviews-override.css

  5. ไปที่เลย์เอาต์theme.liquid

  6. วางโค้ดต่อไปนี้หน้า</head>.

  {{ "product-reviews-override.css" | asset_url | stylesheet_tag }}

ปรับแต่งไอคอนดาว

รีวิวสินค้าใช้รูปแบบอักษรบนเว็บที่เรียกว่า Font Awesome ในการแสดงไอคอนดาวแต่ละรายการ การทำเช่นนี้จะทำให้ไอคอนดาวดูชัดเจนในการแสดงผลความทึกระดับละเอียดและการใช้สีของธีมของคุณ

หากคุณต้องการปรับแต่งรูปลักษณ์ของไอคอนเหล่านี้คุณต้องแทนที่รูปแบบอักษรบนเว็บด้วยรูปภาพและแทนที่สไตล์ชีตรีวิวสินค้าเริ่มต้น

วิธีปรับแต่งไอคอนดาว:

  1. สร้างรูปภาพที่ประกอบด้วยไอคอน 4 ไอคอน แต่ละไอคอนมีขนาด 18px X 18px จัดเรียงในแนวตั้งให้ขนาดรูปภาพทั้งหมดออกมาเป็น 18px X 72px:

  2. ไปที่หน้าไฟล์และอัปโหลดรูปภาพของคุณ

  3. คัดลอก URL ของรูปภาพที่อัปโหลดไปยังไฟล์ข้อความ

  4. ไปที่เลย์เอาต์ theme.liquid

  5. วางโค้ดต่อไปนี้รวมถึง URL รูปภาพที่คุณได้อัพโหลดไว้หน้า </head> และคลิกปุ่มบันทึก

 <style>
  /* All stars */
  .spr-icon {
    background-image: url(&quot;YOUR IMAGE URL GOES HERE&quot;);
    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> &lt;!-- /.spr-summary --&gt;
    </div> &lt;!-- /.spr-header --&gt;

<pre><code translate="no">&lt;div class="spr-content"&gt;
  &lt;div class="spr-form"&gt;
    &lt;form class="new-review-form"&gt;
      &lt;h3 class="spr-form-title"&gt;Write a review&lt;/h3&gt;
      &lt;fieldset class="spr-form-contact"&gt;
        &lt;div class="spr-form-contact-name"&gt;
          &lt;label class="spr-form-label" for="review_author"&gt;Name&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-text" id="review_author" type="text" name="review[author]" value="" placeholder="Enter your name"&gt;
        &lt;/div&gt;
        &lt;div class="spr-form-contact-email"&gt;
          &lt;label class="spr-form-label" for="review_email"&gt;Email&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-email" id="review_email" type="email" name="review[email]" value="" placeholder="john.smith@example.com"&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-contact --&gt;

      &lt;fieldset class="spr-form-review"&gt;
        &lt;div class="spr-form-review-rating"&gt;
          &lt;label class="spr-form-label" for="review[rating]"&gt;Rating&lt;/label&gt;
          &lt;div class="spr-form-input spr-starrating "&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
            &lt;a href="#" class="spr-icon spr-icon-star spr-icon-star-empty"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-rating --&gt;

        &lt;div class="spr-form-review-title"&gt;
          &lt;label class="spr-form-label" for="review_title"&gt;Review Title&lt;/label&gt;
          &lt;input class="spr-form-input spr-form-input-text" id="review_title" type="text" name="review[title]" value="" placeholder="Give your review a title"&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-title --&gt;

        &lt;div class="spr-form-review-body"&gt;
          &lt;label class="spr-form-label" for="review_body"&gt;Body of Review &lt;span class="spr-form-review-body-charactersremaining"&gt;(1500)&lt;/span&gt;&lt;/label&gt;
          &lt;div class="spr-form-input"&gt;
            &lt;textarea class="spr-form-input spr-form-input-textarea" id="review_body" name="review[body]" rows="10" placeholder="Write your comments here"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.spr-form-review-body --&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-review --&gt;

      &lt;fieldset class="spr-form-actions"&gt;
        &lt;input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Submit Review"&gt;
        &lt;input type="button" class="spr-button button btn" value="Cancel"&gt;
      &lt;/fieldset&gt; &lt;!-- /.spr-form-actions --&gt;
    &lt;/form&gt;
  &lt;/div&gt;

  &lt;div class="spr-reviews"&gt;
    &lt;div class="spr-review"&gt;
      &lt;div class="spr-review-header"&gt;
        &lt;span class="spr-starratings spr-review-header-starratings"&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star-empty"&gt;&lt;/i&gt;
          &lt;i class="spr-icon spr-icon-star-empty"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;h3 class="spr-review-header-title"&gt;I love this product!&lt;/h3&gt;
        &lt;span class="spr-review-header-byline"&gt;&lt;strong&gt;John Appleseed&lt;/strong&gt; on &lt;strong&gt;Jan 26, 2014&lt;/strong&gt;&lt;/span&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-header --&gt;

      &lt;div class="spr-review-content"&gt;
        &lt;p class="spr-review-content-body"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor aliquam lorem, rhoncus tincidunt massa condimentum nec.&lt;/p&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-content --&gt;

      &lt;div class="spr-review-footer"&gt;
        &lt;a href="#" class="spr-review-reportreview"&gt;Report as Inappropriate&lt;/a&gt;
      &lt;/div&gt; &lt;!-- /.spr-review-footer --&gt;
    &lt;/div&gt; &lt;!-- /.spr-review --&gt;
  &lt;/div&gt; &lt;!-- /.spr-reviews --&gt;

&lt;/div&gt; &lt;!-- /.spr-content --&gt;
</code></pre>

<p></p></div> &lt;!-- /.spr-container --&gt;

<p></p></div>

 <!-- /#shopify-product-reviews -->

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี