Shopware 6

Recommendations

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

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie völlig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Installation in Shopware 6 beginnen.

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

Slider-Einrichtung #

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

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

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Damit 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-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 jene 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, sehen Sie sich weiter unten die Slider-Vorlage an.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Recommendations darzustellen, 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 > Elements.
  2. Klicken Sie auf New Content.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn nach der Seite und Logik zu benennen, die Sie verwenden wollen, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie bei Content type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Produktlogiken finden Sie hier.
  5. Wählen Sie bei Design das eben erstellte Design aus dem Dropdown-Menü und wählen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben 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 den Tab Insert into website.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit Embedded Code können Sie den Code manuell auf Ihrer Website einfügen.
  3. Wählen Sie die für Sie bequemste Option.
  4. Für einige Logics sehen Sie das Choose your platform Dropdown-Menü. Wählen Sie in diesem Fall Shopware 6 aus. Dadurch wird der Embedcode mit den korrekten 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 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 Setup #

  1. Gehen Sie zu Recommendations > Elements.
  2. Wählen Sie den Inhalt aus, den 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 Einbettungscodes erfordern Variablen wie Produkt- oder Kategorie-IDs. In diesem Fall werden sie im Embedcode ausgefüllt, aber überprüfen Sie, ob sie mit Ihren Shopware 6-Variablen übereinstimmen.

Seiten #

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

Homepage #

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

Kategorie-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Bestsellers In Category.
  2. Wählen Sie im Insert into website > Choose your platform Dropdown Shopware 6 aus und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in Ihr Kategorietemplate ein oder verwenden Sie die Plugin-Einstellungen, um es zu aktivieren.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elemente mit den folgenden Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Insert into website > Choose your platform Dropdown für jedes Element 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 Logic Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Dies ist für die korrekte Funktion des Embedcodes wichtig.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Um den Add-To-Basket-Powerstep mithilfe des Shopware 6-Plugins 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 Page oder Popup, wählen Sie den Inhalt aus und dann Save.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Best Cross-Sell Products.
  2. Wählen Sie im Insert into website > Choose your platform Dropdown Shopware 6 aus und kopieren Sie den Embedcode.
  3. Fügen Sie den Embedcode in das Warenkorb-Template ein oder verwenden Sie die Plugin-Einstellungen, um es zu aktivieren.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic 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 den Status auf Enabled und geben Sie den Inhaltsnamen an. Speichern.

Startvorlagen #

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

Slider Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen 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;

    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.