Jeder (Webshop)

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite.
Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie starten, wenn Sie ein Clerk.js Setup verwenden.

Unsere vollständigen Best Practices finden Sie in diesem Artikel darüber, welche Recommendations verwendet werden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Im Folgenden finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

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

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden.

Design Editor #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Product Slider
  3. Wählen Sie aus der Liste der Designvorlagen diejenige aus, mit der Sie starten möchten.
  4. Geben Sie einen Namen ein und klicken Sie auf Create design.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Blank > Code.
  3. Geben Sie einen Namen ein und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid Code.

Wenn Sie ein Startdesign möchten, finden Sie die Slider-Vorlage weiter unten.

Element erstellen #

Dieses enthält alle Einstellungen, um die Recommendations anzuzeigen und auf Ihrer Website einbetten zu können. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements.
  2. Klicken Sie auf New Element.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, den Namen nach Seite und Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie bei Element type, die gewünschte Produktlogik aus dem Dropdown. Einen Überblick über alle Produktlogiken finden Sie hier.
  5. Wählen Sie bei Design das von Ihnen erstellte Design aus dem Dropdown aus und entscheiden Sie, wie viele Produkte angezeigt werden sollen.
  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code über einen CSS-Selektor einfügen.
    • Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die für Sie einfachste Option.
  4. Für Embedded Code fügen Sie alle notwendigen Frontend-Logiken hinzu, etwa zur Einbindung einer Produkt- oder Kategorie-ID. Dies ist abhängig von der gewählten Logik.

Hier ist ein vollständiges Recommendations-Einbettungscode-Beispiel mit einer Beispiel-Produkt-ID:

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

Seiten #

Nachfolgend finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die jeweiligen Typen zur Einhaltung unserer Best Practices.

Homepage #

  1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Homepage-Template bzw. den entsprechenden Block ein.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Kopieren Sie den Embedcode und fügen Sie ihn in Ihr Kategorieseiten-Template ein.
  3. Setzen Sie data-category auf die aktuelle Kategorie-ID.

Produktseite #

  1. Erstellen Sie in my.clerk.io zwei Elements mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Kopieren Sie die Embedcodes und platzieren Sie sie im Produktseiten-Template.
  3. Setzen Sie data-products auf die aktuelle Produkt-ID.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Kopieren Sie den Embedcode und fügen Sie ihn in Ihr Warenkorbseiten-Template ein.
  3. Setzen Sie data-products auf die Produkt-IDs im Warenkorb.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Kopieren Sie den Embedcode und fügen Sie ihn direkt vor das schließende </body>-Tag in Ihrer Haupt-Template-Datei ein.
  3. Fügen Sie data-exit-intent="true" zum Embedcode hinzu.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern.

Slider-Code #

Diese Vorlage zeigt einen Standardslider mit vielfältigen Produktinformationen, den Sie nach Ihren Bedürfnissen anpassen können.

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.