Shopify
Recommendations
Clerk.io bietet mehr als 23 verschiedene Produktempfehlungslogiken, sodass Sie komplett automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie mit einem Clerk.js Setup in Shopify starten.
Für unsere vollständigen Best Practices lesen Sie diesen Artikel darüber, welche Recommendations verwendet werden sollten.
Slider-Einrichtung #
Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Im Folgenden finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.
Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Elemente für unsere Best Practices automatisch erstellt.
Design erstellen #
Recommendations werden standardmäßig als Slider angezeigt. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor verwenden, um visuell zu konfigurieren, oder Code Designs nutzen.
Ein Design kann für eine beliebige Anzahl von Recommendations-Elementen wiederverwendet werden, die Sie erstellen.
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 diejenige aus, mit der Sie starten möchten.
- 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 Starter-Design möchten, sehen Sie sich weiter unten die Slider-Vorlage an.
Element erstellen #
Dies enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Folgen Sie diesen Schritten 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 nach der Seite und der gewünschten Logik zu benennen, z. B. “Home Page / Visitor Recommendations”.
- Wählen Sie im Element type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Produktlogiken finden Sie hier.
- Wählen Sie im Design das von Ihnen erstellte Design aus dem Dropdown aus und wählen Sie die Anzahl der anzuzeigenden Produkte.
- Klicken Sie oben auf dem Bildschirm auf Save.
Zur Website hinzufügen #
- Öffnen Sie den Tab Insert into website.
- Hier haben Sie zwei Optionen:
- Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.
- Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.
- Wählen Sie die für Sie einfachste Option.
- Für einige Logiken sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Shopify aus. Dadurch wird der Embedcode mit den richtigen Shopify-Shortcodes vorausgefüllt.
Typische Theme-Dateipfade (abhängig vom 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 ein vollständiges Embedcode-Beispiel für Recommendations mit einem Shopify-Shortcode zur Übertragung der Produkt-ID:
<span class="clerk"
data-template="@product-page-alternatives"
data-products="[{{ product.id }}]">
</span>
Seiten #
Die Snippets sollten 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 injizieren, wenn Sie die CSS-Selektoren der Elemente kennen, in die Sie Ergebnisse einfügen möchten.
Startseite #
- Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logiken:
- Visitor Recommendations
- Bestsellers
- Hot Products
- Gehen Sie in Shopify zu Online Store > Themes > Customize
- Klicken Sie auf Add Section > Custom Liquid.
- Fügen Sie die Embecodes in das Feld Custom Liquid ein.
- Klicken Sie auf Save.
Wenn alle Banner übereinander angezeigt werden sollen, fügen Sie alle Embedcodes in dasselbe Feld ein. Möchten Sie sie auf der Startseite verteilen, wiederholen Sie den Vorgang einfach mehrmals.
Kategorieseite #
- Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
- Im Dropdown Insert into website > Choose your platform wählen Sie Shopify und kopieren Sie den Embedcode.
- Gehen Sie zu den Theme-Dateien in Shopify und suchen Sie die Datei, die Ihre Collection-Seiten generiert. Dies ist häufig Sections > main-collection-product-grid.liquid.
- Fügen Sie den Embedcode irgendwo unterhalb von Titel und Beschreibung ein. Je nach Theme variiert die Platzierung.
Vollständige Kategorieseite #
Wenn Clerk.io das ganze Produktgrid auf Kategorieseiten rendern soll (anstatt nur einen Slider), verwenden Sie ein kategoriebezogenes Snippet und ersetzen Sie die Standard-Produkt-Loop in Ihrem Collection-Template.
- Erstellen Sie in my.clerk.io ein neues Recommendations Element für Kategorieseiten.
- Öffnen Sie in Shopify Ihr Collection-Template (meist Sections > main-collection-product-grid.liquid).
- Kommentieren oder entfernen Sie die native Produktgrid-Schleife.
- Fügen Sie dieses Snippet an der Stelle ein, an der das Produktgrid erscheinen 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>
- Speichern und testen Sie eine Collection-Seite mit Query-Parametern in der URL, um zu bestätigen, dass Facetten und Pagination wie erwartet funktionieren.
Weitere Informationen zur API/Logik finden Sie im Artikel auf Plattform-Ebene: Kategorieseiten-Anleitung.
Produktseite #
- Erstellen Sie in my.clerk.io 2 Elements mit den Logiken:
- Best Alternative Products
- Best Cross-Sell Products
- Wählen Sie im Dropdown Insert into website > Choose your platform jeweils Shopify und kopieren Sie die Embedcodes.
- Finden Sie in den Shopify Theme Dateien die Datei, welche die Produktseiten generiert. Dies ist meist Sections > main-product.liquid.
- Fügen Sie die Embedcodes irgendwo unterhalb der Produktbeschreibung ein. Die Platzierung hängt von Ihrem Theme ab.
Add-To-Basket Schritt #
- Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
- Benennen Sie es “Add-To-Basket / Others Also Bought”. Dies ist wichtig, damit der Embedcode korrekt funktioniert.
- Klicken Sie oben auf der Seite auf Save.
- Finden Sie in den Shopify Theme Dateien die Datei, die die Produktseiten generiert. Meist Sections > main-product.liquid.
- 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 erscheint nun, wenn ein Kunde von der Produktseite aus ein Produkt zum Warenkorb hinzufügt.
Falls dies nicht funktioniert, liegt es wahrscheinlich daran, dass Ihr Add-To-Cart-Button eine andere Klasse oder ID hat. Überprüfen Sie Ihren Button und ersetzen Sie .product-form__cart-submit im Embedcode durch die Klasse/ID Ihres Buttons.
Warenkorbseite #
- 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 Shopify und kopieren Sie den Embedcode.
- Gehen Sie zu den Theme-Dateien in Shopify und suchen Sie die Datei für Ihre Cart-Seiten. Dies ist meist Sections > main-cart-footer.liquid.
- Fügen Sie den Embedcode unterhalb der Warenkorbartikel und Checkout-Button ein, beispielsweise direkt vor dem
{% schema %}-Tag.
Exit Intent #
- Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
- Finden Sie in den Shopify Theme-Dateien die Hauptdatei. Dies ist häufig Layout > theme.liquid.
- Fügen Sie den Embedcode direkt vor dem schließenden
</body>-Tag ein. - Fügen Sie das Attribut
data-exit-intent="true"zum Embedcode 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 mit der Maus über die Adressleiste des Browsers fährt.
Blogseite #
- Erstellen Sie in my.clerk.io ein Element mit der Logik Products Related To A Page.
- Gehen Sie in Shopify zu Online Store > Blog posts.
- Klicken Sie auf den Beitrag, dem Sie Recommendations hinzufügen möchten.
- Klicken Sie oben rechts im Textfeld auf den Button <>, um den HTML-Code des Beitrags anzuzeigen.
- Fügen Sie den Embedcode an einer passenden Stelle im Beitrag ein und ersetzen Sie
INSERT_PAGE_ID_HEREmit der Seiten-ID des Beitrags. Diese ID finden Sie in der URL des Beitrags.
Starter-Templates #
Wenn Sie Code Designs verwenden möchten, können Sie mit diesen Vorlagen starten.
Slider Code #
Diese Vorlage zeigt einen Standardslider mit diversen Produktinformationen, den Sie bei Bedarf 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&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 zum Warenkorb hinzufügt. Die Anpassung ist möglich.
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.