제품 리뷰에 대한 고급 사용자 지정

제품 리뷰를 사용하면 리뷰, 리뷰 양식 및 별표 아이콘의 룩앤필을 사용자 지정할 수 있습니다. 이러한 사용자 지정은 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. 각각 18 x 18 픽셀의 아이콘 4개로 구성된 이미지를 생성합니다. 총 이미지 크기가 18 x 72 픽셀인 세로 열에 이미지를 일렬로 정렬합니다.

  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와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험