ideal.shop

Empfehlungen

Automatisieren und personalisieren Sie Produkte auf jeder Seite.
Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie nach Abschluss des ideal.shop Setups starten.

Unsere vollständigen Best Practices finden Sie in diesem Artikel darüber, welche Recommendations Sie verwenden 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. Dadurch können Kunden mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design-Editor zur visuellen Konfiguration verwenden oder Code-Designs nutzen.

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

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 ihm einen Namen 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 ihm einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid Code.

Wenn Sie ein Einstiegsdesign möchten, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, um die Recommendations anzuzeigen und auf Ihrer Website einbettbar zu machen. 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 ihm einen aussagekräftigen Namen. Wir empfehlen, es nach der Seite und der Logik zu benennen, die Sie verwenden möchten. Z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie in Element type, die gewünschte Produktlogik im Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie in Design das von Ihnen erstellte Design aus dem Dropdown-Menü und legen Sie die Anzahl der anzuzeigenden Produkte fest.
  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben hier zwei Möglichkeiten:
    • Mit Injection können Sie den Code per 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. Beim Embedded Code fügen Sie alle erforderliche Logik im Frontend hinzu, z. B. für die Übergabe einer Produkt- oder Kategorie-ID. Dies hängt von der gewählten Logik ab.

Hier ein komplettes Recommendations-Einbettungsbeispiel mit einer Beispiel-Produkt-ID:

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

Injection-IDs #

Bei Verwendung von Injection benötigen einige Recommendation-Logiken eine Produkt- oder Kategorie-ID von der aktuellen Seite. Die IDs müssen mit den in Ihrem Feed importierten IDs übereinstimmen.

Produkt und Kategorie #

Das data-page-id-Attribut am body enthält scheinbar auf Produktseiten die aktuelle Produkt-ID und auf Kategorieseiten die aktuelle Kategorie-ID. Prüfen Sie beide Seitentypen in Ihrem Webshop, bevor Sie diese Einstellungen verwenden.

SeiteID CSS-SelektorID-Attribut
Produktseitebodydata-page-id
Kategorieseitebodydata-page-id

Verwenden Sie in den Insert into website > Using injection Einstellungen des Elements diese Werte für die entsprechenden Produkt- oder Kategorie-ID-Felder. Konfigurieren Sie den Platzierungsselektor separat, um festzulegen, wo die Recommendations erscheinen.

Seiten #

Im Folgenden sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Startseite #

  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 Startseiten-Template/-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 2 Elements mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Kopieren Sie die Embedcodes und fügen Sie sie in Ihr Produktseiten-Template ein.
  3. Setzen Sie data-products auf die aktuelle Produkt-ID.

Warenkorb-Seite #

  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 dem schließenden </body>-Tag in Ihre Hauptvorlagendatei ein.
  3. Fügen Sie dem Embedcode data-exit-intent="true" hinzu.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Sie mit diesen Vorlagen starten.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, die 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.