Shopware 6

Recommendations

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

Clerk.io bietet mehr als 23 verschiedene Arten von Produkt-Logiken, mit denen Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie beim Einsatz eines Clerk.js-Setups in Shopware 6 starten.

Für unsere vollständigen Best Practices lesen Sie diesen 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 zur Einrichtung eines Sliders.

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

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mit weniger Klicks mehr Produkte ansehen. Sie können entweder den Design Editor verwenden, um ihn visuell zu konfigurieren, oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Slider, 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 aus, 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 Startdesign möchten, finden Sie die Slider-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet und auf Ihrer Website eingebettet werden können. Folgen Sie diese Schritte 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, ihn nach Seite und Logik zu benennen, die Sie nutzen möchten, z.B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Content type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Produkt-Logiken finden Sie hier.
  5. Wählen Sie unter Design das von Ihnen erstellte Design aus dem Dropdown aus und geben Sie die Anzahl der anzuzeigenden Produkte an.
  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, stehen Ihnen zwei Optionen zur Verfügung: Injection und Embedded code.

  1. Öffnen Sie den Tab Insert into website.
  2. Hier stehen Ihnen zwei Möglichkeiten zur Verfügung:
    • Mit Injection können Sie den Code per CSS-Selektor einfügen.
    • Mit embedded code können Sie den Code manuell in Ihre Website eintragen.
  3. Wählen Sie die Option, die für Sie am einfachsten ist.
  4. Bei einigen Logics erscheint 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 Sync-Details hinzuzufügen oder einen Sync zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

Plugin-Einrichtung #

Verwenden Sie das Shopware 6 Clerk Plugin, um Sliders 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 > Sliders.
  2. Wählen Sie den gewünschten Inhalt aus.
  3. Öffnen Sie den Tab Insert into website.
  4. Wählen Sie eine der folgenden Möglichkeiten:
    • Mit Injection wird der Code mit einem 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 Embecodes benötigen Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embedcode eingefügt, aber überprüfen Sie, ob sie mit Ihren Shopware 6-Variablen übereinstimmen.

Seiten #

Nachfolgend sehen Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Sliders mit 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 einen Slider mit der Logic 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 Kategorie-Seiten-Template ein oder aktivieren Sie ihn über die Plugin-Einstellungen.

Produktseite #

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

Add-To-Basket-Schritt #

  1. Erstellen Sie in my.clerk.io einen Slider 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 richtig 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. Unter Powerstep Settings aktivieren Sie die Option, wählen Sie Seite oder Popup, wählen Sie den Inhalt und klicken Sie dann auf Save.

Warenkorb-Seite #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logic 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 Warenkorb-Seiten-Template ein oder aktivieren Sie ihn über die Plugin-Einstellungen.

Exit Intent #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logic Visitor Recommendations.
  2. Aktivieren Sie ihn über das Plugin:
  3. Gehen Sie zu Settings > System > Plugins und öffnen Sie Clerk.io > Config.
  4. Unter Exit Intent Settings auf Status Enabled setzen und den Namen des Inhalts eingeben. Speichern.

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