제품 리뷰에 대한 고급 사용자 지정
이 페이지는 Jul 24, 2021에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/products/product-reviews/advanced-customization에서 확인하십시오.
제품 리뷰를 사용하면 리뷰, 리뷰 양식 및 별표 아이콘의 룩앤필을 사용자 지정할 수 있습니다. 이러한 사용자 지정은 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이라는 웹폰트를 사용하여 각 별표 아이콘을 렌더링합니다. 이로 인해 별표 아이콘은 모든 해상도 화면에서 선명하게 보이며 테마 색상을 상속할 수 있습니다.
해당 아이콘의 모양을 사용자 지정하려면 웹폰트를 이미지로 바꾸고 기본 제품 리뷰 스타일 시트를 재정의해야 합니다.
별표 아이콘을 사용자 지정하려면 다음 단계를 수행합니다.
각각 18 x 18 픽셀의 아이콘 4개로 구성된 이미지를 생성합니다. 총 이미지 크기가 18 x 72 픽셀인 세로 열에 이미지를 일렬로 정렬합니다.
파일 페이지로 이동하여 이미지를 업로드합니다.
업로드한 이미지의 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 마크업 참조
제품 리뷰 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 -->