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 mit einem Clerk.js-Setup in BigCommerce starten.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations Sie verwenden sollten.

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

Bevor Sie Theme-Dateien bearbeiten, machen Sie eine Kopie des aktiven Themes. Gehen Sie dazu in BigCommerce zu Storefront > My Themes, öffnen Sie das Theme-Menü und wählen Sie Make a copy. Wenden Sie das kopierte Theme an, bevor Sie Advanced > Edit Theme Files auswählen. Dies gibt Ihnen eine sichere Version zum Testen und verhindert, dass unfertige Template-Änderungen das Live-Storefront beeinflussen.

Für einige Einstellungen verlangt BigCommerce das Store Owner-Konto. Wenn Edit Theme Files oder die Tracking-Einstellungen nicht verfügbar sind, bitten Sie den Store Owner, die Änderung vorzunehmen oder die erforderliche Berechtigung zu erteilen.

Slider-Setup #

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

Wenn Sie die Schritte im 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 Kund:innen mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design Editor zur visuellen Konfiguration nutzen oder Code Designs verwenden.

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

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 aus, mit der Sie beginnen möchten.
Geben Sie einen Namen ein und klicken Sie auf Create design.
Nehmen Sie beliebige Ä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 mit Liquid Code ein Code-Design von Grund auf.

Wenn Sie ein Startdesign möchten, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen zur Anzeige der Recommendations und macht es 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.
Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn basierend auf der Seite und der gewünschten Logik zu benennen. Z. B. “Home Page / Visitor Recommendations”.
Wählen Sie unter Element type, die gewünschte Produktlogik aus der Dropdown-Liste aus. Einen Überblick über alle Produktlogiken finden Sie hier.
Wählen Sie im Dropdown unter Design das erstellte Design sowie die Anzahl anzuzeigender Produkte aus.
Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Sie können Recommendations über Injection oder Embedded Code in Ihr Theme einbinden. In BigCommerce fügen Sie den Embed-Code normalerweise in die entsprechenden Theme-Template-Dateien ein.

Öffnen Sie den Tab Insert into website.
Hier haben Sie zwei Optionen:
- Injection ermöglicht das Einfügen des Codes mithilfe eines CSS-Selectors.
- Embedded code ermöglicht das manuelle Einfügen des Codes in Ihre Website.
Wählen Sie die für Sie am einfachsten zu verwendende Option.
Für einige Logics finden Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen BigCommerce aus. Dadurch wird der Embedcode mit den richtigen BigCommerce-Shortcodes vorausgefüllt.

Seiten #

Nachfolgend finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die empfohlenen Typen, 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 Embed-Code an der gewünschten Stelle ein (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, meist unter templates > components (z. B. product-view.html oder pages > product-page-with-sidenav.html).
Fügen Sie den Embed-Code an der gewünschten Stelle ein (empfohlen am Seitenende nach der Produktbeschreibung). Das folgende Beispiel nutzt die Produkt-ID 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 Embed-Code an der gewünschten Stelle ein (empfohlen direkt unterhalb der Kategoriebeschreibung). Das Beispiel nutzt die Kategorie-ID der Seite.

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

Klicken Sie auf Save & apply file.

Warenkorb-Seite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > pages > cart.html.
Fügen Sie den Embed-Code an der gewünschten Stelle ein (empfohlen am unteren Ende, direkt vor dem schließenden </div>). Das Beispiel nutzt 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 #

Falls Sie auf CMS-Inhaltsseiten kontextbezogene Recommendations 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 Empfehlungen direkt anzeigen, nachdem ein Produkt zum Warenkorb hinzugefügt wurde. Wählen Sie eine der folgenden Optionen.

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > components > cart > preview.html.
Fügen Sie folgende Codezeile ein, wo der Powerstep erscheinen soll (empfohlen am Seitenende nach der Produktbeschreibung), und tragen Sie Ihre gewünschte Element-ID in data-template ein.

<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, Styles und eine Reihe von Powerstep-Empfehlungsspans in Ihre Produktseiten-Vorlage ein. Die Spans werden geladen, wenn der Add-to-Cart-Button geklickt wird.

<!-- Container (standardmäßig verborgen) -->
<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.

Warenkorb-Seite #

Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
Wählen Sie im Dropdown Insert into website > Choose your platform BigCommerce aus 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 Embed-Code an der gewünschten Stelle ein (empfohlen am unteren Ende, direkt vor dem schließenden </div>). Das Beispiel nutzt 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 Logik 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 tragen Sie Ihre gewünschte Element-ID in data-template ein.

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

Startvorlagen #

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

Slider Code #

Diese Vorlage rendert einen Standardslider mit diversen Produktinformationen, den Sie nach Bedarf 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 Produktseiten-Theme-Datei eingefügt werden. Er zeigt ein Popup mit einem Slider an, wenn ein Produkt zum Warenkorb hinzugefügt wird. Der Code kann je 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-Setup #

Design erstellen #

Design Editor #

Code Design #

Element erstellen #

Zur Website hinzufügen #

Seiten #

Startseite #

Produktseite #

Kategorieseite #

Warenkorb-Seite #

Blog-Seite #

Add-To-Basket Schritt #

Integriertes Popup #

Vollständiger Powerstep #

Warenkorb-Seite #

Exit Intent #

Startvorlagen #

Slider Code #

HTML #

CSS #

Add-To-Basket-Code #

HTML #