제품 리뷰 앱 사용

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

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

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

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

Online Store 2.0

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

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

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

1. 리뷰 및 리뷰 양식 섹션을 추가하려는 제품 템플릿으로 이동합니다.
2. 섹션 추가를 클릭합니다.
3. 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
4. 선택 사항: 앱 섹션을 페이지에서 원하는 위치로 이동시킵니다.
5. 저장을 클릭합니다.

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

1. 리뷰 및 리뷰 양식 블록을 추가하려는 페이지 및 섹션으로 이동합니다.
2. 블록 추가를 클릭합니다.
3. 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
4. 선택 사항: 리뷰 블록을 섹션에서 원하는 위치로 이동시킵니다.
5. 저장을 클릭합니다.

Online Store 2.0 테마에 별점 추가

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
2. 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
5. 편집을 탭합니다.

1. 별점을 추가하려는 페이지 및 섹션으로 이동합니다.
2. 블록 추가를 클릭합니다.
3. 드롭다운 메뉴의 앱 섹션에서 별점 앱 블록을 선택합니다.
4. 선택 사항: 별점 블록을 섹션에서 원하는 자리로 이동하거나 별 색상, 사이즈, 정렬, 컨텍스트를 사용자 지정합니다.
5. 저장을 클릭합니다.

Vintage 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>

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. 코드 조각 디렉토리에서 product-grid-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 관리자에서 온라인 스토어 > 테마로 이동합니다.

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>

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

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

참고 사항

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>

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

Vintage 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>

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

iPhone

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

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

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

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

Android

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

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

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

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

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

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

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

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>

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