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 Produktlogiken, sodass Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können.

Dieser Artikel erklärt, wie Sie loslegen, wenn Sie ein Clerk.js Setup in Mystore verwenden.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte unter 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 Ihre Kunden mehr Produkte mit weniger Klicks ansehen.

Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, 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 die Vorlage, mit der Sie beginnen 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 Anfangsdesign möchten, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht es einbettbar auf Ihrer Website.

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 beschreibenden Namen. Wir empfehlen, es nach der Seite und Logik zu benennen, die Sie verwenden möchten. Zum Beispiel: “Home Page / Visitor Recommendations”.

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

  5. Wählen Sie unter Design das von Ihnen erstellte Design im Dropdown-Menü aus und wählen Sie die Anzahl der anzuzeigenden Produkte.

  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Webseite hinzufügen #

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

  1. Öffnen Sie den Tab Insert into website.

  2. Hier haben Sie zwei Optionen:

    • Die Verwendung von Injection ermöglicht Ihnen, den Code mit einem CSS-Selektor einzufügen.

    • Die Verwendung von Embedded Code ermöglicht es Ihnen, den Code manuell auf Ihrer Website einzufügen.

  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.

  4. Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Mystore aus. Dadurch werden die Shortcodes für Mystore im Embedcode vorausgefüllt.

Um Sync-Details hinzuzufügen oder einen Sync zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io Einrichtung #

  1. Gehen Sie zu Recommendations > Elements.

  2. Wählen Sie das Element aus, das Sie einfügen möchten.

  3. Öffnen Sie den Tab Insert into website.

  4. Wählen Sie eines der folgenden:

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

    • Homepage: Fügen Sie den Embedcode in Ihr Homepage-Template/Block ein.

    • Produktseite: Setzen Sie data-products auf die aktuelle Produkt-ID.

    • Kategorieseite: Setzen Sie data-category auf die aktuelle Kategorie-ID.

    • Warenkorbseite: Setzen Sie data-products auf die Produkt-IDs im Warenkorb.

Seiten #

Nachfolgend finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, und welche Typen Sie verwenden sollten, um unsere Best Practices zu befolgen.

Homepage #

  1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logics:

    • 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 ein Element mit der Logic Bestsellers In Category.

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

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

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logics:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform für jedes von ihnen Mystore aus 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 ein Element mit der Logic Best Cross-Sell Products.

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

  3. Klicken Sie oben auf der Seite auf Save.

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

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

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

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Best Cross-Sell Products.

  2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform Mystore aus 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 ein Element mit der Logic Visitor Recommendations.

  2. Fügen Sie Folgendes nahe dem Ende Ihres Layouts/Templates, vor </body>, ein:

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

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit allgemeinen 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.