De Product Reviews-app gebruiken

Nadat je de Product Reviews-app hebt geïnstalleerd, kun je beoordelingsformulieren aan je beoordelingsscorebadges aan je product- en collectiepagina's toevoegen.

De stappen in deze tutorial verschillen al naar gelang of je een thema met secties of zonder secties gebruikt. Een thema met secties is een nieuwer thema waarin je kun slepen en neerzetten om de pagina-opmaak van je winkel te bepalen.

Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden gebruikt voor oktober 2016 en de directory Secties van deze thema's bevat geen bestanden.

Als je een sectiethema gebruikt, klik op de knop Sectiethema's en volg de instructies. Als je een ouder, niet-gesegmenteerd thema gebruikt, klik op de knop Thema's zonder secties en volg de instructies.

Beoordelingen en een beoordelingsformulier aan je productpagina toevoegen in thema's met secties

Beoordelingsformulieren aan je productpagina's toevoegen:

  1. Open product-template.liquid in de directory Secties.

  2. Zoek in de code het gebied op waar je je beoordelingen wilt weergeven. Meestal is dit onder de productbeschrijving. Zoek de productbeschrijving in het bestand op door naar de Liquid-tag {{ product.description }} te zoeken.

  3. Plak het volgende fragment onder de code die de Liquid-tag {{ product.description }} bevat:

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

De code ziet er dan ongeveer zo uit:

<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. Klik op Opslaan.

Beoordelingsscorebadges aan je collectiepagina's toevoegen in thema's met secties

Stappen:

  1. Ga in het Shopify-beheercentrum naar Online winkel > Thema's.

  2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

  3. Open product-grid-item.liquid in de directory Fragmenten.

    In sommige thema's heeft dit bestand een andere naam. Als je product-grid-item.liquid niet kunt vinden, zoek naar een van de volgende bestanden:

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

  1. Zoek in de code het gebied op waar je je beoordelingsscorebadges wilt weergeven. Meestal is dit ergens onder de producttitel. Zoek de producttitel in het bestand op door naar de Liquid-tag {{ product.title }} te zoeken.

  2. Plak het volgende fragment op een nieuwe regel onder de code die de Liquid-tag {{ product.title }} bevat:

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

De code ziet er dan ongeveer zo uit:

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

Je kunt experimenteren met het plaatsen van de code op verschillende plaatsen in het bestand om te bepalen welke locatie je het meest bevalt.

  1. Klik op Opslaan.

Beoordelingsscorebadges aan je productpagina toevoegen in thema's met secties

Beoordelingsscorebadges aan je productpagina's toevoegen:

  1. Open product-template.liquid in de directory Secties.

  2. Zoek in de code het gebied op waar je je beoordelingsscorebadges wilt weergeven. Meestal is dit net onder de producttitel. Zoek de producttitel in het bestand op door naar de Liquid-tag {{ product.title }} te zoeken.

  3. Plak het volgende fragment op een nieuwe regel onder de code die de Liquid-tag {{ product.title }} bevat:

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

De code ziet er dan ongeveer zo uit:

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

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

Je kunt experimenteren met het plaatsen van de code op verschillende plaatsen in het bestand om te bepalen welke locatie je het meest bevalt.

  1. Klik op Opslaan.

Beoordelingsscorebadges aan je uitgelichte product toevoegen in thema's met secties

Beoordelingsscorebadges aan je uitgelichte product op de homepage toevoegen:

  1. Opent het bestand featured-product.liquid in de directory Secties.

  2. Zoek in het fragment het gebied op waar je je beoordelingsscorebadges wilt weergeven. Meestal is dit ergens onder de producttitel. Zoek de productitel in het bestand op door naar de Liquid-tag {{ title }} te zoeken. Als je de tag {{ title }} niet kunt vinden, zoek naar de tag {{ product.title }}.

  3. Plak het volgende fragment op een nieuwe regel onder de code die de Liquid-tag {{ product.title }} bevat:

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

De code ziet er dan ongeveer zo uit:

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

Je kunt experimenteren met het plaatsen van de code op verschillende plaatsen in het bestand om te bepalen welke locatie je het meest bevalt.

  1. Klik op Opslaan.

Beoordelingen en een beoordelingsformulier aan je productpagina toevoegen in thema's zonder secties

Beoordelingsformulieren aan je productpagina's toevoegen:

  1. Open product.liquid in de directory Templates.

  2. Zoek in de code het gebied op waar je je beoordelingen wilt weergeven. Meestal is dit onder de productbeschrijving. Zoek de productbeschrijving in het bestand op door naar de Liquid-tag {{ product.description }} te zoeken.

  3. Plak het volgende fragment onder de code die de Liquid-tag {{ product.description }} bevat:

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

De code ziet er dan ongeveer zo uit:

<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. Klik op Opslaan.

Beoordelingsscorebadges aan je collectiepagina's toevoegen in thema's zonder secties

Beoordelingsscorebadges aan je collectiepagina's toevoegen:

  1. Open product-grid-item.liquid in de directory Fragmenten.

    In sommige thema's heeft dit bestand een andere naam. Als je product-grid-item.liquid niet kunt vinden, zoek naar een van de volgende bestanden:

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

Als je thema geen van de bovenstaande bestanden bevat, kun je de productrastercode mogelijk vinden in het bestand collection.liquid in de map Templates.

  1. Zoek in de code het gebied op waar je je beoordelingsscorebadges wilt weergeven. Meestal is dit ergens onder de producttitel. Zoek de producttitel in het bestand op door naar de Liquid-tag {{ product.title }} te zoeken.

  2. Plak het volgende fragment op een nieuwe regel onder de code die de Liquid-tag {{ product.title }} bevat:

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

De code ziet er dan ongeveer zo uit:

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

Je kunt experimenteren met het plaatsen van de code op verschillende plaatsen in het bestand om te bepalen welke locatie je het meest bevalt.

  1. Klik op Opslaan.

Beoordelingsscorebadges aan je productpagina toevoegen in thema's zonder secties

Beoordelingsscorebadges aan je productpagina's toevoegen:

  1. Open product.liquid in de directory Templates.

  2. Zoek in de code het gebied op waar je je beoordelingsscorebadges wilt weergeven. Meestal is dit net onder de producttitel. Zoek de producttitel in het bestand op door naar de Liquid-tag {{ product.title }} te zoeken.

  3. Plak het volgende fragment op een nieuwe regel onder de code die de Liquid-tag {{ product.title }} bevat:

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

De code ziet er dan ongeveer zo uit:

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

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

Je kunt experimenteren met het plaatsen van de code op verschillende plaatsen in het bestand om te bepalen welke locatie je het meest bevalt.

  1. Klik op Opslaan.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis