Shopify

Recommendations

Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie völlig automatisierte Produkte auf jeder Seite anzeigen können. In diesem Artikel erfahren Sie, wie Sie mit einem Clerk.js Setup in Shopify starten.

Unsere kompletten Best Practices finden Sie in diesem Artikel darüber, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegende Anleitung zum Erstellen eines Elements.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden automatisch die Elements für unsere Best Practices 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 für die visuelle Konfiguration verwenden oder sich für Code Designs entscheiden.

Ein Design kann für beliebig viele Recommendations-Elemente verwendet 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 das gewünschte Startdesign aus.
  4. Geben Sie einen Namen ein 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 einen Namen ein und klicken Sie auf Create design.
  4. Erstellen Sie ein Code Design von Grund auf mit Liquid code.

Wenn Sie ein Startdesign wünschen, schauen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dieses enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Führen Sie diese Schritte für jedes Recommendations-Banner aus, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements.
  2. Klicken Sie auf New Element.
  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, ihn nach der Seite und der Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown-Menü aus. Eine Übersicht über alle Produktlogiken finden Sie hier.
  5. Wählen Sie unter Design das von Ihnen erstellte Design aus dem Dropdown-Menü aus und bestimmen Sie die Anzahl der anzuzeigenden Produkte.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Tab Insert into website.
  2. Sie haben hier zwei Optionen:
    • Injection ermöglicht das Einfügen des Codes per CSS-Selektor.
    • Embedded Code ermöglicht das manuelle Einfügen des Codes in Ihre Website.
  3. Wählen Sie die für Sie einfachste Option.
  4. Bei manchen Logiken sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Shopify aus. 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 ist 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 sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen sollten und welche Typen Sie verwenden sollten, um unsere Best Practices einzuhalten. Shopify hat mehr als 100 Themes, daher können die Dateipfade abweichen.

Die Snippets müssen in die HTML-Dateien des Themes eingefügt werden, die normalerweise unter Shopify Admin > Online Store > Themes zu finden sind. Alternativ können Sie Ergebnisse einfügen, wenn Sie die CSS-Selektoren für die 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 auf 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.

Falls Sie alle Banner übereinander anzeigen möchten, fügen Sie alle Embedcodes in dasselbe Feld ein. Wenn Sie sie auf der Startseite verteilen möchten, wiederholen Sie den oben genannten Vorgang entsprechend mehrfach.

Kategorieseite #

  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 generiert. Das ist meistens Sections > main-collection-product-grid.liquid.
  4. Fügen Sie den Embedcode unterhalb von Titel und Beschreibung ein. Je nach Theme variiert diese Platzierung.

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit diesen Logiken:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide jeweils Shopify aus und kopieren Sie die Embedcodes.
  3. Suchen Sie in den Shopify Theme-Dateien die Datei, die Ihre Produktseiten generiert. Das ist meistens Sections > main-product.liquid.
  4. Fügen Sie die Embedcodes irgendwo unterhalb der Produktbeschreibung ein. Je nach Theme variiert diese Platzierung.

Add-To-Basket Schritt #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “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 Shopify Theme-Dateien die Datei, die Ihre Produktseiten generiert. Das ist meistens 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 ein Produkt von der Produktseite zum Warenkorb hinzufügt.

Falls dies nicht der Fall ist, liegt es wahrscheinlich daran, dass Ihr Add-to-Cart-Button eine andere Klasse oder ID besitzt. Überprüfen Sie Ihren Button und ersetzen Sie .product-form__cart-submit im Embedcode durch die Klasse/ID Ihres Buttons.

Warenkorbseite #

  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. Suchen Sie in den Theme-Dateien von Shopify die Datei, die Ihre Warenkorbseite generiert. Das ist meistens Sections > main-cart-footer.liquid.
  4. Fügen Sie den Embedcode irgendwo unterhalb der Warenkorbartikel und des Checkout-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 Theme-Dateien von Shopify die Haupt-Theme-Datei. Das ist meistens Layout > theme.liquid.
  3. Fügen Sie den Embedcode direkt vor das schließende </body> Tag ein.
  4. Fügen Sie das Attribut data-exit-intent="true" zum Embedcode hinzu. So sollte das Beispiel aussehen:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Nachdem Sie dies hinzugefügt haben, wird das Exit Intent-Popup angezeigt, wenn ein Kunde mit seiner Maus über die Adressleiste des Browsers fährt.

Blog-Seite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Products Related To A Page.
  2. Gehen Sie in Shopify auf Online Store > Blog posts.
  3. Klicken Sie auf den Beitrag, zu dem Sie Empfehlungen hinzufügen möchten.
  4. Klicken Sie oben rechts im Textfeld auf die <> Schaltfläche, um den HTML-Code des Beitrags zu sehen.
  5. Fügen Sie den Embedcode an einer passenden Stelle im Beitrag ein, an der Empfehlungen angezeigt werden sollen, und ersetzen Sie INSERT_PAGE_ID_HERE durch die Seiten-ID des Beitrags. Sie finden diese ID in der URL des Beitrags.

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, helfen Ihnen diese Vorlagen beim Einstieg.

Slider Code #

Diese Vorlage zeigt einen Standardslider mit verschiedenen Produktinformationen an, den Sie an Ihre Bedürfnisse 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 Slider von Produkten an, wenn ein Kunde ein Produkt in seinen Warenkorb legt. 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>Sie haben <b><u>{{ product.title }}</u></b> in Ihren Warenkorb gelegt.</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> in Ihren Warenkorb gelegt.">
        </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.