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 Sie verwenden sollten.
Inhaltseinrichtung #
Empfehlungen werden mit Inhalt Blöcken erstellt, die auf ein Design verweisen. Nachfolgend finden Sie die grundlegenden Schritte 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, die Sie verwenden möchten, zu benennen. Z.B. “Startseite / Besucherempfehlungen”.
- Wählen Sie in Inhaltstyp, die Produktlogik aus, die Sie aus dem Dropdown-Menü verwenden möchten. Sie können hier eine Übersicht über alle Produktlogiken sehen.
- Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü 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 Dropdown Wählen Sie Ihre Plattform. Wählen Sie in diesen Fällen Shopify aus. Dies füllt den Embed-Code 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 injizieren, 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 Sektion hinzufügen > Benutzerdefiniertes Liquid.
- Fügen Sie die Embed-Codes in das Benutzerdefiniertes Liquid-Feld ein.
- Klicken Sie auf Speichern.
Wenn Sie alle Banner übereinander anzeigen möchten, fügen Sie alle Embed-Codes 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 Dropdown In die Website einfügen > Wählen Sie Ihre Plattform Shopify aus und kopieren Sie den Embed-Code.
- 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 Embed-Code irgendwo unter dem Titel und der Beschreibung ein. Je nach Ihrem 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 Dropdown In die Website einfügen > Wählen Sie Ihre Plattform für jeden von ihnen Shopify aus und kopieren Sie die Embed-Codes.
- 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 Embed-Codes irgendwo unter der Produktbeschreibung ein. Je nach Ihrem 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 “In den Warenkorb / Andere kauften auch” . Dies ist wichtig, damit der Embed-Code ordnungsgemäß 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-Embed-Code in den unteren Teil der Datei ein und klicken Sie auf Speichern. Sie finden den Embed-Code im Abschnitt Startvorlagen.
Das Add-To-Basket-Popup wird nun 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 Embed-Code 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 Dropdown In die Website einfügen > Wählen Sie Ihre Plattform Shopify aus und kopieren Sie den Embed-Code.
- 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 Embed-Code 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 Embed-Code direkt vor dem schließenden
</body>-Tag ein. - Fügen Sie dem Embed-Code das Attribut
data-exit-intent="true"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 Textfelds, um den HTML-Code des Beitrags anzuzeigen.
- Fügen Sie den Embed-Code 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 Embed-Code 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 }}';">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.