Utilisation de l'application Product Reviews

Rendez-vous sur l'App Store pour installer Product Reviews pour Shopify

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.

Les étapes de ce tutoriel diffèrent selon que vous utilisez un thème avec sections ou non. Un thème avec sections est un thème plus récent, qui vous permet de glisser et déposer pour organiser la mise en page de votre boutique.

Pour déterminer si votre thème prend en charge les sections, accédez à la page Modifier le code du thème. Si le répertoire Sections contient des fichiers, vous utilisez un thème avec sections. Les thèmes sans section ont été publiés avant octobre 2016 et n'ont pas de fichiers dans le répertoire Sections.

Si vous utilisez un thème avec sections, cliquez sur le bouton Sectioned themes (Thèmes avec sections) et suivez les instructions. Si vous utilisez un thème plus ancien, sans section, cliquez sur le bouton Non-sectioned themes (Thèmes sans section) et suivez les instructions.

Thèmes avec sections thèmes sans section

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 :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).

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 (Enregistrer).

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

Ajouter des badges de notation à vos pages de produit :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).

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

Remarque

Si vous utilisez Venture, il n'est pas conseillé de placer des badges de notation sur votre produit en vedette.

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

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).

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

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

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).

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

Ajouter des badges de notation à vos pages de collection :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).

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

Ajouter des badges de notation à vos pages de produit :

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

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

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

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 (Enregistrer).