Bigcommerce

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in BigCommerce.

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie beginnen, wenn Sie ein Clerk.js setup in BigCommerce verwenden.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations verwendet werden sollen.

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

Bevor Sie Design-Dateien bearbeiten, erstellen Sie eine Kopie des aktiven Designs. Gehen Sie in BigCommerce zu Storefront > My Themes, öffnen Sie das Design-Menü und wählen Sie Kopie erstellen. Wenden Sie das kopierte Design an, bevor Sie Advanced > Edit Theme Files auswählen. Dadurch erhalten Sie eine sichere Version zum Testen und verhindern, dass unfertige Vorlagenänderungen das Live-Storefront beeinflussen.

BigCommerce erfordert das Store Owner-Konto für einige Einstellungen. 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-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Unten 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. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor zur visuellen Konfiguration verwenden oder code designs benutzen.

Ein Design kann für beliebig viele von Ihnen erstellte Recommendations-Elemente 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 das gewünschte Template aus.
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 Startdesign möchten, sehen Sie sich weiter unten die Slider template an.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Wiederholen 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 einen beschreibenden Namen ein. Wir empfehlen, ihn basierend auf der Seite und der zu verwendenden 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 product logics finden Sie hier.
Wählen Sie unter Design das erstellte Design aus der Dropdown-Liste und wählen Sie die Anzahl der anzuzeigenden Produkte.
Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

Sie können Recommendations mithilfe von injection oder embedded code in Ihr Theme einfügen. Bei BigCommerce fügen Sie in der Regel den eingebetteten Code den entsprechenden Theme-Template-Dateien hinzu.

Öffnen Sie den Tab Insert into website.
Hier haben Sie zwei Möglichkeiten:
- Mit injection können Sie den Code mittels eines CSS-Selectors einfügen.
- Mit embedded code können Sie den Code manuell auf Ihrer Website einfügen.
Wählen Sie die für Sie einfachere Option.
Bei einigen Logics sehen Sie das Choose your platform Dropdown. Wählen Sie in diesen Fällen BigCommerce. Dies füllt den Embedcode mit den richtigen BigCommerce-Shortcodes vorab aus.

Seiten #

Unten finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, und welche Typen verwendet werden 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 an der gewünschten Position 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, oft unter templates > components (z. B. product-view.html oder pages > product-page-with-sidenav.html).
Fügen Sie den Embedcode an der gewünschten Stelle ein (empfohlen unten, nach der Produktbeschreibung). Das Beispiel unten 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 an der gewünschten Stelle ein (empfohlen direkt unter der Kategoriebeschreibung). Das Beispiel unten 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.

Warenkorb-Seite #

Gehen Sie in BigCommerce zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie templates > pages > cart.html.
Fügen Sie den Embedcode an der gewünschten Stelle ein (empfohlen unten, kurz vor dem schließenden </div>). Das Beispiel unten 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 Empfehlungen 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 sofort Recommendations anzeigen, nachdem ein Produkt dem 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 den folgenden Code an der gewünschten Stelle ein (empfohlen unten, nach der Produktbeschreibung), und geben Sie Ihre gewählte 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 mehrere Powerstep-Recommendations-Spans zu Ihrem Produktseiten-Template 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 zum Checkout</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 Embedcode an der gewünschten Stelle ein (empfohlen unten, kurz vor dem schließenden </div>). Das Beispiel unten 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 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 unmittelbar vor das schließende </body>-Tag ein und geben Sie Ihre gewählte 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 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 Ende der Produktseiten-Theme-Datei eingefügt werden. Er zeigt ein Popup mit einem Produktslider an, wenn ein Kunde ein Produkt zu seinem Warenkorb hinzufügt. 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-Einrichtung #

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 #