Allgemein #
Clerk.io’s Recommendations können auf jeder Seite des Webshops installiert werden, um Kunden zu helfen, die richtigen Produkte zu finden.
Mit der Einrichtungsanleitung können Sie sehen, auf welchen Seiten Sie Empfehlungen installieren und welche Typen Sie verwenden sollten, um unsere Best Practice zum Laufen zu bringen.
Beginnen Sie im Hauptmenü mit einem Klick auf Einstieg:
Einen Standardentwurf erstellen #
Als erstes müssen Sie ein Standarddesign für Ihre Slider erstellen.
Sie können die Einrichtungsanleitung unter Empfehlungen - Erstellen Sie ein Design für Ihre Empfehlungs-Slider - verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.
Klicken Sie auf Veröffentlichen, wenn Sie mit dem Styling zufrieden sind.
Sie können dies später leicht ändern, unter Empfehlungen - Designs im linken Menü.
Auswählen, welche Empfehlungen verwendet werden sollen #
Jeder Schritt der Einrichtungsanleitung konzentriert sich auf eine bestimmte Seite des Webshops.
Sie enthalten Informationen über
Warum sind die Empfehlungen auf der Seite wichtig?.
Welche Empfehlungstypen verwendet werden sollen.
Wo sie auf der Seite platziert werden sollten.
Klicken Sie auf die einzelnen Arten von Empfehlungen, die Sie verwenden möchten, und folgen Sie den Anweisungen.
Bitte beachten Sie: Wenn Sie nur auf die einzelnen Empfehlungsblöcke klicken, **werden sie grün, als ob sie installiert wären - sind sie nicht_ - Sie müssen immer noch klicken und den Schritten folgen.
Einfügen von Empfehlungen #
Nachdem Sie ausgewählt haben, welche Empfehlungen Sie für eine Seite verwenden möchten, können Sie diese in Ihren Webshop einfügen.
Einfügen nur mit Embedcodes #
Shopify erlaubt nur eine Integration mit Embedcode:
Für jede Art von Empfehlungen kopieren Sie einfach den Embedcode und fügen Sie ihn in die Datei ein, die die entsprechende Seite in Ihrem Webshop erzeugt.
Klicken Sie auf die einzelnen Arten von Empfehlungen und folgen Sie den Schritten.
Hier ist ein Beispiel, wie Sie Empfehlungen zu Ihrer Produktseite hinzufügen:
Klicken Sie auf FERTIG
Sie können Ihren Inhalt später unter Empfehlungen - Inhalt im linken Menü leicht ändern.
Inhalt ändern
Nachdem Sie die Funktionen aktiviert haben, können Sie Clerk.io’s RECOMMENDATIONS Funktion in Ihrem Webshop sehen.
Einige Einbettungscodes benötigen Variablen wie Produkt oder Kategorie-IDs. In diesen Fällen wählen Sie einfach Shopify aus dem Dropdown-Menü Plattform wählen, bevor Sie den Einbettungscode kopieren.
Homepage #
Viele Themes in Shopify erlauben es Ihnen, Clerk.io’s Embedcodes durch benutzerdefiniertes HTML in Ihre Home-Page einzufügen. Einige Themes haben diese Option jedoch nicht. In diesem Fall müssen Sie einen eigenen Abschnitt hinzufügen, um dies zu ermöglichen. So machen Sie es:
Fügen Sie einen Clerk-Slider Abschnitt zu Ihrem Theme hinzu #
1. Loggen Sie sich in Ihr Shopify Backend ein.
2. Gehen Sie zu Online-Store -> Themes -> Aktionen -> Code bearbeiten.
3. Scrollen Sie zu Abschnitte und klicken Sie auf Neuen Abschnitt hinzufügen.
4. Nennen Sie Ihren Abschnitt Clerk-Slider und klicken Sie auf Abschnitt erstellen.
5. Ersetzen Sie alle Inhalte im Abschnitt durch den folgenden Code:
{%raw%}{{ section.settings.embedcode }}
{% schema %}
{
"name": "Clerk Slider",
"class": "clerk-slider",
"settings": [
{
"type": "html",
"id": "embedcode",
"label": "Embedcode"
}
],
"presets": [
{
"category": "Products",
"name": "Clerk Slider"
}
]
}
{% endschema %}
{%endraw%}
6. Klicken Sie auf Speichern.
Abschnitte mit Embedcodes in Ihre Homepage einfügen #
1. Gehen Sie zu Themes -> Anpassen
2. Klicken Sie auf Abschnitt hinzufügen und fügen Sie dann Clerk Slider: hinzu.
3. Fügen Sie den Embedcode der Empfehlungen ein, die Sie anzeigen möchten, und klicken Sie auf Speichern:.
Und das war’s! Sie können der Homepage so viele Abschnitte hinzufügen, wie Sie möchten, und sogar mehrere Einbettungscodes in einen einfügen, wenn Sie möchten.
Schritt “In den Warenkorb #
1. Melden Sie sich in Ihrem Shopify-Backend an und gehen Sie zu Onlineshop -> Themes -> Aktionen -> Code bearbeiten
2. Suchen Sie die Datei, die Ihre Produktseite generiert. Normalerweise ist dies Sektionen -> product-template.liquid oder main-product-liquid.
3. Kopieren Sie den folgenden Code an den unteren Rand der Datei:
<script>
document.addEventListener('DOMContentLoaded', function(){
const buyBtn = (document.querySelector('.product-form__add-button')) ? '.product-form__add-button' : '.product-form__add-button';
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');
const clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
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');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
clerkPowerstepOverlay.style.height = document.body.clientHeight + 'px';
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');
var clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
clerkPowerstep.classList.toggle('animate_top');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
//window.location.reload();
}
</script>
<style>
@keyframes top {
from {
top: -100%;
}
to {
top: 50%;
}
}
.animate_top {
animation: top 100 ease-in-out;
top: 50% !important;
}
.animate_overlay {
display:block !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;
}
}
/* from SB */
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
order:2;
align-content: center;
display: flex;
flex-wrap:wrap;
width:calc(100% - 100px - 180px - 20px);
}
#clerk_powerstep .clerk_powerstep_header h2 {
width:100%;
}
.clerk_powerstep_top h2 {
font-weight: 500;
font-size: 1.2em;
text-align: left;
margin-bottom: 10px;
text-transform: uppercase;
}
.clerk_powerstep_image {
height:0px;
width:0px;
order: 1;
display:none;
}
.clerk_powerstep_actions {
order: 3;
display: flex;
flex-direction: column;
justify-content:space-evenly;
width:180px;
}
.clerk_powerstep_actions button {
margin-bottom:0;
width: 100%;
}
.clerk_powerstep_actions .powerstep_continue {
background: #0d1e48;
border: 0px solid #000;
padding: 4px 12px;
color:#fff;
line-height: 26px;
font-size: 14px;
}
.clerk_powerstep_actions .powerstep_close {
padding: 3px 11px;
border: 1px solid #0d1e48;
color:#557b97;
line-height: 26px;
font-size: 14px;
}
#clerk_powerstep {
width: clamp(45ch, 80%, 200ch) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
@media (max-width: 1139px) {
#clerk_powerstep {
width: clamp(45ch, 90%, 100ch) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
width:calc(100% - 0px - 10px);
}
.clerk_powerstep_actions {
flex-direction:row;
gap:10px;
width:100%;
}
}
@media (max-width: 448px) {
#clerk_powerstep {
width: 90% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
width:calc(100% - 0px - 0px);
}
.clerk_powerstep_actions {
flex-direction:column;
gap:10px;
width:100%;
}
}
.clerk_powerstep_overlay {
width:100%;
background-color:rgba(0,0,0,.5);
position:absolute;
top:0;
left:0;
z-index:998;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
</style>
<div class="clerk_powerstep_overlay" style="display:none;"></div>
<div style="display: none;" id="clerk_powerstep">
<div class="clerk_powerstep_top">
<span class="clerk-popup-headline">
<h2>Almost there</h2>
</span>
<span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
</div>
<div class="clerk_powerstep_wrap">
<div class="clerk_powerstep_header">
<h2>You added "{{ product.title }}" 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>
</div>
<span class="clerk-powerstep-recommendations"
data-template="@power-step-others-also-bought"
data-products="[{{product.id}}]">
</span>
</div>
4. Ihre Powerstep-Seite sollte nun angezeigt werden, wenn ein Produkt in den Warenkorb gelegt wird.
Anpassen des Warenkorbtyps in Ihrem Shopify-Theme
Um den Einkaufswagentyp zu ändern, folgen Sie dem Pfad Theme > Anpassen > Theme-Einstellungen > Einkaufswagen > Einkaufswagentyp in Ihrem Shopify-Backend.
Wählen Sie in der Dropdown-Liste Warenkorb-Typ eine beliebige Option außer “Seite “. Die Optionen, die in der Dropdown-Liste erscheinen, hängen vom Thema Ihres Webshops ab und können unter anderem “Schublade” oder “Popup” enthalten.
Wenn Sie eine andere Option als “Seite” wählen, wird die Seite bei der Aktivierung Ihres Powerstep nicht neu geladen.
Nach dem Erstellen dieser beiden Dateien, dem Hinzufügen der beiden Zeilen zu Ihrer Theme-Datei und dem Aktualisieren Ihres Cart-Themes sollte Ihr Powerstep erscheinen.
**Was ist, wenn mein Powerstep nicht erscheint?
Wenn Ihr Powerstep nicht erscheint, liegt das wahrscheinlich daran, dass Ihre Schaltfläche “In den Warenkorb” eine andere Klasse oder ID hat. Überprüfen Sie Ihre Schaltfläche und fügen Sie die Klasse/Id der Klasse .product-form__cart-submit in den Code ein.
Exit Intent #
Das Exit Intent Popup reagiert, wenn ein Besucher versucht, Ihren Webshop zu verlassen. Es poppt auf und zeigt interessante Produkte an, wodurch ein Besucher, der den Shop verlässt, möglicherweise zu einem Käufer wird.
Einrichtung #
Befolgen Sie diese 5 Schritte:
Erstellen Sie einen neuen Website-Inhalt in my.clerk.io
Wählen Sie die richtige Logik dafür - wir empfehlen “Besucherempfehlungen “.
Kopieren Sie unter In die Website einfügen den bereitgestellten Einbettungscode und gehen Sie zu Ihrem Shopify-Backend.
Gehen Sie zu Online-Shop -> Themes -> Aktionen -> Code bearbeiten und fügen Sie den Code in die Datei ein, die alle Seiten generiert. Dies ist normalerweise _theme.liquid..
Fügen Sie hinzu: data-exit-intent=“true “ zu dem soeben eingefügten Code.
Beispiel
<span class="clerk"
data-template="@exit-intent"
data-exit-intent="true">
</span>
Eingefügt in theme.liquid_
Jetzt wird das Popup-Fenster mit der Beendigungsabsicht angezeigt, wenn jemand versucht, die Seite zu verlassen.
Denken Sie daran, Ihren Inhalt in Designs bei my.clerk.io zu gestalten.
Alle Empfehlungen, die data-exit-intent=“true “ enthalten, lösen das Exit Intent-Pop-up aus.
Dynamische Filterung #
Die Clerk.io Filter können direkt in den Einbettungscodes mit dem Attribut data-filter verwendet werden. Dies ermöglicht es Ihnen, dynamische Filter in der Logik basierend auf Variablen im Webshop zu erstellen.
Unten finden Sie einige Beispiele, aber Sie können dies auf viele andere Arten verwenden.
Beispiel 1: Anzeige von Produkten eines bestimmten Typs oder einer bestimmten Marke #
Sie können Schieberegler so filtern, dass nur Produkte desselben Typs oder derselben Marke/Hersteller angezeigt werden.
In diesem Fall müssen Sie Shopify’s Logik für die Abfrage des Typs verwenden. Dies ist normalerweise ’{%raw%}{{ product.type }}{%endraw%}’
Erinnern Sie sich: Es ist wichtig, einfache Anführungszeichen um die Variable herum zu setzen:
<span class="clerk"
data-template="@type-slider"
data-filter="type = '{%raw%}{{ product.type }}{%endraw%}'">
</span>
Beispiel 2: Anzeige von Produkten, bei denen ein Limit für den kostenlosen Versand erreicht wird: #
Angenommen, Ihr Shop verfügt über eine Variable namens {{ order.shipping_limit }}, die den Restbetrag enthält, der erforderlich ist, damit der Kunde die Grenze für den kostenlosen Versand erreicht, können Sie einen dynamischen Filter verwenden, der wie folgt aussieht, um nur Produkte anzuzeigen, die über diesem Preispunkt liegen:
<span class="clerk"
data-template="@complementary-to-basket"
data-filter="price > {%raw%}{{ order.shipping_limit }}{%endraw%}">
</span>