Verwenden der Product Reviews-App

Nachdem du die Product Reviews-App installiert hast, kannst du zu deinen Produktseiten Bewertungsformulare und zu deinen Produkt- und Kategorieseiten Bewertungssiegel hinzufügen.

Die Schritte für dieses Tutorial unterscheiden sich je nachdem, ob du ein unterteiltes oder ein nicht unterteiltes Theme verwendest. Ein unterteiltes Theme ist ein neueres Theme, dass dir die Gestaltung per Drag and Drop erlaubt, um so das Layout der Seiten deines Shops anzupassen.

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

Wenn du ein unterteiltes Theme verwendest, klicke auf die Schaltfläche Unterteilte Themes und folge den Anweisungen. Wenn du ein älteres, nicht unterteiltes Theme verwendest, klicke auf die Schaltfläche Nicht unterteilte Themes und folge den Anweisungen.

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

Um zu deinen Produktseiten Bewertungsformulare hinzuzufügen:

  1. Öffne im Verzeichnis Abschnitte product-template.liquid.

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

  3. Füge 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>

Deine 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. Klicke auf Speichern.

Bewertungssiegel zu deinen Kategorieseiten in Themes mit Abschnitten einfügen

Schritte:

  1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

    In einigen Themes hat diese Datei einen anderen Namen. Wenn du product-grid-item.liquid nicht finden kannst, suche nach Folgendem:

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

  1. Suche den Bereich im Code, in dem deine Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um deinen Produkttitel in der Datei zu finden, suche nach dem Liquid-Tag {{ product.title }}.

  2. Füge 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>

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

Du kannst experimentieren, indem du den Code an verschiedenen Stellen in der Datei platzierst, um so zu sehen, wo du ihn am besten findest.

  1. Klicke auf Speichern.

Bewertungssiegel zu deiner Produktseite in Themes mit Abschnitten einfügen

So fügst du Bewertungssiegel zu deinen Produktseiten hinzu:

  1. Öffne im Verzeichnis Abschnitte product-template.liquid.

  2. Suche den Bereich im Code, in dem deine Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser direkt unter dem Produkttitel. Um deinen Produkttitel in der Datei zu finden, suche nach dem Liquid-Tag {{ product.title }}.

  3. Füge 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>

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

Du kannst experimentieren, indem du den Code an verschiedenen Stellen in der Datei platzierst, um so zu sehen, wo du ihn am besten findest.

  1. Klicke auf Speichern.

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

Hinweis: Wenn du Venture verwendest, empfehlen wir dir, keine Bewertungssiegel auf dem vorgestellten Produkt zu platzieren.

So fügst du Bewertungssiegel zu vorgestellten Produkten auf der Startseite hinzu:

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

  2. Suche den Bereich im Snippet, in dem deine Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um deinen Produkttitel in der Datei zu finden, suche nach dem Liquid-Tag {{ title }}. Wenn du das {{ title }}-Tag nicht findest, suche nach dem {{ product.title }}-Tag.

  3. Füge 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>

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

Du kannst experimentieren, indem du den Code an verschiedenen Stellen in der Datei platzierst, um so zu sehen, wo du ihn am besten findest.

  1. Klicke auf Speichern.

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

Um zu deinen Produktseiten Bewertungsformulare hinzuzufügen:

  1. Öffne im Verzeichnis Vorlagen den Link product.liquid.

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

  3. Füge 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>

Deine 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. Klicke auf Speichern.

Bewertungssiegel zu deinen Kategorieseiten in Themes ohne Abschnitte einfügen

So fügst du Bewertungssiegel zu den Kategorieseiten hinzu:

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

    In einigen Themes hat diese Datei einen anderen Namen. Wenn du product-grid-item.liquid nicht finden kannst, suche nach Folgendem:

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

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

  1. Suche den Bereich im Code, in dem deine Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser irgendwo unter dem Titel des Produkts. Um deinen Produkttitel in der Datei zu finden, suche nach dem Liquid-Tag {{ product.title }}.

  2. Füge 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>

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

Du kannst experimentieren, indem du den Code an verschiedenen Stellen in der Datei platzierst, um so zu sehen, wo du ihn am besten findest.

  1. Klicke auf Speichern.

Bewertungssiegel zu deiner Produktseite in Themes ohne Abschnitte einfügen

So fügst du Bewertungssiegel zu deinen Produktseiten hinzu:

  1. Öffne im Verzeichnis Vorlagen den Link product.liquid.

  2. Suche den Bereich im Code, in dem deine Bewertungssiegel erscheinen sollen. Normalerweise befindet sich dieser direkt unter dem Produkttitel. Um deinen Produkttitel in der Datei zu finden, suche nach dem Liquid-Tag {{ product.title }}.

  3. Füge 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>

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

Du kannst experimentieren, indem du den Code an verschiedenen Stellen in der Datei platzierst, um so zu sehen, wo du ihn am besten findest.

  1. Klicke auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren