Bigcommerce

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in BigCommerce.

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollautomatisierte Produkte auf jeder Seite anzeigen können. In diesem Artikel wird erklärt, wie Sie mit einer Clerk.js-Integration in BigCommerce beginnen.

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 starten in my.clerk.io > Data > Configuration.

Slider-Setup #

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

Wenn Sie die Schritte unter 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. Dadurch können Kunden mehr Produkte mit weniger Klicks 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-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 gewünschte Ä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, finden Sie die Slider-Vorlage weiter unten.

Content erstellen #

Dies umfasst alle Einstellungen, die verwendet werden, um die Recommendations anzuzeigen und sie auf Ihrer Website einbettbar zu machen. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

Gehen Sie zu Recommendations > Elements.
Klicken Sie auf New Content.
Geben Sie einen beschreibenden Namen ein. Wir empfehlen, diesen nach Seite und Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.
Wählen Sie unter Content type, die gewünschte Produktlogik 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 wählen Sie die Anzahl der angezeigten Produkte.
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 üblicherweise in die relevanten Theme-Template-Dateien ein.

Öffnen Sie die Registerkarte Insert into website.
Sie haben hier zwei Möglichkeiten:
- Mithilfe von Injection können Sie den Code mit einem CSS-Selektor einfügen.
- Mithilfe von Embedded Code können Sie den Code manuell in Ihre Website einfügen.
Wählen Sie die für Sie einfachste Option.
Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen BigCommerce. Dadurch wird der Embedcode mit den korrekten BigCommerce-Shortcodes vorausgefüllt.

Seiten #

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

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 erscheinen 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, meist unter templates > components (z. B. product-view.html oder pages > product-page-with-sidenav.html).
Fügen Sie den Embedcode dort ein, wo er erscheinen soll (empfohlen unten, 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 erscheinen 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 erscheinen soll (empfohlen am unteren Rand, direkt vor dem schließenden </div>). Das 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.

Blogseite #

Wenn Sie kontextbezogene Empfehlungen auf CMS-Content-Seiten 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 nach dem Hinzufügen eines Produkts zum Warenkorb anzeigen. 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 folgenden Code dort ein, wo Sie den Powerstep anzeigen möchten (empfohlen unten, nach der Produktbeschreibung), und rendern Sie Ihre gewählte Element-ID in data-template.

<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-Empfehlungs-Spans zu Ihrer Produktseitenvorlage hinzu. Die Spans werden geladen, wenn der 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 erscheinen soll (empfohlen am unteren Rand, direkt vor dem schließenden </div>). Das 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 rendern Sie Ihre gewählte Element-ID in data-template.

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

Ausgangsvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Sie mit diesen Vorlagen starten.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, den 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 unteren Rand der Theme-Datei der Produktseite eingefügt werden. Er zeigt ein Popup mit einem Slider von Produkten an, wenn ein Kunde ein Produkt in seinen Warenkorb legt. Er 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-Setup #

Design erstellen #

Design Editor #

Code Design #

Content erstellen #

Zur Website hinzufügen #

Seiten #

Startseite #

Produktseite #

Kategorieseite #

Warenkorbseite #

Blogseite #

Add-To-Basket-Schritt #

Eingebautes Popup #

Vollständiger Powerstep #

Warenkorbseite #

Exit Intent #

Ausgangsvorlagen #

Slider-Code #

HTML #

CSS #

Add-To-Basket-Code #

HTML #