제품 리뷰 앱 사용

이 페이지는 Oct 22, 2021에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/products/product-reviews/installation에서 확인하십시오.

제품 리뷰 앱을 설치하면 제품 페이지에는 리뷰 양식을, 제품 및 컬렉션 페이지에는 리뷰 점수 배지를 추가할 수 있습니다.

이 튜토리얼의 단계는 테마 아키텍처 버전에 따라 다릅니다.

테마 아키텍처 버전의 버튼을 클릭한 다음 지침에 따라 온라인 스토어에 리뷰 요소를 추가합니다.

Online Store 2.0 테마에 리뷰 및 리뷰 양식 추가

리뷰 및 리뷰 양식 앱 블록을 제품 템플릿의 섹션으로 추가하거나 제품 템플릿의 주요 제품 섹션에서 블록으로 추가할 수 있습니다. 이러한 옵션은 Shopify 테마 스토어의 모든 Online Store 2.0 테마에서 사용할 수 있습니다. 테마에 따라 다른 템플릿이나 섹션에 추가할 수 있습니다.

리뷰 및 리뷰 양식을 섹션으로 추가

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. 리뷰 및 리뷰 양식 섹션을 추가하려는 제품 템플릿으로 이동합니다.
  2. 섹션 추가를 클릭합니다.
  3. 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
  4. 선택 사항: 앱 섹션을 페이지에서 원하는 위치로 이동시킵니다.
  5. 저장을 클릭합니다.

리뷰 및 리뷰 양식을 블록으로 추가

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. 리뷰 및 리뷰 양식 블록을 추가하려는 페이지 및 섹션으로 이동합니다.
  2. 블록 추가를 클릭합니다.
  3. 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
  4. 선택 사항: 리뷰 블록을 섹션에서 원하는 위치로 이동시킵니다.
  5. 저장을 클릭합니다.

Online Store 2.0 테마에 별점 추가

제품 템플릿의 주요 제품 섹션에서 별점을 블록으로 추가할 수 있습니다. 이 옵션은 Shopify 테마 스토어의 모든 Online Store 2.0 테마에서 사용할 수 있습니다. 테마에 따라 다른 섹션 및 템플릿에 추가할 수 있습니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. Shopify 앱에서 스토어를 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
  5. 편집을 탭합니다.
  1. 별점을 추가하려는 페이지 및 섹션으로 이동합니다.
  2. 블록 추가를 클릭합니다.
  3. 드롭다운 메뉴의 앱 섹션에서 별점 앱 블록을 선택합니다.
  4. 선택 사항: 별점 블록을 섹션에서 원하는 자리로 이동하거나 별 색상, 사이즈, 정렬, 컨텍스트를 사용자 지정합니다.
  5. 저장을 클릭합니다.

섹션 지원 테마에서 제품 페이지에 리뷰 및 리뷰 양식 추가

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 섹션 디렉토리에서 product-template.liquid를 엽니다.

  2. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.

  3. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다.

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

코드 배치는 다음과 같이 표시될 수 있습니다.

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 저장을 클릭합니다.

섹션 지원 테마에서 컬렉션 페이지에 리뷰 점수 배지 추가

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 작업 > 코드 편집을 클릭합니다.

  3. 코드 조각 디렉토리에서 product-grid-item.liquid 파일을 엽니다.

    일부 테마에서는 해당 파일의 이름이 다릅니다. product-grid-item.liquid를 찾을 수 없는 경우에는 다음 중 하나를 찾습니다.

- product-card-grid.liquid - product-card.liquid - product-card-item.liquid - product-block.liquid - product-item.liquid

  1. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.

  2. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다.

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

코드 배치는 다음과 같이 표시될 수 있습니다.

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

파일의 다른 위치에 코드를 놓고 테스트하면 최적의 위치를 확인할 수 있습니다.

  1. 저장을 클릭합니다.

섹션 지원 테마에서 제품 페이지에 리뷰 점수 배지 추가

제품 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 섹션 디렉토리에서 product-template.liquid를 엽니다.

  2. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.

  3. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다.

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

코드 배치는 다음과 같이 표시될 수 있습니다.

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

파일의 다른 위치에 코드를 놓고 테스트하면 최적의 위치를 확인할 수 있습니다.

  1. 저장을 클릭합니다.

섹션 지원 테마에서 추천 제품에 리뷰 점수 배지 추가

홈페이지에서 추천 제품에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 섹션 디렉토리에서 featured-product.liquid 파일을 엽니다.

  2. 리뷰 점수 배지를 표시할 코드 조각에서 해당 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ title }} Liquid 태그를 검색합니다. {{ title }} 태그를 찾을 수 없으면 {{ product.title }} 태그를 검색합니다.

  3. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다.

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

코드 배치는 다음과 같이 표시될 수 있습니다.

<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}

파일의 다른 위치에 코드를 놓고 테스트하면 최적의 위치를 확인할 수 있습니다.

  1. 저장을 클릭합니다.

섹션 미지원 테마에서 제품 페이지에 리뷰 및 리뷰 양식 추가

제품 페이지에 리뷰 양식을 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 템플릿 디렉토리에서 product.liquid를 엽니다.

  2. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.

  3. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다.

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

코드 배치는 다음과 같이 표시될 수 있습니다.

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 저장을 클릭합니다.

섹션 미지원 테마에서 컬렉션 페이지에 리뷰 점수 배지 추가

컬렉션 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 코드 조각 디렉토리에서 product-grid-item.liquid를 엽니다.

    일부 테마에서는 해당 파일의 이름이 다릅니다. product-grid-item.liquid를 찾을 수 없는 경우에는 다음 중 하나를 찾습니다.

- product-card.liquid - product-card-item.liquid - product-block.liquid

테마에서 위 파일을 찾을 수 없는 경우에는 템플릿 디렉토리의 collection.liquid 파일에서 제품 그리드 코드가 발견될 수도 있습니다.

  1. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.

  2. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다.

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

코드 배치는 다음과 같이 표시될 수 있습니다.

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item_link" href="{{ product.url | within: collection }}">
    <img class="grid-view-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-itemtitle">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-itemvendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item_meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

파일의 다른 위치에 코드를 놓고 테스트하면 최적의 위치를 확인할 수 있습니다.

  1. 저장을 클릭합니다.

섹션 미지원 테마에서 제품 페이지에 리뷰 점수 배지 추가

제품 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

  4. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

  1. 템플릿 디렉토리에서 product.liquid를 엽니다.

  2. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.

  3. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다.

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

코드 배치는 다음과 같이 표시될 수 있습니다.

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

파일의 다른 위치에 코드를 놓고 테스트하면 최적의 위치를 확인할 수 있습니다.

  1. 저장을 클릭합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험