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 nutzen, um das Design visuell zu konfigurieren, oder Code Designs verwenden.

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, schaue dir weiter unten die Slider template an.

Inhalt erstellen #

Dies enthält alle Einstellungen, um den Recommendations-Slider anzuzeigen und einbettbar zu machen.

  1. Gehe zu Recommendations > Element.
  2. Klicke auf New Element.
  3. Gib ihm einen aussagekräftigen Namen, z.B. „Home / Visitor“.
  4. Wähle bei Element type die gewünschte Produktlogik aus.
  5. Wähle bei Design das von dir erstellte Design und die gewünschte Anzahl an Produkten.
  6. Klicke auf Save.

Zur Website hinzufügen #

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

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

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. Nutze 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 Tab 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 auf deiner 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, umschließe die Marken-Logik mit {% if collection.category_id %} ... {% else %} ... {% endif %}, um zu unterscheiden.
    • Warenkorbseite: fixed.rain mit einem IF um den Embed-Code: {% 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 die Powerstep-Snippet-Datei im Snippets-Bereich deiner Theme-Dateien, popup-buy.rain in diesem Beispiel. Füge hier den Embed-Code aus deinem Element 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 Embed-Codes erfordern Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embed-Code ausgefüllt, prüfe aber unbedingt, ob es sich um die korrekten Variablen für deinen Lightspeed-Account handelt.

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 Embed-Code: {% if 'cart' in template %} … {% endif %}). Setze data-products auf die IDs der Warenkorbprodukte.

Exit Intent #

  1. Erstelle in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Exit Intent wird in deine Haupt-Theme-Datei eingefügt, wahrscheinlich custom.rain.
  3. Platziere den in my.clerk.io generierten Embed-Code direkt vor dem schließenden -Tag. Falls du Live Search implementiert 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, kannst du mit diesen Vorlagen starten.

Slider Code #

Diese Vorlage rendert einen Standard-Slider mit allgemeiner Produktinformation, den du an deine Bedürfnisse 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.