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 auf jeder Seite vollständig automatisierte Produkte anzeigen können. Dieser Artikel erklärt, wie Sie bei der Verwendung eines Clerk.js-Setups in Shopware 6 starten.

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

Slider-Einrichtung #

Recommendations werden mit Elementen 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. Dies ermöglicht es Kunden, mit weniger Klicks mehr Produkte zu sehen. Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

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 jene aus, mit der Sie starten möchten.
  4. Geben Sie ihm einen Namen 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 ihm einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Einstiegsdesign möchten, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht es 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 Element.
  3. Geben Sie ihm einen beschreibenden Namen. Wir empfehlen, es nach Seite und Logik zu benennen, die Sie verwenden möchten. Z.B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie im Element type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Produktlogiken finden Sie hier.
  5. Wählen Sie im Design das Design aus, das Sie erstellt haben, und wählen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website 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 Möglichkeiten:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit Embedded code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die für Sie einfachste Option.
  4. Für einige Logiken sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Shopware 6 aus. Dies füllt den Embedcode mit den richtigen Shopware 6-Shortcodes vor.

Um Synchronisierungsdetails hinzuzufügen oder eine Synchronisierung 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. Pro Seitentyp aktivieren und speichern:
    • 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 mithilfe eines CSS-Selectors eingefügt.
    • Mit Embedded code wird der Code manuell eingefügt, z. B. über Content > Shopping Experiences durch Hinzufügen eines Raw HTML-Blocks zum Layout und Einfügen des Embedcodes.

Einige Embedcodes erfordern Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embedcode ausgefüllt, überprüfen Sie jedoch, 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 unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elemente mit den folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Fügen Sie die Embedcodes in Ihr Startseiten-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-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 nutzen Sie die Plugin-Einstellungen, um ihn zu aktivieren.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elemente mit den folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform jeweils Shopware 6 aus und kopieren Sie die Embedcodes.
  3. Fügen Sie die Embedcodes in Ihr Produktseiten-Template ein oder nutzen 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”. Das ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Um die 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-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 nutzen 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 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 setzen Sie den Inhaltsnamen. Speichern Sie.

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, helfen Ihnen diese Vorlagen beim Einstieg.

Slider-Code #

Diese Vorlage rendert einen Standardslider mit verschiedenen Produktinformationen, den 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.