Mystore

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Mystore

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Mystore. Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie komplett automatisierte Produkte auf jeder Seite anzeigen können.

Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Integration in Mystore starten.

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

Slider-Einrichtung #

Recommendations werden mit Sliders erstellt, die sich auf ein Design beziehen. Nachfolgend finden Sie die grundlegende Anleitung zum Einrichten eines Sliders.

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

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mehr Produkte mit weniger Klicks sehen.

Sie können entweder den Design Editor nutzen, um ihn visuell zu konfigurieren, oder Code-Designs verwenden.

Ein Design kann für beliebig viele Recommendations Sliders 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 Design-Vorlagen diejenige, 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 wünschen, finden Sie die Slider-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht sie auf Ihrer Website einbettbar.

Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Sliders.

  2. Klicken Sie auf New Content.

  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, es nach der Seite und Logik zu benennen, die Sie verwenden möchten. Zum Beispiel „Startseite / Visitor Recommendations“.

  4. Wählen Sie unter Content type, die gewünschte Produktlogik aus dem Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.

  5. Wählen Sie unter Design das erstellte Design aus und bestimmen Sie die Anzahl der anzuzeigenden Produkte.

  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations zu Ihrer Website hinzuzufügen, haben Sie zwei Optionen: Injection und Embedded code.

  1. Öffnen Sie die Registerkarte Insert into website.

  2. Sie haben hier zwei Möglichkeiten:

    • Injection ermöglicht das Einfügen des Codes mit einem CSS-Selektor.

    • Embedded code ermöglicht das manuelle Einfügen des Codes in Ihre Website.

  3. Wählen Sie die für Sie einfachste Option aus.

  4. Bei manchen Logiken erscheint das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Mystore aus. Dadurch wird der Embedcode mit den passenden Mystore-Shortcodes vorausgefüllt.

Um Synchronisationsdetails hinzuzufügen oder eine Synchronisation zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io Setup #

  1. Gehen Sie zu Recommendations > Sliders.

  2. Wählen Sie den Slider, den Sie einfügen möchten.

  3. Öffnen Sie die Registerkarte Insert into website.

  4. Wählen Sie eine der folgenden Möglichkeiten:

  5. Für Embedded Code auf Mystore sind typische Platzierungen:

    • Startseite: Embedcode im Template/Block der Startseite einfügen.
    • Produktseite: data-products auf die aktuelle Produkt-ID setzen.
    • Kategorieseite: data-category auf die aktuelle Kategorie-ID setzen.
    • Warenkorbseite: data-products auf die Produkt-IDs im Warenkorb setzen.

Seiten #

Nachfolgend sehen Sie, auf welchen spezifischen Seiten Sie Recommendations platzieren und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Sliders mit folgenden Logiken:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Fügen Sie die Embedcodes in Ihr Homepage-Template/-Block ein.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logik Bestsellers In Category.

  2. Wählen Sie im Dropdown Insert into website > Choose your platform Mystore und kopieren Sie den Embedcode.

  3. Fügen Sie den Embedcode in Ihr Kategorie-Template ein. Setzen Sie data-category auf die aktuelle Kategorie-ID.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Sliders mit folgenden Logiken:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide jeweils Mystore und kopieren Sie die Embedcodes.

  3. Fügen Sie die Embedcodes in Ihr Produktseiten-Template ein. Setzen Sie data-products auf die aktuelle Produkt-ID.

Add-to-basket Schritt #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logik Best Cross-Sell Products.

  2. Geben Sie ihm den Namen „Add-To-Basket / Others Also Bought“. Dies ist wichtig, damit der Embedcode richtig funktioniert.

  3. Klicken Sie oben auf der Seite auf Save.

  4. Um die Add-to-basket-Powerstep zu aktivieren:

    1. Erstellen Sie die Sliders, die Sie auf Powerstep anzeigen möchten.

    2. Fügen Sie den Powerstep-Embedcode in Ihr Popup/Seite ein und lösen Sie ihn aus, wenn ein Produkt zum Warenkorb hinzugefügt wird.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logik Best Cross-Sell Products.

  2. Wählen Sie im Dropdown Insert into website > Choose your platform Mystore und kopieren Sie den Embedcode.

  3. Fügen Sie den Embedcode in Ihr Warenkorbseiten-Template ein. Setzen Sie data-products auf die Produkt-IDs im Warenkorb.

Exit Intent #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logik Visitor Recommendations.

  2. Fügen Sie Folgendes am Ende Ihres Layouts/Templates ein, möglichst vor </body>:

<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 rendert einen Standard-Slider mit üblichen Produktinformationen, den 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">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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}


.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;
}

@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.