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 das Design 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 Einstiegsdesign haben möchtest, findest du die Slider-Vorlage weiter unten.

Element erstellen #

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

  1. Gehe zu Recommendations > Element.
  2. Klicke auf New Element.
  3. Vergib einen beschreibenden Namen, z.B. “Home / Visitor”.
  4. Wähle unter Element type die gewünschte Produktlogik aus.
  5. Wähle unter Design das erstellte Design und die Produktanzahl aus.
  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 linken Menü auf “Design” und dann auf “Code bewerken” im Geavanceerd-Dropdown.

Um Synchronisierungsdetails hinzuzufügen oder eine Synchronisierung zu starten, gehe zu my.clerk.io > Data > Configuration.

Plugin Setup #

Nicht verfügbar für Lightspeed. Verwende das nachfolgende Setup über my.clerk.io.

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 mithilfe eines CSS-Selectors einfügen.
    • Mit embedded code kannst du den Code manuell in deine Website integrieren.

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

    • 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, platziere die Marken-Logik in einem {% if collection.category_id %} ... {% else %} ... {% endif %}, um zu unterscheiden.
    • Warenkorbseite: fixed.rain mit einem IF rund 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 dein Recommendations Design und Element in my.clerk.io, das du zum Powerstep hinzufügen möchtest.

  • Finde die Powerstep-Snippet-Datei im Snippet-Bereich deiner Theme-Dateien, in diesem Beispiel popup-buy.rain. Füge hier den aus deinem Element generierten Embed-Code 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 benötigen Variablen wie Produkt- oder Kategorie-IDs. In diesen Fällen werden sie im Embed-Code ausgefüllt, überprüfe aber bitte, dass es die richtigen Variablen für dein Lightspeed-Portal sind.

Warenkorb-Seite #

  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 die Option Lightspeed aus und kopiere den Embedcode.
  3. Füge den Embedcode in deine Warenkorb-Template-Datei ein (z.B. fixed.rain mit IF um den Embed-Code: {% if 'cart' in template %} … {% endif %}). Setze data-products auf die Produkt-IDs im Warenkorb.

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, vermutlich custom.rain.
  3. Platziere den in my.clerk.io generierten Embed-Code kurz vor dem schließenden -Tag. Wenn du Live Search implementiert hast, sollte der Exit Intent Code direkt danach platziert werden.
  4. Füge data-exit-intent="true" zum Embedcode hinzu.
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Einstiegs-Templates #

Wenn du Code-Designs verwenden möchtest, kannst du mit diesen Vorlagen starten.

Slider Code #

Diese Vorlage rendert einen Standardslider mit gängigen Produktinformationen, die 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.