Shopify

Recommendations

Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken und ermöglicht es Ihnen, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. 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 über die Nutzung von Recommendations.

Slider-Setup #

Recommendations werden mit Elements erstellt, die sich auf ein Design beziehen. Nachfolgend finden Sie eine grundlegende Anleitung zur Einrichtung 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. So können Kunden mehr Produkte mit weniger Klicks 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 Recommendations-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 Vorlage aus, mit der Sie beginnen möchten.
  4. Geben Sie dem Design einen Namen und klicken Sie auf Create design.
  5. Nehmen Sie alle gewünschten Änderungen 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. Geben Sie dem Design einen Namen und klicken Sie auf Create design.
  4. Erstellen Sie von Grund auf ein Code-Design mit Liquid code.

Wenn Sie ein Startdesign benötigen, finden Sie weiter unten die Slider-Vorlage.

Content erstellen #

Dieser Bereich enthält alle Einstellungen zur Anzeige der Recommendations und macht diese auf Ihrer Webseite einbettbar. 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 Content.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn nach Seite und Logik zu benennen. Zum Beispiel “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Content type, die gewünschte Produktlogik aus dem Dropdown aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das von Ihnen erstellte Design aus dem Dropdown und legen Sie fest, wie viele Produkte angezeigt werden sollen.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben zwei Möglichkeiten:
    • Durch die Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit dem Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die für Sie einfachste Option.
  4. Für einige Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Shopify. Dadurch wird der Embedcode mit den passenden Shopify-Shortcodes vorausgefüllt.

Typische Theme-Dateipfade (können je nach Theme variieren):

  • 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 finden Sie ein vollständiges Recommendations-Embedcode-Beispiel 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 sehen Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, sowie die einzusetzenden Typen, um unseren Best Practices zu folgen. Shopify bietet mehr als 100 Themes, daher können die Dateipfade variieren.

Die Snippets sollten in den HTML-Dateien des Themes eingefügt werden, die Sie normalerweise unter Shopify Admin > Online Store > Themes finden. Alternativ können Sie die Ergebnisse einfügen, wenn Sie die CSS-Selektoren der jeweiligen Elemente kennen.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logics:
    • 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 Feld Custom Liquid ein.
  5. Klicken Sie auf Save.

Wenn alle Banner untereinander angezeigt werden sollen, fügen Sie alle Embedcodes in dasselbe Feld ein. Möchten Sie sie auf der Startseite verteilt anzeigen, wiederholen Sie einfach den oben genannten Vorgang mehrmals.

Kategorie-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shopify aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien von Shopify und suchen Sie die Datei, die Ihre Collection-Seiten erzeugt. Dies ist meist Sections > main-collection-product-grid.liquid.
  4. Fügen Sie den Embedcode unterhalb von Titel und Beschreibung ein. Je nach Theme variiert die exakte Platzierung.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Insert into website > Choose your platform Dropdown für beide Shopify aus und kopieren Sie die Embedcodes.
  3. Suchen Sie im Shopify Theme die Datei, die Ihre Produktseiten generiert. Dies ist normalerweise Sections > main-product.liquid.
  4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Die genaue Positionierung 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. Benennen Sie es mit “Add-To-Basket / Others Also Bought”. Dies ist wichtig, damit der Embedcode korrekt funktioniert.
  3. Klicken Sie oben auf der Seite auf Save.
  4. Suchen Sie in den Theme-Dateien die Datei, die Ihre Produktseiten generiert. Dies ist normalerweise Sections > main-product.liquid.
  5. Fügen Sie den Add-To-Basket-Embedcode am Ende der Datei ein und klicken Sie auf Save. Den Embedcode finden Sie im Abschnitt Starting Templates.

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

Wenn das Popup nicht erscheint, hat Ihr Add-To-Cart-Button vermutlich eine andere Klasse oder ID. Überprüfen Sie die Schaltfläche und ersetzen Sie .product-form__cart-submit im Embedcode durch die entsprechende Klasse/ID Ihres Buttons.

Warenkorb-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shopify aus und kopieren Sie den Embedcode.
  3. Gehen Sie zu den Theme-Dateien und suchen Sie die Datei, die Ihre Warenkorbseiten erzeugt. Dies ist meist Sections > main-cart-footer.liquid.
  4. Fügen Sie den Embedcode unterhalb der Warenkorbartikel und des „Zur Kasse“-Buttons ein, z.B. direkt 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-Theme-Dateien die Haupttheme-Datei. Diese befindet sich normalerweise unter Layout > theme.liquid.
  3. Fügen Sie den Embedcode direkt vor dem schließenden </body> Tag ein.
  4. Fügen Sie dem Embedcode das Attribut data-exit-intent="true" hinzu. So sollte es aussehen:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Nach dem Hinzufügen wird das Exit Intent-Popup angezeigt, wenn ein Kunde den Mauszeiger über die Adressleiste seines Browsers bewegt.

Blog-Seite #

  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 oben rechts im Textfeld auf die <>-Schaltfläche, um den HTML-Code des Beitrags anzuzeigen.
  5. Fügen Sie den Embedcode dort ein, wo es am sinnvollsten ist, Recommendations anzuzeigen, und ersetzen Sie INSERT_PAGE_ID_HERE durch die Seiten-ID des Beitrags. Diese finden Sie in der URL des Beitrags.

Startvorlagen #

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

Slider-Code #

Mit dieser Vorlage wird ein klassischer Slider mit verschiedenen Produktinformationen gerendert, 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-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 Ende der Produktseiten-Theme-Datei eingefügt werden. Er zeigt ein Popup mit einem Produktslider, wenn ein Kunde ein Produkt in den Warenkorb legt. Der Code kann bei 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>Sie haben <b><u>{{ product.title }}</u></b> zu Ihrem Warenkorb hinzugefügt.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="Sie haben <b><u>{{ product.title }}</u></b> zu Ihrem Warenkorb hinzugefügt.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">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="@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.