Any (webshop)

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite.
Empfehlungen

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, die es Ihnen ermöglichen, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einem Clerk.js-Setup beginnen können.

Für unsere vollständigen Best Practices, welche Empfehlungen zu verwenden sind, lesen Sie diesen Artikel.

Design erstellen #

Empfehlungen werden standardmäßig als Slider angezeigt. Dies ermöglicht es den Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Ein Design kann für beliebig viele Empfehlungen-Inhalte, die Sie erstellen, wiederverwendet werden.

Design-Editor #

  1. Gehen Sie zu Empfehlungen > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Produkt-Slider
  3. Wählen Sie aus der Liste der Designvorlagen die aus, mit der Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Empfehlungen > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Slider-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um den Empfehlungen-Slider anzuzeigen und ihn in Ihre Website einbettbar zu machen. Befolgen Sie diese Schritte für jedes Empfehlungen-Banner, das Sie erstellen möchten.

  1. Gehen Sie zu Empfehlungen > Inhalt.
  2. Klicken Sie auf Neuer Inhalt.
  3. Geben Sie ihm einen beschreibenden Namen. Wir empfehlen, ihn basierend auf der Seite und der Logik, die Sie verwenden möchten, zu benennen. Z.B. “Startseite / Besucherempfehlungen”.
  4. Wählen Sie in Inhaltstyp, die Produktlogik aus, die Sie aus dem Dropdown-Menü verwenden möchten. Sie können eine Übersicht über alle Produktlogiken hier sehen.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben, und wählen Sie die Anzahl der Produkte aus, die Sie anzeigen möchten.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

  1. Öffnen Sie den In die Website einfügen Tab.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Für eingebetteten Code fügen Sie alle benötigten Frontend-Logiken hinzu, um z.B. eine Produkt- oder Kategorie-ID einzufügen. Dies hängt von der Logik ab, die Sie wählen.

Hier ist ein vollständiges Beispiel für einen Empfehlungen-Einbettungscode mit einer Beispiel-Produkt-ID:

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

Startvorlage #

Wenn Sie Code-Designs verwenden möchten, kann Ihnen diese Vorlage den Einstieg erleichtern. Sie wird einen Standard-Slider mit verschiedenen Produktinformationen rendern, die Sie an Ihre Bedürfnisse 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">Im Angebot</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">Nicht auf Lager</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">In den Warenkorb</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.