Bigcommerce

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in BigCommerce.

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie beim Einsatz eines Clerk.js-Setups in BigCommerce starten.

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

Falls Sie Ihre Datensynchronisierung noch nicht eingerichtet haben, können Sie Synchronisierungsdetails hinzufügen oder eine Synchronisierung in my.clerk.io > Data > Configuration starten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Im Folgenden finden Sie die grundlegende Anleitung zum Einrichten eines Elements.

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

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design Editor zur visuellen Konfiguration verwenden oder Code Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elements, die Sie erstellen, wiederverwendet werden.

Design Editor #

Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
Wählen Sie Product Slider
Wählen Sie aus der Liste der Design-Vorlagen diejenige aus, mit der Sie beginnen möchten.
Geben Sie einen Namen ein und klicken Sie auf Create design.
Nehmen Sie die gewünschten Änderungen am Design vor.

Code Design #

Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
Wählen Sie Other designs > Blank > Code.
Geben Sie einen Namen ein und klicken Sie auf Create design.
Erstellen Sie ein Code-Design von Grund auf mit Liquid code.

Wenn Sie ein Starter-Design wünschen, schauen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht sie auf Ihrer Website einbettbar. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

Gehen Sie zu Recommendations > Elements.
Klicken Sie auf New Element.
Vergeben Sie einen aussagekräftigen Namen. Wir empfehlen, es nach Seite und Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.
Wählen Sie bei Element type, die gewünschte Produktlogik aus der Dropdown-Liste aus. Einen Überblick über alle Produktlogiken finden Sie hier.
Wählen Sie bei Design das erstellte Design aus der Dropdown-Liste und legen Sie die Anzahl der angezeigten Produkte fest.
Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Sie können Recommendations mit Injection oder Embedded Code in Ihr Theme einfügen. In BigCommerce fügen Sie den Embedded Code typischerweise in die entsprechenden Theme-Template-Dateien ein.

Öffnen Sie den Tab Insert into website.
Es gibt zwei Optionen:
- Mit Injection können Sie den Code über einen CSS-Selektor einfügen.
- Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
Wählen Sie die für Sie einfachste Option.
Für manche Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen BigCommerce. Dadurch wird der Embedcode mit den richtigen BigCommerce-Shortcodes vorausgefüllt.

Seiten #

Nachfolgend sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Startseite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > layout > pages > home.html.
Fügen Sie den Embedcode dort ein, wo Sie die Anzeige wünschen (empfohlen innerhalb von <div class="main full">).

<span class="clerk" data-template="@YOUR_SLIDER_ID"></span>

Klicken Sie auf Save & apply file.

Produktseite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie die Datei, die Ihre Produktseiten generiert, oft unter templates > components (z. B. product-view.html oder pages > product-page-with-sidenav.html).
Fügen Sie den Embedcode dort ein, wo Sie die Anzeige wünschen (empfohlen unten nach der Produktbeschreibung). Im Beispiel unten wird die Produkt-ID von der Seite verwendet.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ { product.id } }}]">
</span>

Klicken Sie auf Save & apply file.

Kategorieseite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > pages > category.html.
Fügen Sie den Embedcode dort ein, wo Sie die Anzeige wünschen (empfohlen direkt unter der Kategoriebeschreibung). Im Beispiel unten wird die Kategorie-ID von der Seite verwendet.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-category="{{ { category.id } }}">
</span>

Klicken Sie auf Save & apply file.

Warenkorbseite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > pages > cart.html.
Fügen Sie den Embedcode dort ein, wo Sie die Anzeige wünschen (empfohlen unten, kurz vor dem schließenden </div>). Im Beispiel unten werden alle Produkt-IDs im Warenkorb verwendet.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Klicken Sie auf Save & apply file.

Blog-Seite #

Wenn Sie kontextbezogene Recommendations auf CMS-Inhaltsseiten anzeigen möchten:

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-page="INSERT_PAGE_ID">
</span>

Ersetzen Sie INSERT_PAGE_ID durch die ID der Seite.

Add-to-Basket Schritt #

Sie können Recommendations direkt anzeigen, nachdem ein Produkt in den Warenkorb gelegt wurde. Wählen Sie eine der untenstehenden Optionen.

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > components > cart > preview.html.
Fügen Sie den folgenden Code dort ein, wo Sie den Powerstep anzeigen möchten (empfohlen unten nach der Produktbeschreibung), und geben Sie Ihre gewählte Element-ID in data-template an.

<span id="clerk-powerstep"
  class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>
<script>
  Clerk('content','#clerk-powerstep');
</script>

Klicken Sie auf Save & apply file.

Full Powerstep #

Fügen Sie den Popup-Container, Styles und eine Reihe von Powerstep-Recommendations-Spans zu Ihrer Produktseitenvorlage hinzu. Die Spans werden geladen, wenn auf die “In den Warenkorb”-Schaltfläche geklickt wird.

<!-- Container (standardmäßig ausgeblendet) -->
<div style="display: none;" id="clerk_powerstep">
  <span class="clerk-popup-close" onclick="close_powerstep()">&#x2715</span>
  <div class="clerk_powerstep_wrap">
    <div class="clerk_powerstep_header">
      <h2>Sie haben <b><u>{{ product.title }}</u></b> zu Ihrem Warenkorb hinzugefügt.</h2>
    </div>
    <div class="clerk_powerstep_image">
      <img src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="Sie haben {{ product.title }} zu Ihrem Warenkorb hinzugefügt.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Weiter zur Kasse</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Weiter einkaufen</button>
    </div>
    <br>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-others-also-bought" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-visitor-complementary" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular-on-sale" data-products="[{{product.id}}]"></span>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '#form-action-addToCart';
    const prodPage = (document.querySelector('[itemtype="http://schema.org/Product"] > div')) ? '[itemtype="http://schema.org/Product"] > div' : 'main';
    const clerkPowerstep = document.getElementById('clerk_powerstep');

    document.querySelector(buyBtn).addEventListener('click', open_powerstep);

    function open_powerstep() {
      Clerk('content', '.clerk-powerstep-recommendations');
      clerkPowerstep.style.display = 'block';
      clerkPowerstep.style.padding = '5px 15px';
      clerkPowerstep.classList.toggle('animate_top');
      setTimeout(function(){
        document.querySelector(prodPage).addEventListener('click', close_powerstep);
        document.getElementsByTagName('header')[0].addEventListener('click', close_powerstep);
      }, 500);
    }
  });

  function close_powerstep() {
    var clerkPowerstep = document.getElementById('clerk_powerstep');
    clerkPowerstep.style.display = 'none';
  }
</script>

Klicken Sie auf Save & apply file.

Warenkorbseite #

Erstellen Sie in my.clerk.io ein Element mit der Logic Best Cross-Sell Products.
Wählen Sie im Dropdown-Menü Insert into website > Choose your platform BigCommerce und kopieren Sie den Embedcode.
Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > pages > cart.html.
Fügen Sie den Embedcode dort ein, wo Sie die Anzeige wünschen (empfohlen unten, kurz vor dem schließenden </div>). Im Beispiel unten werden alle Produkt-IDs im Warenkorb verwendet.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Exit Intent #

Erstellen Sie in my.clerk.io ein Element mit der Logic Visitor Recommendations.
Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > layout > base.html.
Fügen Sie den folgenden Code kurz vor dem schließenden </body>-Tag ein, und geben Sie Ihre gewählte Element-ID in data-template an.

<span class="clerk"
  data-template="@{{content.id}}"
  data-exit-intent="true">
</span>

Starter-Templates #

Wenn Sie Code Designs nutzen möchten, können diese Vorlagen Ihnen den Einstieg erleichtern.

Slider Code #

Dieses Template rendert einen klassischen Slider mit verschiedenen Produktinformationen, das 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%;
    }
}

Add-to-Basket Code #

Dieser Embedcode sollte am Ende der Produktseitentemplate-Datei eingefügt werden. Er zeigt ein Popup mit einem Produktslider an, wenn ein Kunde ein Produkt in den Warenkorb legt. Die Integration kann nach Bedarf angepasst werden.

HTML #

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.

Recommendations

Slider-Einrichtung #

Design erstellen #

Design Editor #

Code Design #

Element erstellen #

Zur Website hinzufügen #

Seiten #

Startseite #

Produktseite #

Kategorieseite #

Warenkorbseite #

Blog-Seite #

Add-to-Basket Schritt #

Integriertes Popup #

Full Powerstep #

Warenkorbseite #

Exit Intent #

Starter-Templates #

Slider Code #

HTML #

CSS #

Add-to-Basket Code #

HTML #