Product Reviewsアプリを使用する
Product Reviewsアプリのインストール後、商品ページにレビューフォームを追加して、商品ページやコレクションページにレビュースコアバッジを追加できます。
このチュートリアルの手順は、テーマのアーキテクチャバージョンによって異なります。
テーマのアーキテクチャバージョンのボタンをクリックしてから、指示に従ってオンラインストアにレビュー要素を追加します。
目次
- Online Store 2.0のテーマにレビューとレビュー入力フォームを追加する
- Online Store 2.0テーマで星評価を追加する
- セクション対応のテーマの商品ページに、レビューとレビューフォームを追加する
- セクション対応のテーマのコレクションページにレビュースコアバッジを追加する
- セクション対応のテーマの商品ページにレビュースコアバッジを追加する
- セクション対応のテーマの特集商品にレビュースコアバッジを追加する
- セクション非対応のテーマの商品ページに、レビューとレビューフォームを追加する
- セクション非対応のテーマのコレクションページにレビュースコアバッジを追加する
- セクション非対応のテーマの商品ページにレビュースコアバッジを追加する
Online Store 2.0のテーマにレビューとレビュー入力フォームを追加する
レビュー、およびレビュー入力フォームのアプリブロックは、商品テンプレートのセクションとして、または商品テンプレートのメイン商品セクションにあるブロックとして追加できます。Shopify テーマストアにあるOnline Store 2.0のテーマすべてで、このような操作が可能です。テーマによっては、レビュー、およびレビュー入力フォームのアプリブロックを他のテンプレートやセクションに追加できることがあります。
レビューとレビュー入力フォームをセクションとして追加する
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- レビューとレビュー入力フォームセクションを追加する商品テンプレートに進みます。
- [セクションを追加する] をクリックします。
- ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
- オプション: アプリセクションをページ上で配置したい場所に移動させます。
- [保存] をクリックします。
レビューとレビュー入力フォームをブロックとして追加する
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- レビューとレビュー入力フォームブロックを追加するページとセクションに進みます。
- [ブロックを追加] をクリックします。
- ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
- オプション: レビューブロックをセクション内で配置したい場所に移動させます。
- [保存] をクリックします。
Online Store 2.0テーマで星評価を追加する
商品テンプレートのメイン商品セクションで、星評価をブロックとして追加できます。Shopify テーマストアにあるOnline Store 2.0のテーマすべてで、このような操作が可能です。テーマによっては、星評価ブロックを他のセクションやテンプレートに追加できることがあります。
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- 星評価を追加するページとセクションに進みます。
- [ブロックを追加] をクリックします。
- ドロップダウンメニューの [アプリ] セクションから、星評価アプリのブロックを選択します。
- オプション: 星評価ブロックをセクション内で配置したい場所に移動させます。もしくは、星の色、サイズ、位置、説明をカスタマイズします。
- [保存] をクリックします。
セクション対応のテーマの商品ページに、レビューとレビューフォームを追加する
管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
セクションディレクトリーで、
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>
- [保存] をクリックします。
セクション対応のテーマのコレクションページにレビュースコアバッジを追加する
管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
スニペットディレクトリーで、
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アプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
セクションディレクトリーで、
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アプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
セクションディレクトリーで、
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アプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
テンプレートディレクトリーで、
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アプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
スニペットディレクトリーで、
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アプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。
テンプレートディレクトリーで、
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.
- [保存] をクリックします。