Tùy chỉnh nâng cao dành cho ứng dụng Product Reviews

Product Reviews cho phép bạn tùy chỉnh giao diện của đánh giá, biểu mẫu đánh giá và biểu tượng sao. Bạn chỉ nên thử những nội dung tùy chỉnh này nếu thấy thoải mái khi tạo và chỉnh sửa mã CSS, HTML và Liquid và sử dụng chương trình soạn thảo văn bản.

Tùy chỉnh CSS

Product Reviews được thiết kế để phù hợp với chủ đề của bạn nhất có thể. Tuy nhiên, bạn có thể cần ghi đè CSS Product Reviews để tiếp tục tùy chỉnh giao diện của đánh giá và biểu mẫu đánh giá.

Để tùy chỉnh CSS:

  1. Sử dụng trình soạn thảo văn bản trên máy tính, tạo tệp có thông tin ghi đè CSS. Lưu tệp thành product-reviews-override.css.

  2. Vào trình biên tập chủ đề.

  3. Nhấp vào Assets (Phần tử).

  4. Nhấp vào Add a new asset (Thêm phần tử mới) và tải lên tệp product-reviews-override.css.

  5. Vào bố cục theme.liquid.

  6. Dán mã sau vào ngay trước </head>.

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

Tùy chỉnh biểu tượng sao

Product Reviews sử dụng phông chữ web có tên Font Awesome để kết xuất từng biểu tượng sao. Nhờ vậy, các biểu tượng sao sẽ hiển thị rõ ràng trên màn hình thuộc mọi độ phân giải và kế thừa màu sắc của chủ đề.

Nếu muốn tùy chỉnh giao diện của các biểu tượng này, bạn phải thay thế phông chữ web bằng hình ảnh và ghi đè bảng kiểu Product Reviews mặc định.

Để tùy chỉnh biểu tượng sao:

  1. Tạo hình ảnh bao gồm 4 biểu tượng, mỗi biểu tượng có kích thước 18 px x 18 px. Xếp các biểu tượng thành cột thẳng đứng để hình ảnh có tổng kích cỡ là 18 px x 72 px:

  2. Vào trang Files (Tệp) và tải lên hình ảnh của bạn.

  3. Sao chép URL của hình ảnh đã tải lên tệp văn bản.

  4. Vào bố cục theme.liquid.

  5. Dán mã sau bao gồm URL hình ảnh đã tải lên ngay trước </head> và nhấp vào nút Save (Lưu).

<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>

Tham chiếu đánh dấu HTML

Nếu bạn đang chỉnh sửa CSS của Product Reviews, bạn có thể sử dụng tham chiếu này để xác định các phần tử HTML và thuộc tính của các phần tử, từ đó, bạn có thể nhắm mục tiêu vào những phần tử đó khi viết quy tắc CSS.

<div id="shopify-product-reviews">

<p></p><div class="spr-container">
    <div class="spr-header">
      <h2 class="spr-header-title">Đánh giá của khách hàng</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">Chưa có đánh giá</span> <span class="spr-summary-actions"> <a href="#" class="spr-summary-actions-newreview">Viết đánh giá</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 -->

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí