Product Reviewsアプリを使用する

ShopifyのProduct Reviewsをインストールするには、アプリストアにアクセスします。

Product Reviewsアプリのインストール後、商品ページにレビューフォームを追加して、商品ページやコレクションページにレビュースコアバッジを追加できます。

このチュートリアルの手順は、セクション対応のテーマとセクション非対応のテーマのどちらを使用しているかによって異なります。セクション対応のテーマは新しいテーマであり、ドラッグアンドドロップすることで、ストアのページのレイアウトを調整できます。

お使いのテーマがセクションに対応しているかを確認するには、テーマのコードを編集するのページに移動します。セクションディレクトリーにファイルがある場合、お使いのファイルはセクション対応のテーマを使用しています。セクション非対応のテーマは、2016年10月以前にリリースされたものであり、セクションディレクトリーにファイルはありません。

セクション対応のテーマを使用している場合は、[セクション対応のテーマ] ボタンをクリックして表示される手順に従ってください。セクション非対応の古いテーマを使用している場合は、[セクション非対応のテーマ] ボタンをクリックして表示される手順に従ってください。

Sectioned themes

セクション対応のテーマの商品ページに、レビューとレビューフォームを追加する

商品ページにレビューフォームを追加するには、以下の手順を実行します。

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

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-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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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. [保存] をクリックします。