Shopware 6

Recommendations

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

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

Unsere vollständigen Best Practices finden Sie in diesem Artikel, der erklärt, 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. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor verwenden, um dies visuell zu konfigurieren, oder Code Designs nutzen.

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

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

Wenn Sie ein Startdesign benötigen, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies beinhaltet alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht es möglich, diese in Ihre Website einzubetten. 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 einen beschreibenden Namen an. Wir empfehlen, ihn anhand 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 aus dem Dropdown-Menü. Einen Überblick über alle Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das erstellte Design aus dem Dropdown-Menü und geben Sie die Anzahl der anzuzeigenden Produkte an.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

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 haben Sie 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 in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten ist.
  4. Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Shopware 6 aus. Dadurch wird der Embedcode automatisch mit den richtigen Shopware 6-Shortcodes ausgefüllt.

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

Plugin-Einrichtung #

Verwenden Sie das Shopware 6 Clerk-Plugin, um Elemente 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-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 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 indem Sie einen Raw-HTML-Block zum Layout hinzufügen und den Embedcode einfügen.

Einige Embedcodes erfordern 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 spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, und welche Typen Sie verwenden sollten, um unsere Best Practices zu befolgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Startseiten-Template/-Block ein.

Kategorie-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown-Menü 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 verwenden Sie die Plugin-Einstellungen, um ihn zu aktivieren.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit den 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 Shopware 6 aus und kopieren Sie die Embedcodes.
  3. Fügen Sie die Embedcodes in Ihr Produktseiten-Template ein oder verwenden Sie die Plugin-Einstellungen, um sie zu aktivieren.

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 richtig funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Um die Add-To-Basket-Powerstep-Funktion über das Shopware 6 Plugin zu aktivieren:
  5. Gehen Sie zu Settings > System > Plugins und öffnen Sie Clerk.io > Config.
  6. Aktivieren Sie unter Powerstep Settings “Enable” und wählen Sie Seite oder Popup, wählen Sie den Inhalt aus und klicken Sie auf Save.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown-Menü 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 verwenden Sie die Plugin-Einstellungen, um ihn zu aktivieren.

Exit Intent #

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

Startvorlagen #

Wenn Sie Code Designs nutzen möchten, können Ihnen diese Vorlagen den Einstieg erleichtern.

Slider Code #

Diese Vorlage rendert einen Standardslider mit diversen Produktinformationen, den Sie nach Ihren Wünschen 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.