제품 리뷰 앱 사용
제품 리뷰 앱을 설치하면 제품 페이지에는 리뷰 양식을, 제품 및 컬렉션 페이지에는 리뷰 점수 배지를 추가할 수 있습니다.
이 튜토리얼의 단계는 테마 아키텍처 버전에 따라 다릅니다.
테마 아키텍처 버전의 버튼을 클릭한 다음 지침에 따라 온라인 스토어에 리뷰 요소를 추가합니다.
Online Store 2.0 테마에 리뷰 및 리뷰 양식 추가
리뷰 및 리뷰 양식 앱 블록을 제품 템플릿의 섹션으로 추가하거나 제품 템플릿의 주요 제품 섹션에서 블록으로 추가할 수 있습니다. 이러한 옵션은 Shopify 테마 스토어의 모든 Online Store 2.0 테마에서 사용할 수 있습니다. 테마에 따라 다른 템플릿이나 섹션에 추가할 수 있습니다.
리뷰 및 리뷰 양식을 섹션으로 추가
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 리뷰 및 리뷰 양식 섹션을 추가하려는 제품 템플릿으로 이동합니다.
- 섹션 추가를 클릭합니다.
- 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
- 선택 사항: 앱 섹션을 페이지에서 원하는 위치로 이동시킵니다.
- 저장을 클릭합니다.
리뷰 및 리뷰 양식을 블록으로 추가
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 리뷰 및 리뷰 양식 블록을 추가하려는 페이지 및 섹션으로 이동합니다.
- 블록 추가를 클릭합니다.
- 드롭다운 메뉴의 앱 섹션에서 리뷰 앱 블록을 선택합니다.
- 선택 사항: 리뷰 블록을 섹션에서 원하는 위치로 이동시킵니다.
- 저장을 클릭합니다.
Online Store 2.0 테마에 별점 추가
제품 템플릿의 주요 제품 섹션에서 별점을 블록으로 추가할 수 있습니다. 이 옵션은 Shopify 테마 스토어의 모든 Online Store 2.0 테마에서 사용할 수 있습니다. 테마에 따라 다른 섹션 및 템플릿에 추가할 수 있습니다.
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 별점을 추가하려는 페이지 및 섹션으로 이동합니다.
- 블록 추가를 클릭합니다.
- 드롭다운 메뉴의 앱 섹션에서 별점 앱 블록을 선택합니다.
- 선택 사항: 별점 블록을 섹션에서 원하는 자리로 이동하거나 별 색상, 사이즈, 정렬, 컨텍스트를 사용자 지정합니다.
- 저장을 클릭합니다.
섹션 지원 테마에서 제품 페이지에 리뷰 및 리뷰 양식 추가
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
섹션 디렉토리에서
product-template.liquid
를 엽니다.리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면
{{ product.description }}
Liquid 태그를 검색합니다.{{ 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>
- 저장을 클릭합니다.
섹션 지원 테마에서 컬렉션 페이지에 리뷰 점수 배지 추가
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 작업 > 코드 편집을 클릭합니다.
코드 조각 디렉토리에서
product-grid-item.liquid
파일을 엽니다.리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면
{{ product.title }}
Liquid 태그를 검색합니다.{{ 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.
- 저장을 클릭합니다.
섹션 지원 테마에서 제품 페이지에 리뷰 점수 배지 추가
제품 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
섹션 디렉토리에서
product-template.liquid
를 엽니다.리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면
{{ product.title }}
Liquid 태그를 검색합니다.{{ 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.
- 저장을 클릭합니다.
섹션 지원 테마에서 추천 제품에 리뷰 점수 배지 추가
홈페이지에서 추천 제품에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
섹션 디렉토리에서
featured-product.liquid
파일을 엽니다.리뷰 점수 배지를 표시할 코드 조각에서 해당 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면
{{ title }}
Liquid 태그를 검색합니다.{{ title }}
태그를 찾을 수 없으면{{ product.title }}
태그를 검색합니다.{{ 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.
- 저장을 클릭합니다.
섹션 미지원 테마에서 제품 페이지에 리뷰 및 리뷰 양식 추가
제품 페이지에 리뷰 양식을 추가하려면 다음 단계를 수행합니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
템플릿 디렉토리에서
product.liquid
를 엽니다.리뷰를 표시할 코드 영역을 찾습니다. 일반적으로 제품 설명 아래에 있습니다. 파일에서 제품 설명을 찾으려면
{{ product.description }}
Liquid 태그를 검색합니다.{{ 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>
- 저장을 클릭합니다.
섹션 미지원 테마에서 컬렉션 페이지에 리뷰 점수 배지 추가
컬렉션 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
코드 조각 디렉토리에서
product-grid-item.liquid
를 엽니다.리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 아래에 있습니다. 파일에서 제품 이름을 찾으려면
{{ product.title }}
Liquid 태그를 검색합니다.{{ 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.
- 저장을 클릭합니다.
섹션 미지원 테마에서 제품 페이지에 리뷰 점수 배지 추가
제품 페이지에 리뷰 점수 배지를 추가하려면 다음 단계를 수행합니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
Shopify 앱에서 스토어를 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
템플릿 디렉토리에서
product.liquid
를 엽니다.리뷰 점수 배지를 표시할 코드 영역을 찾습니다. 일반적으로 제품 이름 바로 아래에 있습니다. 파일에서 제품 이름을 찾으려면
{{ product.title }}
Liquid 태그를 검색합니다.{{ 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.
- 저장을 클릭합니다.