Jeder (Webshop)

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite.
Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass du völlig automatisierte Produkte auf jeder Seite anzeigen kannst. Dieser Artikel erklärt, wie du mit einer Clerk.js-Integration loslegst.

Unsere vollständigen Best Practices findest du in diesem Artikel, welche Recommendations du verwenden solltest.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Im Folgenden findest du die grundlegende Anleitung zum Einrichten eines Elements.

Wenn du die Schritte unter my.clerk.io > Einstellungen > Setup Guides befolgst, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Du kannst entweder den Design Editor für die visuelle Konfiguration verwenden oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden, die du erstellst.

Design Editor #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Product Slider
  3. Wähle aus der Liste der Designvorlagen diejenige aus, mit der du starten möchtest.
  4. Vergib einen Namen und klicke auf Create design.
  5. Nimm alle gewünschten Änderungen am Design vor.

Code Design #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Other designs > Blank > Code.
  3. Vergib einen Namen und klicke auf Create design.
  4. Erstelle ein Code Design von Grund auf mit Liquid Code.

Für ein Startdesign sieh dir die Slider-Vorlage weiter unten an.

Inhalt erstellen #

Dies beinhaltet alle Einstellungen, die für die Anzeige der Recommendations genutzt werden und diese auf deiner Website einbettbar machen. Führe diese Schritte für jedes Recommendations-Banner aus, das du erstellen möchtest.

  1. Gehe zu Recommendations > Elements.
  2. Klicke auf New Content.
  3. Vergib einen aussagekräftigen Namen. Wir empfehlen, ihn nach der Seite und der Logik zu benennen, die du verwenden möchtest. Zum Beispiel “Home Page / Visitor Recommendations”.
  4. Wähle bei Content type, die gewünschte Produktlogik aus dem Dropdown aus. Einen Überblick über alle Produktlogiken findest du hier.
  5. Wähle bei Design das von dir erstellte Design aus dem Dropdown-Menü und gib die Anzahl der Produkte an, die du anzeigen möchtest.
  6. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffne den Tab Insert into website.
  2. Hier hast du zwei Optionen:
    • Mit Injection kannst du den Code über einen CSS-Selektor einfügen.
    • Mit Embedded Code kannst du den Code manuell auf deiner Webseite einfügen.
  3. Wähle die Option, die für dich am einfachsten ist.
  4. Für Embedded Code füge jede notwendige Frontend-Logik hinzu, um z. B. eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der gewählten Logik ab.

Hier ein vollständiges Beispiel für den Recommendations-Einbettungscode mit einer Muster-Produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Seiten #

Nachfolgend findest du die speziellen Seiten, auf denen du Recommendations einfügen solltest und welche Typen du verwenden solltest, um unseren Best Practices zu entsprechen.

Startseite #

  1. Erstelle in my.clerk.io 3 Elements mit folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Füge die Embedcodes in dein Homepage-Template/-Block ein.

Kategorieseite #

  1. Erstelle in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Kopiere den Embedcode und füge ihn in dein Kategorieseiten-Template ein.
  3. Setze data-category auf die aktuelle Kategorie-ID.

Produktseite #

  1. Erstelle in my.clerk.io 2 Elements mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Kopiere die Embedcodes und füge sie in dein Produktseiten-Template ein.
  3. Setze data-products auf die aktuelle Produkt-ID.

Warenkorb-Seite #

  1. Erstelle in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Kopiere den Embedcode und füge ihn in dein Warenkorbseiten-Template ein.
  3. Setze data-products auf die Produkt-IDs im Warenkorb.

Exit Intent #

  1. Erstelle in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Kopiere den Embedcode und füge ihn direkt vor dem schließenden </body>-Tag in deiner Hauptvorlagendatei ein.
  3. Füge data-exit-intent="true" zum Embedcode hinzu.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Startvorlagen #

Wenn du Code Designs verwenden möchtest, können dich diese Vorlagen unterstützen.

Slider-Code #

Diese Vorlage stellt einen Standardslider mit verschiedenen Produktinformationen dar, den du nach deinen Bedürfnissen anpassen kannst.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">On Sale</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Out of Stock</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.