Verwenden der Product Reviews-App

Nachdem Sie die Product Reviews-App installiert haben, können Sie zu Ihren Produktseiten Bewertungsformulare und zu Ihren Produkt- und Kategorieseiten Bewertungssiegel hinzufügen.

Hinweis: Die Schritte für dieses Tutorial unterscheiden sich je nachdem, ob Sie ein unterteiltes oder ein nicht unterteiltes Theme verwenden. Ein unterteiltes Theme ist ein neueres Theme, dass Ihnen die Gestaltung per Drag and Drop erlaubt, um so das Layout der Seiten Ihres Shops anzupassen.

Gehen Sie auf die Seite Code bearbeiten Ihres Themes, um dort herauszufinden, ob Ihr Theme Abschnitte unterstützt oder nicht. Wenn sich Dateien im Verzeichnis Sections (Abschnitte) befinden, verwenden Sie ein unterteiltes Theme. Nicht unterteilte Themen wurden vor dem Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Sections (Abschnitte).

Wenn Sie ein unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Unterteilte Themes und folgen Sie den Anweisungen. Wenn Sie ein älteres, nicht unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Nicht unterteilte Themes und folgen Sie den Anweisungen.

Bewertungen und ein Bewertungsformular auf der Produktseite in Themes mit Abschnitten einfügen

Um zu Ihren Produktseiten Bewertungsformulare hinzuzufügen:

  1. Öffnen Sie im Verzeichnis Abschnitte product-template.liquid.

  2. Suchen Sie den Bereich im Code, in dem Ihre Bewertungen erscheinen sollen. Dieser befindet sich meist unter der Produktbeschreibung. Um die Produktbeschreibung in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.description }}.

  3. Fügen Sie den folgenden Snippet unter dem Code, der das Liquid-Tag {{ product.description }} enthält, ein.

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

Ihre Code-Platzierung könnte etwa so aussehen:

<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. Klicken Sie auf Speichern.

Bewertungssiegel zu Ihren Kategorieseiten in Themes mit Abschnitten einfügen

Schritte:

  1. Gehen Sie in Ihrem Shopify-Adminbereich auf Onlineshop > Themes.

  2. Suchen Sie das Theme, das Sie bearbeiten möchten und klicken Sie dann auf Aktionen > Code bearbeiten.

  3. Öffnen Sie im Verzeichnis Snippets die Datei product-grid-item.liquid.

    In einigen Themes hat diese Datei einen anderen Namen. Wenn Sie product-grid-item.liquid nicht finden können, suchen Sie nach Folgendem:

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

  1. Suchen Sie den Bereich im Code, in dem Ihre Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um Ihren Produkttitel in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.title }}.

  2. Fügen Sie in einer neuen Zeile unterhalb des Codes, der das Liquid-Tag {{ product.title }} enthält, das folgende Snippet ein:

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

Ihre Code-Platzierung könnte etwa so aussehen:

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

Sie können experimentieren, indem Sie den Code an verschiedenen Stellen in der Datei platzieren und so zu sehen, wo Sie ihn am besten finden.

  1. Klicken Sie auf Speichern.

Bewertungssiegel zu Ihrer Produktseite in Themes mit Abschnitten einfügen

So fügen Sie Bewertungssiegel zu Ihren Produktseiten hinzu:

  1. Öffnen Sie im Verzeichnis Abschnitte product-template.liquid.

  2. Suchen Sie den Bereich im Code, in dem Ihre Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser direkt unter dem Produkttitel. Um Ihren Produkttitel in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.title }}.

  3. Fügen Sie in einer neuen Zeile unterhalb des Codes, der das Liquid-Tag {{ product.title }} enthält, das folgende Snippet ein:

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

Ihre Code-Platzierung könnte etwa so aussehen:

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

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

Sie können experimentieren, indem Sie den Code an verschiedenen Stellen in der Datei platzieren und so zu sehen, wo Sie ihn am besten finden.

  1. Klicken Sie auf Speichern.

Bewertungssiegel zu Ihrem vorgestellten Produkt in Themes mit Abschnitten einfügen

Hinweis: Wenn Sie Venture verwenden, empfehlen wir Ihnen, keine Bewertungssiegel auf dem vorgestellten Produkt zu platzieren.

So fügen Sie Bewertungssiegel zu vorgestellten Produkten auf der Startseite hinzu:

  1. Öffnen Sie im Verzeichnis Abschnitte die Datei featured-product.liquid.

  2. Suchen Sie den Bereich im Snippet, in dem Ihre Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um Ihren Produkttitel in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ title }}. Wenn Sie das {{ title }}-Tag nicht finden, suchen Sie nach dem {{ product.title }}-Tag.

  3. Fügen Sie in einer neuen Zeile unterhalb des Codes, der das Liquid-Tag {{ product.title }} enthält, das folgende Snippet ein:

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

Ihre Code-Platzierung könnte etwa so aussehen:

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

Sie können experimentieren, indem Sie den Code an verschiedenen Stellen in der Datei platzieren und so zu sehen, wo Sie ihn am besten finden.

  1. Klicken Sie auf Speichern.

Bewertungen und Bewertungsformular auf der Produktseite in Themes ohne Abschnitte einfügen

Um zu Ihren Produktseiten Bewertungsformulare hinzuzufügen:

  1. Öffnen Sie im Verzeichnis Vorlagen den Link product.liquid.

  2. Suchen Sie den Bereich im Code, in dem Ihre Bewertungen erscheinen sollen. Dieser befindet sich meist unter der Produktbeschreibung. Um die Produktbeschreibung in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.description }}.

  3. Fügen Sie den folgenden Snippet unter dem Code, der das Liquid-Tag {{ product.description }} enthält, ein.

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

Ihre Code-Platzierung könnte etwa so aussehen:

<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. Klicken Sie auf Speichern.

Bewertungssiegel zu Ihren Kategorieseiten in Themes ohne Abschnitte einfügen

So fügen Sie Bewertungssiegel zu den Kategorieseiten hinzu:

  1. Öffnen Sie im Verzeichnis Snippets den Link product-grid-item.liquid.

    In einigen Themes hat diese Datei einen anderen Namen. Wenn Sie product-grid-item.liquid nicht finden können, suchen Sie nach Folgendem:

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

Wenn Ihr Theme keine der obengenannten Dateien enthält, könnte es sein, dass Ihr Produkt-Grid-Code in der Datei collection.liquid im Verzeichnis Vorlagen zu finden ist.

  1. Suchen Sie den Bereich im Code, in dem Ihre Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um Ihren Produkttitel in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.title }}.

  2. Fügen Sie in einer neuen Zeile unterhalb des Codes, der das Liquid-Tag {{ product.title }} enthält, das folgende Snippet ein:

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

Ihre Code-Platzierung könnte etwa so aussehen:

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

Sie können experimentieren, indem Sie den Code an verschiedenen Stellen in der Datei platzieren und so zu sehen, wo Sie ihn am besten finden.

  1. Klicken Sie auf Speichern.

Bewertungssiegel zu Ihrer Produktseite in Themes ohne Abschnitte einfügen

So fügen Sie Bewertungssiegel zu Ihren Produktseiten hinzu:

  1. Öffnen Sie im Verzeichnis Vorlagen den Link product.liquid.

  2. Suchen Sie den Bereich im Code, in dem Ihre Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser direkt unter dem Produkttitel. Um Ihren Produkttitel in der Datei zu finden, suchen Sie nach dem Liquid-Tag {{ product.title }}.

  3. Fügen Sie in einer neuen Zeile unterhalb des Codes, der das Liquid-Tag {{ product.title }} enthält, das folgende Snippet ein:

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

Ihre Code-Platzierung könnte etwa so aussehen:

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

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

Sie können experimentieren, indem Sie den Code an verschiedenen Stellen in der Datei platzieren und so zu sehen, wo Sie ihn am besten finden.

  1. Klicken Sie auf Speichern.

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus