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 beginnen, wenn Sie ein Clerk.js-Setup in BigCommerce verwenden.

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

Wenn 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 auf ein Design verweisen. Nachfolgend 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. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor verwenden, um das Design visuell zu konfigurieren, 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 Designvorlagen diejenige, mit der Sie beginnen möchten.
Geben Sie einen Namen ein und klicken Sie auf Create design.
Nehmen Sie alle 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 Ausgangsdesign möchten, sehen Sie sich weiter unten die Slider-Vorlage an.

Element erstellen #

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

Gehen Sie zu Recommendations > Elements.
Klicken Sie auf New Element.
Geben Sie ihm einen aussagekräftigen Namen. Wir empfehlen, es basierend auf der Seite und Logik zu benennen, die Sie verwenden möchten. Z. B. “Home Page / Visitor Recommendations”.
Wählen Sie unter Element type, die Produktlogik, die Sie verwenden möchten, aus dem Dropdown-Menü aus. Eine Übersicht über alle Produktlogiken finden Sie hier.
Wählen Sie unter Design das Design aus, das Sie erstellt haben, und geben Sie die Anzahl der Produkte an, die Sie anzeigen möchten.
Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Sie können Recommendations mit Injection oder Embedded Code in Ihr Theme einfügen. Bei BigCommerce fügen Sie den Embedded Code in der Regel in die relevanten Theme-Template-Dateien ein.

Öffnen Sie die Registerkarte Insert into website.
Hier haben Sie zwei Optionen:
- 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.
Wählen Sie die Option, die für Sie am einfachsten ist.
Für einige Logics sehen Sie das Choose your platform Dropdown-Menü. 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 er angezeigt werden soll (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 er angezeigt werden soll (empfohlen am unteren Rand nach der Produktbeschreibung). Das folgende Beispiel verwendet die Produkt-ID von der Seite.

<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 er angezeigt werden soll (empfohlen direkt unter der Kategoriebeschreibung). Das folgende Beispiel verwendet die Kategorie-ID von der Seite.

<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 er angezeigt werden soll (empfohlen am unteren Rand, direkt vor dem schließenden </div>). Das folgende Beispiel verwendet alle Produkt-IDs im Warenkorb.

<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 unmittelbar nachdem ein Produkt zum Warenkorb hinzugefügt wurde, anzeigen. Wählen Sie eine der nachstehenden 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 am unteren Rand nach der Produktbeschreibung) und geben Sie Ihre gewählte Element-ID in data-template aus.

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

Vollständiger Powerstep #

Fügen Sie den Popup-Container, die Styles und eine Reihe von Powerstep-Produktvorschlags-Elementen zu Ihrer Produktseiten-Template-Datei hinzu. Die Spans laden, wenn auf den Add-to-Cart-Button 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 er angezeigt werden soll (empfohlen am unteren Rand, direkt vor dem schließenden </div>). Das folgende Beispiel verwendet alle Produkt-IDs im Warenkorb.

<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 direkt vor dem schließenden </body>-Tag ein und geben Sie Ihre gewählte Element-ID in data-template aus.

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

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Sie diese Vorlagen als Ausgangsbasis nutzen.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, den Sie nach Ihren Wünschen 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 unteren Ende der Theme-Datei der Produktseite eingefügt werden. Er zeigt ein Popup mit einem Slider von Produkten an, wenn ein Kunde ein Produkt zum Warenkorb hinzufügt. Er kann bei 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 #

Vollständiger Powerstep #

Warenkorbseite #

Exit-Intent #

Startvorlagen #

Slider-Code #

HTML #

CSS #

Add-to-Basket-Code #

HTML #