Shopify
Recommendations
Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, die es Ihnen ermöglichen, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie mit einem Clerk.js-Setup in Shopify beginnen können.
Für unsere vollständigen Best Practices lesen Sie diesen Artikel, welche Empfehlungen zu verwenden sind.
Inhaltseinrichtung #
Empfehlungen werden mit Inhalt Blöcken erstellt, die auf ein Design verweisen. Im Folgenden finden Sie die grundlegende Anleitung zur Einrichtung eines Inhaltsblocks.
Wenn Sie die Schritte in my.clerk.io > Einstellungen > Einrichtungsanleitungen befolgen, werden die Inhaltsblöcke für unsere Best Practices automatisch erstellt.
Design erstellen #
Empfehlungen werden standardmäßig als Slider angezeigt. Dies ermöglicht es den Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.
Ein Design kann für beliebig viele Empfehlungen-Inhalte, die Sie erstellen, wiederverwendet werden.
Design-Editor #
- Gehen Sie zu Empfehlungen > Designs und klicken Sie auf Neues Design.
- Wählen Sie Produkt-Slider
- Wählen Sie aus der Liste der Designvorlagen diejenige aus, mit der Sie beginnen möchten.
- Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
- Nehmen Sie alle gewünschten Änderungen am Design vor.
Code-Design #
- Gehen Sie zu Empfehlungen > Designs und klicken Sie auf Neues Design.
- Wählen Sie Andere Designs > Leer > Code.
- Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
- Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.
Wenn Sie ein Startdesign möchten, überprüfen Sie die Slider-Vorlage weiter unten.
Inhalt erstellen #
Dies enthält alle Einstellungen, die verwendet werden, um die Empfehlungen anzuzeigen und sie in Ihre Website einbettbar zu machen. Befolgen Sie diese Schritte für jedes Empfehlungsbanner, das Sie erstellen möchten.
- Gehen Sie zu Empfehlungen > Inhalt.
- Klicken Sie auf Neuer Inhalt.
- Geben Sie ihm einen beschreibenden Namen. Wir empfehlen, ihn basierend auf der Seite und der Logik zu benennen, die Sie verwenden möchten. Z.B. “Startseite / Besucherempfehlungen”.
- Wählen Sie in Inhaltstyp, die Produktlogik aus, die Sie aus dem Dropdown verwenden möchten. Sie können eine Übersicht über alle Produktlogiken hier sehen.
- Wählen Sie in Design das Design aus, das Sie aus dem Dropdown erstellt haben, und wählen Sie die Anzahl der Produkte aus, die Sie anzeigen möchten.
- Klicken Sie oben auf dem Bildschirm auf Speichern.
Zur Website hinzufügen #
- Öffnen Sie die In die Website einfügen Registerkarte.
- Hier haben Sie zwei Optionen:
- Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
- Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
- Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
- Bei einigen Logiken sehen Sie das Wählen Sie Ihre Plattform Dropdown. Wählen Sie in diesen Fällen Shopify. Dies füllt den Embedcode mit den richtigen Shopify-Shortcodes vorab aus.
Hier ist ein vollständiges Beispiel für einen Embed-Code für Empfehlungen, mit einem Shopify-Shortcode zum Einfügen 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 Themas eingefügt werden, die normalerweise in Shopify Admin > Online Store > Themes zu finden sind. Alternativ können Sie Ergebnisse einfügen, wenn Sie die CSS-Selektoren für die Elemente kennen, in die Sie Ergebnisse einfügen möchten.
Startseite #
- Erstellen Sie in my.clerk.io 3 Inhaltsblöcke mit den folgenden Logiken:
- Besucherempfehlungen
- Bestseller
- Beliebte Produkte
- Gehen Sie in Shopify zu Online Store > Themes > Anpassen
- Klicken Sie auf Abschnitt hinzufügen > Benutzerdefinierte Flüssigkeit.
- Fügen Sie die Embedcodes in das Benutzerdefinierte Flüssigkeit Feld ein.
- Klicken Sie auf Speichern.
Wenn Sie alle Banner übereinander anzeigen möchten, fügen Sie alle Embedcodes in dasselbe Feld ein. Falls Sie sie über die Startseite verteilen möchten, befolgen Sie einfach den obigen Prozess mehrmals.
Kategorieseite #
- Erstellen Sie in my.clerk.io einen Inhaltsblock mit der Logik Bestseller in Kategorie.
- Wählen Sie im In die Website einfügen > Wählen Sie Ihre Plattform Dropdown Shopify aus und kopieren Sie den Embedcode.
- Gehen Sie zu den Theme-Dateien von Shopify und finden Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist meistens Sections > main-collection-product-grid.liquid.
- Fügen Sie den Embedcode irgendwo unter dem Titel und der Beschreibung ein. Je nach Thema kann dieser Platz variieren.
Produktseite #
- Erstellen Sie in my.clerk.io 2 Inhaltsblöcke mit den folgenden Logiken:
- Beste alternative Produkte
- Beste Cross-Sell-Produkte
- Wählen Sie im In die Website einfügen > Wählen Sie Ihre Plattform Dropdown für jeden von ihnen Shopify aus und kopieren Sie die Embedcodes.
- Finden Sie in den Theme-Dateien von Shopify die Datei, die Ihre Produktseiten generiert. Dies ist meistens Sections > main-product.liquid.
- Fügen Sie die Embedcodes irgendwo unter der Produktbeschreibung ein. Je nach Thema kann dieser Platz variieren.
Add-To-Basket-Schritt #
- Erstellen Sie in my.clerk.io einen Inhaltsblock mit der Logik Beste Cross-Sell-Produkte.
- Geben Sie ihm den Namen “Add-To-Basket / Andere haben auch gekauft”. Dies ist wichtig, damit der Embedcode richtig funktioniert.
- Klicken Sie oben auf der Seite auf Speichern.
- Finden Sie in den Theme-Dateien von Shopify die Datei, die Ihre Produktseiten generiert. Dies ist meistens Sections > main-product.liquid.
- Fügen Sie den Add-To-Basket-Embedcode am Ende der Datei ein und klicken Sie auf Speichern. Sie finden den Embedcode im Abschnitt Startvorlagen.
Das Add-To-Basket-Popup wird jetzt angezeigt, wenn ein Kunde ein Produkt von der Produktseite in seinen Warenkorb legt.
Wenn dies nicht der Fall ist, liegt es wahrscheinlich daran, dass Ihr “In den Warenkorb”-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 einen Inhaltsblock mit der Logik Beste Cross-Sell-Produkte.
- Wählen Sie im In die Website einfügen > Wählen Sie Ihre Plattform Dropdown Shopify aus und kopieren Sie den Embedcode.
- Gehen Sie zu den Theme-Dateien von Shopify und finden Sie die Datei, die Ihre Warenkorbseiten generiert. Dies ist meistens Sections > main-cart-footer.liquid.
- Fügen Sie den Embedcode irgendwo unter den Warenkorbartikeln und dem Checkout-Button ein, zum Beispiel direkt vor dem
{% schema %}Tag.
Exit Intent #
- Erstellen Sie in my.clerk.io einen Inhaltsblock mit der Logik Besucherempfehlungen.
- Gehen Sie zu den Theme-Dateien von Shopify und finden Sie die Haupt-Theme-Datei. Dies ist meistens 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. Hier ist ein Beispiel, wie es aussehen sollte:
<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 der Maus über die Adressleiste seines Browsers fährt.
Blogseite #
- Erstellen Sie in my.clerk.io einen Inhaltsblock mit der Logik Produkte, die zu einer Seite gehören.
- Gehen Sie in Shopify zu Online Store > Blogbeiträge.
- Klicken Sie auf den Beitrag, zu dem Sie Empfehlungen hinzufügen möchten.
- Klicken Sie auf die <> Schaltfläche in der oberen rechten Ecke des Textfeldes, um den HTML-Code des Beitrags anzuzeigen.
- Fügen Sie den Embedcode an einer Stelle des Beitrags ein, an der es natürlich ist, Empfehlungen anzuzeigen, und ersetzen Sie
INSERT_PAGE_ID_HEREdurch die Seiten-ID des Beitrags. Sie finden diese ID in der URL des Beitrags.
Startvorlagen #
Wenn Sie Code-Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern.
Slider-Code #
Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, die 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">Im Angebot</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">Nicht auf Lager</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">In den Warenkorb</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 Theme-Datei der Produktseite eingefügt werden. Er zeigt ein Popup mit einem Slider von Produkten an, wenn ein Kunde ein Produkt in seinen 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>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 und 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.