Shopware 6

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Shopware 6.

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken und ermöglicht es Ihnen, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Installation in Shopware 6 starten.

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

Slider-Setup #

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. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu 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, 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 beginnen möchten.
  4. Geben Sie einen Namen ein und klicken Sie auf Create design.
  5. Nehmen Sie die 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, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, die für die Anzeige der Recommendations benötigt werden, und macht es möglich, sie auf Ihrer Website einzubetten. Führen Sie diese Schritte für jedes Recommendations-Banner aus, 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, es auf Basis der Seite und Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Element type, die Produktlogik aus, die Sie im Dropdown verwenden möchten. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das erstellte Design im Dropdown aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf der Seite auf Save.

Auf der Website einbinden #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie zwei Optionen: Injection und Embedded code.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier gibt es zwei Möglichkeiten:
    • Mit Injection können Sie den Code über einen CSS-Selektor einfügen.
    • Mit Embedded code können Sie den Code manuell auf Ihrer Website einfügen.
  3. Wählen Sie die für Sie einfachste Option.
  4. Für einige Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Shopware 6 aus. Dadurch wird der Embedcode automatisch mit den richtigen Shopware 6 Shortcodes vorausgefüllt.

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

Plugin-Setup #

Verwenden Sie das Shopware 6 Clerk-Plugin, um die Elements auf wichtigen Seiten zu aktivieren:

  1. Gehen Sie zu Settings > System > Plugins und öffnen Sie Clerk.io > Config.
  2. Wählen Sie den richtigen Sales Channel aus.
  3. Aktivieren Sie pro Seitentyp und speichern Sie:
    • Product Page Settings
    • Category Settings
    • Cart Settings

my.clerk.io Setup #

  1. Gehen Sie zu Recommendations > Elements.
  2. Wählen Sie das gewünschte Element aus.
  3. Öffnen Sie den Tab Insert into website.
  4. Wählen Sie eine der folgenden Optionen:
    • Mit Injection wird der Code über einen CSS-Selektor eingefügt.
    • Mit Embedded code wird der Code manuell eingefügt, z. B. über Content > Shopping Experiences durch Hinzufügen eines Raw HTML-Blocks und Einfügen des Embedcodes.

Einige Embedcodes benötigen Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embedcode ausgefüllt, aber überprüfen Sie, ob sie mit Ihren Shopware 6-Variablen übereinstimmen.

Seiten #

Nachfolgend finden Sie die speziellen Seiten, auf denen Sie Recommendations einfügen und welche Typen Sie gemäß unseren Best Practices verwenden sollten.

Homepage #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den 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 ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shopware 6 aus und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihr Kategorieseiten-Template ein oder aktivieren Sie es über die Plugin-Einstellungen.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie für beide im Dropdown Insert into website > Choose your platform Shopware 6 aus und kopieren Sie die Embedcodes.
  3. Fügen Sie die Embedcodes in Ihr Produktseiten-Template ein oder aktivieren Sie sie über die Plugin-Einstellungen.

Add-To-Basket-Schritt #

  1. Erstellen Sie in my.clerk.io ein Element 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 korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Um den Add-To-Basket-Powerstep mit dem Shopware 6 Plugin zu aktivieren:
  5. Gehen Sie zu Settings > System > Plugins und öffnen Sie Clerk.io > Config.
  6. Aktivieren Sie unter Powerstep Settings und wählen Sie Seite oder Popup, wählen Sie den Inhalt, dann Save.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shopware 6 aus und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihr Warenkorbseiten-Template ein oder aktivieren Sie ihn über die Plugin-Einstellungen.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Aktivieren Sie es über das Plugin:
  3. Gehen Sie zu Settings > System > Plugins und öffnen Sie Clerk.io > Config.
  4. Setzen Sie unter Exit Intent Settings Status auf Enabled und geben Sie den Inhaltsnamen an. Speichern.

Startvorlagen #

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

Slider-Code #

Mit dieser Vorlage wird ein Standardslider mit verschiedenen Produktinformationen gerendert, 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;

    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.