Produktempfehlungen auf der Produktseite anzeigen

Diese Seite wurde gedruckt um Apr 23, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations.

In diesem Tutorial erfährst du, wie du im Debut-Theme Produktempfehlungen zu deiner Produktseite hinzufügen kannst. Mehr Informationen über Produktempfehlungen erhältst du unter Produktempfehlungen auf Produktseiten anzeigen.

Auf dieser Seite

Schritt 1: Abschnitt product-recommendations.liquid erstellen
Schritt 2: Abschnitt in die Vorlage product.liquid einschließen
Schritt 3: Datei theme.js bearbeiten, um Empfehlungen asynchron zu laden
Schritt 4: Datei theme.scss.liquid bearbeiten, um die Ladeanimation zu erstellen (optional)

Schritt 1: Abschnitt `product-recommendations.liquid` erstellen

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.
Benenne den neuen Abschnitt product-recommendations und klicke auf Abschnitt erstellen.
Ersetze den gesamten Inhalt durch den unten aufgeführten Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

Klicke auf Speichern.

Wenn der Abschnitt mit der Produktseite gerendert wird, ist recommendations.performed gleich false. Der generierte HTML-Code zeigt dann eine Ladeanimation an:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Wenn keine Ladeanimation angezeigt werden soll, verwende stattdessen diesen Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Wenn der oben aufgeführte Abschnitt mit deiner Produktseite gerendert wird, ist der generierte HTML-Code ein div-Element ohne Inhalt:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Wenn der Benutzer ein alternatives Gebietsschema verwendet, ist das Gebietsschema in data-base-url der div-Funktion enthalten. Beispiel: /fr/recommendations/products.

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.
Benenne den neuen Abschnitt product-recommendations und klicke auf Abschnitt erstellen.
Ersetze den gesamten Inhalt durch den unten aufgeführten Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

Klicke auf Speichern.

Wenn der Abschnitt mit der Produktseite gerendert wird, ist recommendations.performed gleich false. Der generierte HTML-Code zeigt dann eine Ladeanimation an:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Wenn keine Ladeanimation angezeigt werden soll, verwende stattdessen diesen Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Wenn der oben aufgeführte Abschnitt mit deiner Produktseite gerendert wird, ist der generierte HTML-Code ein div-Element ohne Inhalt:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Wenn der Benutzer ein alternatives Gebietsschema verwendet, ist das Gebietsschema in data-base-url der div-Funktion enthalten. Beispiel: /fr/recommendations/products.

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.
Benenne den neuen Abschnitt product-recommendations und klicke auf Abschnitt erstellen.
Ersetze den gesamten Inhalt durch den unten aufgeführten Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in recommendations.products %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250 %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {% else %}
    <div class="product-recommendations__loading-dots">
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
      <div class="product-recommendations__loading-dot"></div>
    </div>
  {% endif %}
</div>

Klicke auf Speichern.

Wenn der Abschnitt mit der Produktseite gerendert wird, ist recommendations.performed gleich false. Der generierte HTML-Code zeigt dann eine Ladeanimation an:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

Wenn keine Ladeanimation angezeigt werden soll, verwende stattdessen diesen Code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

Wenn der oben aufgeführte Abschnitt mit deiner Produktseite gerendert wird, ist der generierte HTML-Code ein div-Element ohne Inhalt:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">

Wenn der Benutzer ein alternatives Gebietsschema verwendet, ist das Gebietsschema in data-base-url der div-Funktion enthalten. Beispiel: /fr/recommendations/products.

Schritt 2: Abschnitt in die Vorlage `product.liquid` einschließen

Um Produktempfehlungen am Ende deiner Produktseite anzuzeigen, füge den Abschnitt am Ende der Datei templates/product.liquid ein:

Öffne im Verzeichnis Vorlagen die Datei product.liquid.
Füge den folgenden Code am Ende der Datei hinzu:

{% section 'product-recommendations' %}

Klicke auf Speichern.

Schritt 3: Datei `theme.js` bearbeiten, um Empfehlungen asynchron zu laden

Du musst Empfehlungen in den leeren Container laden, welcher vom Abschnitt auf der Produktseite erstellt wurde. Verwende JavaScript, um eine HTTP-GET-Anfrage für <base_url>?section_id=<section_id>&product_id=<product_id> zu erstellen.

Öffne im Verzeichnis Assets die Datei theme.js.
Suche nach dieser Codezeile:

sections.register('hero-section', theme.HeroSection);

Füge diesen Code unter dieser Zeile hinzu:

sections.register('product-recommendations', theme.ProductRecommendations);

Füge den folgenden Code am Ende der Datei hinzu:

theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var $container = (this.$container = $(container));
    var baseUrl = $container.data('baseUrl');
    var productId = $container.data('productId');
    var limit = $container.data('limit');
    var intent = $container.data('intent');
    var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' + productId + '&intent='+ intent +
      ' .product-recommendations';
    $container.parent().load(productRecommendationsUrlAndContainerClass);
  }
  return ProductRecommendations;
})();

Klicke auf Speichern.

Schritt 4: Datei `theme.scss.liquid` bearbeiten, um die Ladeanimation zu erstellen (optional)

Wenn du das Snippet verwendest, das im Abschnitt der Produktempfehlungen eine Ladeanimation anzeigt, füge den folgenden Code am Ende der Datei assets/theme.scss.liquid hinzu:

Öffne im Verzeichnis Assets die Datei theme.scss.liquid.
Füge am Ende der Datei diesen Code hinzu:

.product-recommendations {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include media-query($medium-up) {
    padding-top: $section-spacing;
    padding-bottom: $section-spacing;
  }
}
.product-recommendations__loading-dots {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-recommendations__loading-dot {
  animation: dot-keyframes 1.5s infinite ease-in-out;
  background-color: $color-text;
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  &:nth-child(2) {
    animation-delay: 0.5s;
  }
  &:nth-child(3) {
    animation-delay: 1s;
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}

Klicke auf Speichern.

Produktempfehlungen auf der Produktseite anzeigen

Auf dieser Seite

Schritt 1: Abschnitt product-recommendations.liquid erstellen

Schritt 2: Abschnitt in die Vorlage product.liquid einschließen

Schritt 3: Datei theme.js bearbeiten, um Empfehlungen asynchron zu laden

Schritt 4: Datei theme.scss.liquid bearbeiten, um die Ladeanimation zu erstellen (optional)

Bereit, mit Shopify zu verkaufen?

Schritt 1: Abschnitt `product-recommendations.liquid` erstellen

Schritt 2: Abschnitt in die Vorlage `product.liquid` einschließen

Schritt 3: Datei `theme.js` bearbeiten, um Empfehlungen asynchron zu laden

Schritt 4: Datei `theme.scss.liquid` bearbeiten, um die Ladeanimation zu erstellen (optional)