Product Reviewsアプリを使用する

このページはApr 27, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/products/product-reviews/installationをご覧ください。

商品ページにレビューフォームを追加したり、商品ページとコレクションページにレビュースコアバッジを追加したりできます。 このチュートリアルの手順は、テーマのアーキテクチャバージョンによって異なります。 テーマアーキテクチャのバージョンに基づく手順に従って、オンラインストアにレビュー要素を追加します。

目次

Online Store 2.0のテーマ

Online Store 2.0のテーマでは、レビューを追加したり、レビューフォームを含めたり、星評価を表示したりできます。

Online Store 2.0のテーマにレビューとレビュー入力フォームを追加する

レビュー、およびレビュー入力フォームのアプリブロックは、商品テンプレートのセクションとして、または商品テンプレートのメイン商品セクションにあるブロックとして追加できます。Shopify テーマストアにあるOnline Store 2.0のテーマすべてで、このような操作が可能です。テーマによっては、レビュー、およびレビュー入力フォームのアプリブロックを他のテンプレートやセクションに追加できることがあります。

レビューとレビュー入力フォームをセクションとして追加する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. レビューとレビュー入力フォームセクションを追加する商品テンプレートに進みます。
  4. [セクションを追加する] をクリックします。
  5. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  6. オプション: アプリセクションをページ上で配置したい場所に移動させます。
  7. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. レビューとレビュー入力フォームセクションを追加する商品テンプレートに進みます。
  7. [セクションを追加する] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  9. オプション: アプリセクションをページ上で配置したい場所に移動させます。
  10. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. レビューとレビュー入力フォームセクションを追加する商品テンプレートに進みます。
  7. [セクションを追加する] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  9. オプション: アプリセクションをページ上で配置したい場所に移動させます。
  10. [保存] をクリックします。

レビューとレビュー入力フォームをブロックとして追加する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. レビューとレビュー入力フォームブロックを追加するページとセクションに進みます。
  4. [ブロックを追加] をクリックします。
  5. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  6. オプション: レビューブロックをセクション内で配置したい場所に移動させます。
  7. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. レビューとレビュー入力フォームブロックを追加するページとセクションに進みます。
  7. [ブロックを追加] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  9. オプション: レビューブロックをセクション内で配置したい場所に移動させます。
  10. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. レビューとレビュー入力フォームブロックを追加するページとセクションに進みます。
  7. [ブロックを追加] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、レビューアプリブロックを選択します。
  9. オプション: レビューブロックをセクション内で配置したい場所に移動させます。
  10. [保存] をクリックします。

Online Store 2.0テーマで星評価を追加する

商品テンプレートのメイン商品セクションで、星評価をブロックとして追加できます。Shopify テーマストアにあるOnline Store 2.0のテーマすべてで、このような操作が可能です。テーマによっては、星評価ブロックを他のセクションやテンプレートに追加できることがあります。

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. 星評価を追加するページとセクションに進みます。
  4. [ブロックを追加] をクリックします。
  5. ドロップダウンメニューの [アプリ] セクションから、星評価アプリのブロックを選択します。
  6. オプション: 星評価ブロックをセクション内で配置したい場所に移動させます。もしくは、星の色、サイズ、位置、説明をカスタマイズします。
  7. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. 星評価を追加するページとセクションに進みます。
  7. [ブロックを追加] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、星評価アプリのブロックを選択します。
  9. オプション: 星評価ブロックをセクション内で配置したい場所に移動させます。もしくは、星の色、サイズ、位置、説明をカスタマイズします。
  10. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. 星評価を追加するページとセクションに進みます。
  7. [ブロックを追加] をクリックします。
  8. ドロップダウンメニューの [アプリ] セクションから、星評価アプリのブロックを選択します。
  9. オプション: 星評価ブロックをセクション内で配置したい場所に移動させます。もしくは、星の色、サイズ、位置、説明をカスタマイズします。
  10. [保存] をクリックします。

セクション対応の以前のテーマ

セクション対応の以前のテーマのさまざまなページにレビューを追加したり、レビューフォームを含めたり、レビュースコアのバッジを表示したりできます。

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. セクションディレクトリーで、product-template.liquidを開きます。
  4. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  5. {{ 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. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、product-template.liquidを開きます。
  6. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  7. {{ 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. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、product-template.liquidを開きます。
  6. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  7. {{ 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. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  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

  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. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. セクションディレクトリーで、product-template.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:
<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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、product-template.liquidを開きます。
  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名のすぐ下にあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。
  7. {{ 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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、product-template.liquidを開きます。
  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名のすぐ下にあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。
  7. {{ 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. [保存] をクリックします。

セクション対応のテーマの特集商品にレビュースコアバッジを追加する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. セクションディレクトリーで、featured-product.liquidファイルを開きます。
  4. レビュースコアバッジを表示するスニペット内のエリアを探します。通常、これは商品名の下辺りにあります。ファイル内の商品名を見つけるには、{{ title }}Liquidタグを検索します。{{ title }}タグが見つからない場合、{{ product.title }}タグを検索します。
  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__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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、featured-product.liquidファイルを開きます。
  6. レビュースコアバッジを表示するスニペット内のエリアを探します。通常、これは商品名の下辺りにあります。ファイル内の商品名を見つけるには、{{ title }}Liquidタグを検索します。{{ title }}タグが見つからない場合、{{ product.title }}タグを検索します。
  7. {{ 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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. セクションディレクトリーで、featured-product.liquidファイルを開きます。
  6. レビュースコアバッジを表示するスニペット内のエリアを探します。通常、これは商品名の下辺りにあります。ファイル内の商品名を見つけるには、{{ title }}Liquidタグを検索します。{{ title }}タグが見つからない場合、{{ product.title }}タグを検索します。
  7. {{ 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. [保存] をクリックします。

セクション非対応の以前のテーマ

セクション非対応の以前のテーマのさまざまなページにレビューを追加したり、レビューフォームを含めたり、レビュースコアのバッジを表示したりできます。

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. テンプレートディレクトリーで、product.liquidを開きます。
  4. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  5. {{ 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. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. テンプレートディレクトリーで、product.liquidを開きます。
  6. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  7. {{ 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. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. テンプレートディレクトリーで、product.liquidを開きます。
  6. レビューを表示するコード内のエリアを探します。通常、商品説明の下にそのエリアがあります。ファイル内の商品説明を見つけるには、{{ product.description }}Liquidタグを検索します。
  7. {{ 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. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

  3. スニペットディレクトリーで、product-grid-item.liquidを開きます。いくつかのテーマでは、このファイルの名前が異なります。product-grid-item.liquidが存在しない場合、以下のいずれかを探します。

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquidテーマに上記のファイルがない場合、商品のグリッドコードはテンプレートディレクトリーのcollection.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. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

  5. スニペットディレクトリーで、product-grid-item.liquidを開きます。いくつかのテーマでは、このファイルの名前が異なります。product-grid-item.liquidが存在しない場合、以下のいずれかを探します。

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquidテーマに上記のファイルがない場合、商品のグリッドコードはテンプレートディレクトリーのcollection.liquidファイルで見つかることがあります。

  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名の下辺りにあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。

  7. {{ 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. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。

  5. スニペットディレクトリーで、product-grid-item.liquidを開きます。いくつかのテーマでは、このファイルの名前が異なります。product-grid-item.liquidが存在しない場合、以下のいずれかを探します。

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquidテーマに上記のファイルがない場合、商品のグリッドコードはテンプレートディレクトリーのcollection.liquidファイルで見つかることがあります。

  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名の下辺りにあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。

  7. {{ 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. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  3. テンプレートディレクトリーで、product.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:
<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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. テンプレートディレクトリーで、product.liquidを開きます。
  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名のすぐ下にあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。
  7. {{ 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. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
  5. テンプレートディレクトリーで、product.liquidを開きます。
  6. レビュースコアバッジを表示するコード内のエリアを探します。通常、これは商品名のすぐ下にあります。ファイル内の商品名を見つけるには、{{ product.title }}Liquidタグを検索します。
  7. {{ 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. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す