Shopify

Recommendations

Recommendations

Clerk.io bietet mehr als 23 verschiedene Produktempfehlungslogiken, mit denen Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie beim Einsatz eines Clerk.js-Setups in Shopify starten.

Unsere vollständigen Best Practices finden Sie in diesem Artikel dazu, welche Recommendations verwendet werden sollen.

Slider-Einrichtung #

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 durchlaufen, werden automatisch die Elements für unsere Best Practices erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dadurch können Kunden mit weniger Klicks mehr Produkte sehen. Sie können entweder den Design Editor für die visuelle Konfiguration nutzen oder Code-Designs verwenden.

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

Design Editor #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Product Slider
  3. Wählen Sie aus der Liste der Designvorlagen die gewünschte Vorlage zum Starten aus.
  4. Geben Sie einen Namen an und klicken Sie auf Create design.
  5. Nehmen Sie beliebige Anpassungen am Design vor.

Code Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
  2. Wählen Sie Other designs > Blank > Code.
  3. Vergeben Sie einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie ein Code-Design von Grund auf unter Verwendung von Liquid-Code.

Wenn Sie ein Startdesign möchten, finden Sie weiter unten die Slider-Vorlage.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht es möglich, dieses auf Ihrer Website einzubinden. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements.
  2. Klicken Sie auf New Element.
  3. Geben Sie einen aussagekräftigen Namen ein. Wir empfehlen, diesen nach Seite und Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie bei Element type, die gewünschte Produktlogik aus dem Dropdown-Menü aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das erstellte Design aus dem Dropdown-Menü aus und geben Sie die anzuzeigende Produktanzahl an.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Auf der Website einbinden #

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben zwei Möglichkeiten:
    • Die Nutzung von Injection ermöglicht, den Code mittels CSS-Selektor einzufügen.
    • Die Nutzung von Embedded Code erlaubt es, den Code manuell in Ihre Website einzubetten.
  3. Wählen Sie die für Sie am einfachsten nutzbare Option.
  4. Für einige Logics sehen Sie das Choose your platform Dropdown-Menü. Wählen Sie in diesen Fällen Shopify. Dadurch wird der Embedcode mit den korrekten Shopify-Shortcodes vorausgefüllt.

Typische Theme-Dateipfade (je nach Theme unterschiedlich):

  • Startseite: Online Store > Themes > Customize > Add Section > Custom Liquid.
  • Produktseite: Sections > main-product.liquid.
  • Kategorieseite: Sections > main-collection-product-grid.liquid.
  • Warenkorbseite: Sections > main-cart-footer.liquid.
  • Global (Exit Intent): Layout > theme.liquid (vor </body> einfügen).

Hier ist ein vollständiges Beispiel für einen Recommendations-Embedcode mit einem Shopify-Shortcode zum Einfügen der Produkt-ID:

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

Seiten #

Insert Code Example
Nachfolgend sind die spezifischen Seiten gelistet, auf denen Sie Recommendations einfügen und welche Typen Sie verwenden sollten, um unsere Best Practices zu befolgen. Shopify enthält mehr als 100 Themes, daher sind die Dateipfade nicht immer exakt.

Die Code-Snippets sollten in die HTML-Dateien des Themes eingefügt werden, die sich normalerweise im Shopify Admin > Online Store > Themes befinden. Alternativ können Sie Ergebnisse auch injizieren, wenn Sie die CSS-Selektoren der gewünschten Elemente kennen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logiken:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Gehen Sie in Shopify zu Online Store > Themes > Customize
  3. Klicken Sie auf Add Section > Custom Liquid.
  4. Fügen Sie die Embedcodes in das Custom Liquid-Feld ein.
  5. Klicken Sie auf Save.

Wenn Sie alle Banner übereinander anzeigen möchten, fügen Sie alle Embedcodes in dasselbe Feld ein. Möchten Sie sie an verschiedenen Stellen der Startseite platzieren, wiederholen Sie den Vorgang entsprechend.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown-Menü Insert into website > Choose your platform Shopify aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien in Shopify und suchen Sie die Datei, die Ihre Collection-Seiten generiert. Das ist meist Sections > main-collection-product-grid.liquid.
  4. Fügen Sie den Embedcode unterhalb des Titels und der Beschreibung ein. Die genaue Stelle hängt vom Theme ab.

Volle Kategorieseite #

Wenn Clerk.io das vollständige Produktgitter auf Kollektionsseiten rendern soll (anstatt nur einen Slider), verwenden Sie ein auf Kategorien basierendes Snippet und ersetzen die Standard-Produkt-Loop in Ihrer Collection-Vorlage.

  1. Erstellen Sie in my.clerk.io ein neues Recommendations-Element für Kategorieseiten.
  2. Öffnen Sie in Shopify Ihre Collection-Vorlage (meist Sections > main-collection-product-grid.liquid).
  3. Kommentieren oder entfernen Sie die native Produktgitter-Loop.
  4. Fügen Sie das folgende Snippet dort ein, wo das Produktgitter angezeigt werden soll:
<div id="clerk-category-filters"></div>
<span
  id="clerk-category-products"
  class="clerk"
  data-template="@YOUR_ELEMENT_ID"
  data-category="{{ collection.id }}"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","vendor"]'
  data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
  data-facets-in-url="true">
</span>
  1. Speichern Sie und testen Sie eine Collection-Seite mit Query-Parametern in der URL, um Filter und Paginierung zu prüfen.

Nutzen Sie den Plattform-Artikel für weiterführende API-/Logic-Informationen: Kategorieseiten-Guide.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Insert into website > Choose your platform-Dropdown für jedes Element Shopify aus und kopieren Sie die Embedcodes.
  3. Suchen Sie in den Shopify-Themedateien die Datei, die Ihre Produktseiten generiert. Das ist meist Sections > main-product.liquid.
  4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Die genaue Stelle hängt von Ihrem Theme ab.

Add-To-Basket-Schritt #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Vergeben Sie den Namen “Add-To-Basket / Others Also Bought”. Für die korrekte Funktion des Embedcodes ist dies wichtig.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Suchen Sie in den Shopify-Themedateien die Datei, die Ihre Produktseiten generiert. Das ist meist Sections > main-product.liquid.
  5. Fügen Sie den Add-To-Basket-Embedcode am unteren Ende der Datei ein und klicken Sie auf Save. Sie finden den Embedcode im Abschnitt Startvorlagen.

Das Add-To-Basket-Popup erscheint nun, wenn ein Kunde ein Produkt von der Produktseite in den Warenkorb legt.

Erscheint es nicht, hat Ihr Warenkorb-Button wahrscheinlich eine andere Klasse oder ID. Prüfen Sie mit dem Inspektor die Klasse/ID Ihres Buttons und ersetzen Sie .product-form__cart-submit im Embedcode damit.

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Insert into website > Choose your platform-Dropdown Shopify und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien in Shopify und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Das ist meist Sections > main-cart-footer.liquid.
  4. Fügen Sie den Embedcode unterhalb der Warenkorbelemente und des Checkout-Buttons ein, z. B. kurz vor dem {% schema %}-Tag.

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
  2. Suchen Sie in den Shopify-Themedateien die Haupt-Theme-Datei. Das ist meistens Layout > theme.liquid.
  3. Fügen Sie den Embedcode direkt vor dem schließenden </body>-Tag ein.
  4. Fügen Sie das Attribut data-exit-intent="true" dem Embedcode hinzu. So sollte es aussehen:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Nach dem Hinzufügen erscheint das Exit-Intent-Popup, wenn ein Kunde mit der Maus auf die Adressleiste seines Browsers fährt.

Blogseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Products Related To A Page.
  2. Gehen Sie in Shopify zu Online Store > Blog posts.
  3. Klicken Sie auf den Beitrag, zu dem Sie Recommendations hinzufügen möchten.
  4. Klicken Sie rechts oben im Textfeld auf den <>-Button, um den HTML-Modus zu öffnen.
  5. Fügen Sie den Embedcode dort ein, wo es sinnvoll ist, Empfehlungen zu zeigen, und ersetzen Sie INSERT_PAGE_ID_HERE durch die Seiten-ID des Beitrags. Die ID finden Sie in der URL des Beitrags.

Startvorlagen #

Falls Sie Code-Designs nutzen wollen, helfen diese Vorlagen beim Einstieg.

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, den Sie nach Ihren Anforderungen 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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-add-to-cart, .clerk-add-to-cart: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. Damit erscheint ein Popup mit einem Produkt-Slider, wenn ein Kunde ein Produkt seinem Warenkorb hinzufügt. Der Code kann nach Bedarf angepasst werden.

HTML #

<script>
    document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.product-form__submit';
    const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
    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');
        //window.location.reload();
        clerkPowerstep.style.display = 'none';    
    }
</script>
<div style="display: none;" id="clerk_powerstep">
    <span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
    <div class="clerk_powerstep_wrap">
        <div class="clerk_powerstep_header">
        <h2>You added <b><u>{{ product.title }}</u></b> to your cart.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</button>
        </div>
        <br>
        <span class="clerk-powerstep-recommendations" 
            data-template="@add-to-basket-others-also-bought" 
            data-products="[{{product.id}}]">
        </span>
    </div>
</div>

<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !important;
    }
    #clerk_powerstep {
        width: clamp(45ch, 50%, 100ch) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0px !important;
        border: 3px solid #888 !important;
        border-radius: 2px !important;
        position: fixed;
        top: -100%;
        z-index: 999;
        display: none;
        background-color: white;
        box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    #clerk_powerstep h2 {
        text-align: center;
    }

    .clerk_powerstep_image {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .clerk_powerstep_image img {
        object-fit: contain;
        max-height: 240px;
        height: 25vh;
        margin: auto;
    }

    .clerk-popup-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-family: Arial;
        font-size: 32px;
        line-height: 1;
        color: gray;
        z-index: 2;
        padding: 3px;
    }
    .clerk_powerstep_header {
        position: relative;
    }

    .clerk_powerstep_wrap {
        position: relative;
        overflow-y: scroll;
        overflow-y: overlay;
        max-height: 80vh;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .clerk_powerstep_wrap::-webkit-scrollbar {
      display: none;
    }
    .clerk_powerstep_actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .clerk_powerstep_actions button {
        margin: 0 0 10px 0;
    }

    @media only screen and (max-width: 800px){
        .clerk_powerstep_actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
</style>

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