Shopify

Recommendations

Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, wodurch es möglich ist, komplett automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einem Clerk.js-Setup in Shopify starten.

Unsere vollständigen 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. Im Folgenden finden Sie die Grundanleitung zum Einrichten eines Elements.

Wenn Sie den Schritten in my.clerk.io > Settings > Setup Guides folgen, werden die Elemente 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 verwenden, um ihn visuell zu konfigurieren, oder Code-Designs nutzen.

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 starten möchten.
  4. Geben Sie ihr 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 einen Namen ein und klicken Sie auf Create design.
  4. Erstellen Sie von Grund auf ein Code-Design mit Liquid code.

Wenn Sie ein Ausgangsdesign möchten, sehen Sie sich die Slider-Vorlage weiter unten an.

Element erstellen #

Dieses enthält alle Einstellungen, um die Recommendations anzuzeigen und auf Ihrer Website einbettbar zu machen. 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 ihm einen aussagekräftigen Namen. Wir empfehlen, den Namen basierend auf der Seite und der gewünschten Logik zu wählen. Z.B. “Home Page / Visitor Recommendations”.
  4. Wählen Sie in Element type, die Produktlogik aus, die Sie verwenden möchten, aus der Dropdown-Liste aus. Eine Übersicht aller Produktlogiken finden Sie hier.
  5. Wählen Sie im Design das von Ihnen erstellte Design aus dem Dropdown-Menü und geben Sie die Anzahl der anzuzeigenden Produkte an.
  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffnen Sie den Insert into website-Tab.
  2. Hier haben Sie zwei Optionen:
    • Bei der Verwendung von Injection fügen Sie den Code mithilfe eines CSS-Selectors ein.
    • Bei Verwendung von Embedded Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die für Sie einfachste Option aus.
  4. Für einige Logics sehen Sie das Dropdown-Menü Choose your platform. Wählen Sie in diesen Fällen Shopify aus. Dadurch wird der Embecode mit den korrekten Shopify-Shortcodes vorausgefüllt.

Typische Theme-Dateipfade (abhängig vom Theme können sie abweichen):

  • 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 #

Im Folgenden finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten, und welche Typen Sie gemäß unseren Best Practices verwenden sollten. Shopify hat mehr als 100 Themes, daher sind die Dateipfade möglicherweise nicht in jedem Fall exakt.

Die Snippets sollten in die HTML-Dateien des Themes eingefügt werden. Diese sind normalerweise in der Shopify Admin > Online Store > Themes zu finden. Alternativ können Sie Ergebnisse injizieren, wenn Sie die CSS-Selektoren für die Elemente kennen, in die Sie Ergebnisse einfügen möchten.

Startseite #

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

Wenn Sie alle Banner untereinander anzeigen möchten, fügen Sie alle Embedcodes in dasselbe Feld ein. Möchten Sie sie über die Startseite verteilt zeigen, wiederholen Sie den Vorgang entsprechend mehrmals.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Bestsellers In Category.
  2. Wählen Sie im Insert into website > Choose your platform-Dropdown 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. Das ist meist Sections > main-collection-product-grid.liquid.
  4. Fügen Sie den Embedcode unter dem Titel und der Beschreibung ein. Die Platzierung hängt vom Theme ab.

Volle Kategorieseite #

Wenn Clerk.io das gesamte Produktgitter auf Collection-Seiten rendern soll (statt nur eines Sliders), verwenden Sie ein kategorie-basiertes Snippet und ersetzen Sie die Standard-Produkt-Schleife in Ihrem Collection-Template.

  1. Erstellen Sie in my.clerk.io ein neues Recommendations-Element für Kategorieseiten.
  2. Öffnen Sie in Shopify Ihr Collection-Template (meist Sections > main-collection-product-grid.liquid).
  3. Kommentieren Sie die native Produktgitter-Schleife aus oder entfernen Sie sie.
  4. Fügen Sie dieses Snippet an die Stelle ein, an der 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 zu bestätigen, dass Facetten und Pagination wie erwartet funktionieren.

Verwenden Sie für tiefere API-/Logik-Informationen den plattformspezifischen Artikel: Kategorieseiten-Leitfaden.

Produktseite #

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

Add-To-Basket-Schritt #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Best Cross-Sell Products.
  2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Das 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 meist 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.

Falls nicht, liegt es wahrscheinlich daran, dass Ihr Add-to-Cart-Button eine andere Klasse oder ID hat. Inspizieren Sie den 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 Logic Best Cross-Sell Products.
  2. Wählen Sie im Insert into website > Choose your platform-Dropdown Shopify aus und kopieren Sie den Embedcode.
  3. Suchen Sie in den Theme-Dateien von Shopify die Datei, die Ihre Warenkorbseiten erzeugt. Das ist meist Sections > main-cart-footer.liquid.
  4. Fügen Sie den Embedcode unterhalb der Warenkorb-Artikel und des Checkout-Buttons ein, z. B. direkt vor dem {% schema %}-Tag.
<span
  class="clerk"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Visitor Recommendations.
  2. Suchen Sie in den Shopify-Theme-Dateien die zentrale Theme-Datei. Das ist meist 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" zum Embedcode hinzu. Hier sehen Sie, wie es aussehen soll:
<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 mit der Maus über die Adressleiste seines Browsers fährt.

Blogseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logic Products Related To A Page.
  2. Gehen Sie in Shopify zu Online Store > Blog posts.
  3. Klicken Sie auf den Beitrag, dem Sie Empfehlungen hinzufügen möchten.
  4. Klicken Sie oben rechts im Textfeld auf den <> Button, um das HTML des Beitrags anzuzeigen.
  5. Fügen Sie den Embedcode an einer geeigneten Stelle in den Beitrag ein und ersetzen Sie INSERT_PAGE_ID_HERE durch die Seiten-ID des Beitrags. Diese ID finden Sie in der URL des Beitrags.

Startvorlagen #

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

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, 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 Themendatei für die Produktseite eingefügt werden. Er zeigt ein Popup mit einem Slider für Produkte an, wenn ein Kunde ein Produkt in den Warenkorb legt. Er 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.