Lightspeed

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Lightspeed.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Du kannst entweder den Design Editor verwenden, um ihn visuell zu konfigurieren, oder Code Designs nutzen.

Design Editor #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Product Slider
  3. Wähle eine Vorlage aus, gib ihr einen Namen und klicke auf Create design.
  4. Passe das Design nach Bedarf an.

Code Design #

  1. Gehe zu Recommendations > Designs und klicke auf New Design.
  2. Wähle Other designs > Blank > With code.
  3. Gib einen Namen ein und klicke auf Create design.
  4. Erstelle ein Code Design von Grund auf mit Liquid code.

Wenn du ein Startdesign möchtest, sieh dir weiter unten die Slider-Vorlage an.

Element erstellen #

Dies umfasst alle Einstellungen, die verwendet werden, um den Recommendations-Slider anzuzeigen und einbettbar zu machen.

  1. Gehe zu Recommendations > Element.
  2. Klicke auf New Element.
  3. Benenne es aussagekräftig, z. B. “Home / Visitor”.
  4. Wähle bei Element type die zu verwendende Produktlogik aus.
  5. Wähle bei Design das von dir erstellte Design aus und lege die gewünschte Produktanzahl fest.
  6. Klicke auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations zu deiner Website hinzuzufügen, hast du zwei Optionen: Injection und Embedded code.

Um auf deine Theme-Dateien in Lightspeed zuzugreifen, klicke im linken Menü auf “Design”, dann im Dropdown “Geavanceerd” auf “Code bewerken”.

Um Sync-Details hinzuzufügen oder einen Sync zu starten, gehe zu my.clerk.io > Data > Configuration.

Plugin Setup #

Nicht verfügbar für Lightspeed. Verwende stattdessen das untenstehende my.clerk.io Setup.

my.clerk.io Setup #

  1. Gehe zu Recommendations > Element.

  2. Wähle das Element aus, das du einfügen möchtest.

  3. Öffne den Reiter Insert into website.

  4. Wähle eine der folgenden Optionen:

    • Mit Injection kannst du den Code über einen CSS-Selektor einfügen.
    • Mit Embedded code kannst du den Code manuell in deine Website einfügen.

  5. Für Embedded Code auf Lightspeed sind typische Platzierungen:

    • Startseite: snippets/homepage.rain.
    • Produktseite: product.rain und setze data-products auf [{{product.id}}].
    • Kategorieseite: collection.rain und setze data-category auf {{ collection.category_id }}.
    • Markenseite: In collection.rain die Markenlogik in ein {% if collection.category_id %} ... {% else %} ... {% endif %} einbetten, um zu unterscheiden.
    • Warenkorbseite: fixed.rain mit einem IF um den Embedcode: {% if 'cart' in template %} … {% endif %} und setze data-products auf:
    data-products="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"

Powerstep #

  • Erstelle zuerst das gewünschte Recommendations Design und Element in my.clerk.io, das du zum Powerstep hinzufügen möchtest.

  • Finde in den Theme-Dateien im Bereich Snippets die Powerstep-Snippet-Datei, in diesem Beispiel popup-buy.rain. Füge hier den aus deinem Element generierten Embedcode ein:

<div style="display: none;" id="clerk_powerstep">
  <div class="clerk_powerstep_wrap">
    <span class="clerk-powerstep-recommendations"
      data-template="@power-step-others-also-bought"
      data-products="[{{product.id}}]">
    </span>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    var buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.productCartButton';
    document.querySelector(buyBtn).addEventListener('click', function(){
      Clerk('content', '.clerk-powerstep-recommendations');
      document.getElementById('clerk_powerstep').style.display = 'block';
    });
  });
</script>

Einige Embedcodes benötigen Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embedcode ausgefüllt, aber stelle sicher, dass dies die korrekten Variablen sind, die du in deinem Lightspeed-Portal referenzieren musst.

Warenkorbseite #

  1. Erstelle in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wähle im Dropdown Insert into website > Choose your platform Lightspeed und kopiere den Embedcode.
  3. Füge den Embedcode in deine Warenkorbseiten-Vorlage ein (z. B. fixed.rain mit einem IF um den Embedcode: {% if 'cart' in template %} … {% endif %}). Setze data-products auf die Produkt-IDs des Warenkorbs.

Exit Intent #

  1. Erstelle in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Exit Intent wird in deine Haupttheme-Datei eingefügt, vermutlich custom.rain.
  3. Platziere den in my.clerk.io generierten Element-Embedcode direkt vor dem schließenden -Tag. Wenn du Live Search eingebunden hast, sollte der Exit Intent-Code direkt danach eingefügt werden.
  4. Füge data-exit-intent="true" zum Embedcode hinzu.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Startvorlagen #

Wenn du Code Designs verwenden möchtest, helfen dir diese Vorlagen beim Einstieg.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit gängigen Produktinformationen, den du nach deinen Bedürfnissen anpassen kannst.

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;
}

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

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