제품 리뷰 앱 사용

Shopify용 제품 리뷰를 설치하려면 앱 스토어로 이동하십시오.

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

이 튜토리얼의 단계는 섹션 포함 테마인지 섹션 미포함 테마인지에 따라 다릅니다. 최신 테마인 섹션 포함 테마에서는 끌어서 놓기 방식으로 스토어 페이지 레이아웃을 수정할 수 있습니다.

사용하는 테마에서 섹션을 지원하는지 확인하려면 코드 편집 페이지로 이동합니다. 섹션을 지원하는 테마를 사용하는 경우에는 섹션 디렉토리에서 파일을 찾아볼 수 있습니다. 2016년 10월 이전에 출시된 테마는 섹션을 지원하지 않으며 섹션 디렉토리에 파일이 없습니다.

섹션을 지원하는 테마를 사용하는 경우 섹션 지원 테마 버튼을 클릭한 다음 안내를 따릅니다. 섹션을 지원하지 않는 구형 테마를 사용하는 경우 섹션 미지원 테마 버튼을 클릭한 다음 안내를 따릅니다.

Sectioned themes

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

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

데스크톱

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

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

iPhone

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

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

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

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

Android

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. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

iPhone

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

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

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

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

Android

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. 저장을 클릭합니다.

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

참고 사항

Venture를 사용하는 경우에는 추천 제품에 리뷰 점수 배지를 두지 않는 것이 좋습니다.

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

데스크톱

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

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

iPhone

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

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

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

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

Android

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. 저장을 클릭합니다.

Non-sectioned themes

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

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

데스크톱

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

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

iPhone

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

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

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

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

Android

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. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

iPhone

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

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

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

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

Android

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. 편집할 테마를 찾은 다음 작업 > 코드 편집을 클릭합니다.

iPhone

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

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

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

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

Android

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. 저장을 클릭합니다.