Utilisation de l'application Product Reviews

Une fois l'application Product Reviews installée, vous pouvez ajouter des formulaires d'évaluation à vos pages de produits ainsi que des badges de notation à vos pages de produits et de collection.

Ajouter des avis et un formulaire d'évaluation à votre page de produit dans les thèmes en sections

Ajouter des formulaires d'évaluation à vos pages de produit :

  1. Dans le répertoire Sections, ouvrez product-template.liquid.

  2. Identifiez la zone du code où vous souhaitez faire apparaître vos avis. Habituellement, cette zone est située sous la description du produit. Pour identifier la description du produit dans le fichier, recherchez la balise Liquid {{ product.description }}.

  3. Sous le code contenant la balise Liquid {{ product.description }}, collez l'extrait suivant :

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Voici à quoi peut ressembler le positionnement de votre code :

<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. Cliquez sur Save.

Ajouter des badges de notation à ses pages de collection dans les thèmes en sections

Étapes :

  1. Depuis votre interface administrateur Shopify, accédez à Online Store (Boutique en ligne) > Themes (Thèmes).

  2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Edit code (Modifier le code).

  3. Dans le répertoire Snippets (Extraits), ouvrez le fichier product-grid-item.liquid.

    Dans certains thèmes, ce fichier porte un nom différent. Si le fichier product-grid-item.liquid est introuvable, recherchez les noms suivants :

- product-card.liquid - product-card-item.liquid - product-block.liquid - product-item.liquid

  1. Identifiez la zone du code où vous souhaitez faire apparaître vos badges de notation. Habituellement, cette zone est située sous le titre du produit. Pour identifier le titre de votre produit dans le fichier, recherchez la balise Liquid {{ product.title }}.

  2. Sur une nouvelle ligne située sous le code contenant la balise Liquid {{ product.title }}, collez l'extrait suivant :

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Voici à quoi peut ressembler le positionnement de votre code :

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

Il est possible d'expérimenter différents positionnements du code dans le fichier pour voir ce qui vous plaît le plus.

  1. Cliquez sur Save.

Ajouter des badges de notation à vos pages de produit dans les thèmes en sections

Ajouter des badges de notation à vos pages de produit :

  1. Dans le répertoire Sections, ouvrez product-template.liquid.

  2. Identifiez la zone du code où vous souhaitez faire apparaître vos badges de notation. Habituellement, cette zone est située juste en dessous du titre du produit. Pour identifier le titre de votre produit dans le fichier, recherchez la balise Liquid {{ product.title }}.

  3. Sur une nouvelle ligne située sous le code contenant la balise Liquid {{ product.title }}, collez l'extrait suivant :

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Voici à quoi peut ressembler le positionnement de votre code :

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Il est possible d'expérimenter différents positionnements du code dans le fichier pour voir ce qui vous plaît le plus.

  1. Cliquez sur Save.

Ajouter des badges de notation à votre produit en vedette dans les thèmes en sections

Ajouter des badges de notation à un produit en vedette sur la page d'accueil :

  1. Dans le répertoire Sections, ouvrez le fichier featured-product.liquid.

  2. Identifiez la zone de l'extrait où vous souhaitez faire apparaître vos badges de notation. Habituellement, cette zone est située sous le titre du produit. Pour identifier le titre de votre produit dans le fichier, recherchez la balise Liquid {{ title }}. Si la balise {{ title }} est introuvable, recherchez la balise {{ product.title }}.

  3. Sur une nouvelle ligne située sous le code contenant la balise Liquid {{ product.title }}, collez l'extrait suivant :

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Voici à quoi peut ressembler le positionnement de votre code :

<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 %}

Il est possible d'expérimenter différents positionnements du code dans le fichier pour voir ce qui vous plaît le plus.

  1. Cliquez sur Save.

Ajouter des avis et un formulaire d'évaluation à votre page de produit dans les thèmes sans sections

Ajouter des formulaires d'évaluation à vos pages de produit :

  1. Dans le répertoire Templates (Modèles), ouvrez product.liquid.

  2. Identifiez la zone du code où vous souhaitez faire apparaître vos avis. Habituellement, cette zone est située sous la description du produit. Pour identifier la description du produit dans le fichier, recherchez la balise Liquid {{ product.description }}.

  3. Sous le code contenant la balise Liquid {{ product.description }}, collez l'extrait suivant :

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Voici à quoi peut ressembler le positionnement de votre code :

<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. Cliquez sur Save.

Ajouter des badges de notation à ses pages de collection dans les thèmes sans section

Ajouter des badges de notation à vos pages de collection :

  1. Dans le répertoire Snippets (Extraits), ouvrez product-grid-item.liquid.

    Dans certains thèmes, ce fichier porte un nom différent. Si le fichier product-grid-item.liquid est introuvable, recherchez les noms suivants :

- product-card.liquid - product-card-item.liquid - product-block.liquid

Si votre thème ne comporte aucun des fichiers ci-dessus, le code de votre grille de produits se trouve peut-être dans le fichier collection.liquid du répertoire Templates (Modèles).

  1. Identifiez la zone du code où vous souhaitez faire apparaître vos badges de notation. Habituellement, cette zone est située sous le titre du produit. Pour identifier le titre de votre produit dans le fichier, recherchez la balise Liquid {{ product.title }}.

  2. Sur une nouvelle ligne située sous le code contenant la balise Liquid {{ product.title }}, collez l'extrait suivant :

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Voici à quoi peut ressembler le positionnement de votre code :

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

Il est possible d'expérimenter différents positionnements du code dans le fichier pour voir ce qui vous plaît le plus.

  1. Cliquez sur Save.

Ajouter des badges de notation à vos pages de produit dans les thèmes sans sections

Ajouter des badges de notation à vos pages de produit :

  1. Dans le répertoire Templates (Modèles), ouvrez product.liquid.

  2. Identifiez la zone du code où vous souhaitez faire apparaître vos badges de notation. Habituellement, cette zone est située juste en dessous du titre du produit. Pour identifier le titre de votre produit dans le fichier, recherchez la balise Liquid {{ product.title }}.

  3. Sur une nouvelle ligne située sous le code contenant la balise Liquid {{ product.title }}, collez l'extrait suivant :

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Voici à quoi peut ressembler le positionnement de votre code :

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Il est possible d'expérimenter différents positionnements du code dans le fichier pour voir ce qui vous plaît le plus.

  1. Cliquez sur Save.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement