제품 리뷰 앱 사용

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

제품 페이지에는 리뷰 양식을, 제품 및 컬렉션 페이지에는 리뷰 점수 배지를 추가할 수 있습니다. 이 튜토리얼의 단계는 테마 아키텍처 버전에 따라 다릅니다. 온라인 스토어에 리뷰 요소를 추가하려면 테마 아키텍처 버전에 따라 지침을 따릅니다.

이 페이지의 정보

Online Store 2.0 테마

온라인 스토어 2.0 테마에 리뷰를 추가하고 리뷰 양식을 포함하며 별점을 표시할 수 있습니다.

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

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

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

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

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

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

Online Store 2.0 테마에 별점 추가

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

단계:

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

섹션 구분된 빈티지 테마

섹션 구분된 빈티지 테마의 다양한 페이지에 리뷰를 추가하고 리뷰 양식을 포함하고 리뷰 점수 배지를 표시할 수 있습니다.

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  4. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  5. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  6. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  7. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  6. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  7. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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 Admin에서 온라인 스토어 > 테마로 이동합니다.
  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

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

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

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  4. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  5. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 product-template.liquid를 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 섹션 디렉토리에서 featured-product.liquid 파일을 엽니다.
  4. 리뷰 점수 배지를 표시할 코드 조각에서 해당 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ title }} Liquid 태그를 검색합니다. {{ title }} 태그를 찾을 수 없으면 {{ product.title }} 태그를 검색합니다.
  5. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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 %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 featured-product.liquid 파일을 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 조각에서 해당 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ title }} Liquid 태그를 검색합니다. {{ title }} 태그를 찾을 수 없으면 {{ product.title }} 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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 %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 featured-product.liquid 파일을 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 조각에서 해당 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ title }} Liquid 태그를 검색합니다. {{ title }} 태그를 찾을 수 없으면 {{ product.title }} 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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 %}
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.

섹션 구분되지 않은 빈티지 테마

섹션 구분되지 않은 빈티지 테마의 다양한 페이지에 리뷰를 추가하고 리뷰 양식을 포함하고 리뷰 점수 배지를 표시할 수 있습니다.

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 템플릿 디렉토리에서 product.liquid를 엽니다.
  4. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  5. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 디렉토리에서 product.liquid를 엽니다.
  6. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  7. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 디렉토리에서 product.liquid를 엽니다.
  6. 리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면 {{ product.description }} Liquid 태그를 검색합니다.
  7. {{ product.description }} Liquid 태그가 포함된 코드 아래에 다음 코드 조각을 붙여넣습니다. 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<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 Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. 코드 조각 디렉토리에서 product-grid-item.liquid를 엽니다. 일부 테마에서는 해당 파일의 이름이 다릅니다. product-grid-item.liquid를 찾을 수 없는 경우에는 다음 중 하나를 찾습니다.

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

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

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

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  5. 코드 조각 디렉토리에서 product-grid-item.liquid를 엽니다. 일부 테마에서는 해당 파일의 이름이 다릅니다. product-grid-item.liquid를 찾을 수 없는 경우에는 다음 중 하나를 찾습니다.

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

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

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

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  5. 코드 조각 디렉토리에서 product-grid-item.liquid를 엽니다. 일부 테마에서는 해당 파일의 이름이 다릅니다. product-grid-item.liquid를 찾을 수 없는 경우에는 다음 중 하나를 찾습니다.

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

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

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

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<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>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 템플릿 디렉토리에서 product.liquid를 엽니다.
  4. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  5. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 디렉토리에서 product.liquid를 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 디렉토리에서 product.liquid를 엽니다.
  6. 리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면 {{ product.title }} Liquid 태그를 검색합니다.
  7. {{ product.title }} Liquid 태그가 포함된 코드 아래의 새로운 줄에 다음 코드 조각을 붙여넣습니다. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
  1. 저장을 클릭합니다.

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

무료 체험