Shoporama

Recommendations

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Shoporama

Automatisieren und personalisieren Sie Produkte auf jeder Seite in Shoporama. Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie komplett automatisierte Produkte auf jeder Seite anzeigen lassen können.

Dieser Artikel erklärt, wie Sie mit einer Clerk.js-Integration in Shoporama beginnen.

Unsere vollständigen Best Practices finden Sie in diesem Artikel zu den passenden Recommendations.

Slider-Einrichtung #

Recommendations werden mit Sliders erstellt, die sich auf ein Design beziehen. Im Folgenden finden Sie die grundlegende Anleitung zum Einrichten eines Sliders.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides befolgen, werden die Sliders für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. So können Kunden mit weniger Klicks mehr Produkte sehen.

Sie können entweder den Design Editor für eine visuelle Konfiguration nutzen oder Code-Designs verwenden.

Ein Design kann für beliebig viele Recommendations-Slider wiederverwendet werden.

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 diejenige aus, mit der Sie starten möchten.

  4. Geben Sie einen Namen ein 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 ein Code-Design von Grund auf mit Liquid-Code.

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

Content erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations genutzt werden und macht sie auf Ihrer Website einbettbar.

Folgen Sie diesen Schritten für jeden Recommendations-Banner, den Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Sliders..

  2. Klicken Sie auf New Content..

  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, diesen nach Seite und Logik zu benennen, die Sie verwenden möchten, z. B. “Home Page / Visitor Recommendations”.

  4. Wählen Sie unter Content type, die gewünschte Produktlogik aus dem Dropdown aus. Einen Überblick über alle Product Logics finden Sie hier.

  5. Unter Design wählen Sie das von Ihnen erstellte Design aus dem Dropdown aus und entscheiden, wie viele Produkte angezeigt werden sollen.

  6. Klicken Sie oben auf der Seite auf Save.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website hinzuzufügen, haben Sie zwei Optionen: Injection und Embedded code.

  1. Öffnen Sie die Registerkarte Insert into website.

  2. Hier haben Sie zwei Möglichkeiten:

    • Mit Injection können Sie den Code mit einem CSS-Selektor einfügen.

    • Mit Embedded Code können Sie den Code manuell auf Ihrer Website einbinden.

  3. Wählen Sie die Option, die für Sie am praktischsten ist.

  4. Für einige Logics sehen Sie das Dropdown Choose your platform. Wählen Sie in diesen Fällen Shoporama. Dadurch wird der Embedcode mit den richtigen Shoporama-Shortcodes vorausgefüllt.

Um Sync-Details hinzuzufügen oder einen Sync zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io-Einrichtung #

  1. Gehen Sie zu Recommendations > Sliders..

  2. Wählen Sie den Content aus, den Sie einfügen möchten.

  3. Öffnen Sie die Registerkarte Insert into website.

  4. Wählen Sie eine der folgenden Optionen:

  5. Für Embedded Code auf Shoporama sind typische Platzierungen und Dateinamen:

    • Produktseite: Settings > … > Temaer > product.html — setzen Sie data-products auf [<{$product->getProductId()}>].

    • Kategorieseite: Settings > … > Temaer > category.html — setzen Sie data-category auf <{$category->getCategoryId()}>.

    • Warenkorbseite: Settings > … > Temaer > basket.html — setzen Sie data-products auf [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

    • Startseite: Einfügen in Ihrem Startseiten-Template/CMS-Block passend zum Aufbau.

    • Global (Exit Intent): Settings > … > Temaer > global.html (einfügen vor </body>).

Seiten #

Im Folgenden sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen und welche Typen zu nutzen sind, um unseren Best Practices zu folgen.

Startseite #

  1. Erstellen Sie in my.clerk.io drei Sliders mit den folgenden Logics:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Fügen Sie die Embedcodes in Ihr Startseiten-Template/CMS-Block ein.

Kategorieseite #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logic Bestsellers In Category.

  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shoporama und kopieren Sie den Embedcode.

  3. Gehen Sie zu den Theme-Dateien von Shoporama und suchen Sie die Datei, die Ihre Kategorieseiten generiert. Dies ist meist Settings > … > Temaer > category.html.

  4. Fügen Sie den Embedcode unterhalb von Titel und Beschreibung ein. Setzen Sie data-category auf <{$category->getCategoryId()}>.

Produktseite #

  1. Erstellen Sie in my.clerk.io zwei Sliders mit folgenden Logics:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. Wählen Sie im Dropdown Insert into website > Choose your platform für beide Shoporama aus und kopieren Sie die Embedcodes.

  3. Suchen Sie in den Shoporama-Theme-Dateien die Datei, die Ihre Produktseiten generiert. Dies ist meist Settings > … > Temaer > product.html.

  4. Fügen Sie die Embedcodes unterhalb der Produktbeschreibung ein. Setzen Sie data-products auf [<{$product->getProductId()}>].

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logic Best Cross-Sell Products.

  2. Wählen Sie im Dropdown Insert into website > Choose your platform Shoporama aus und kopieren Sie den Embedcode.

  3. Gehen Sie zu den Theme-Dateien von Shoporama und suchen Sie die Datei, die Ihre Warenkorbseiten generiert. Dies ist meist Settings > … > Temaer > basket.html.

  4. Fügen Sie den Embedcode unterhalb der Warenkorb-Artikel und des Checkout-Buttons ein. Setzen Sie data-products auf [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

Exit Intent #

  1. Erstellen Sie in my.clerk.io einen Slider mit der Logic Visitor Recommendations.

  2. Fügen Sie Folgendes am Ende von global.html, vor </body>, ein:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Startvorlagen #

Wenn Sie Code-Designs benutzen wollen, können Ihnen diese Vorlagen den Einstieg erleichtern.

Slider-Code #

Diese Vorlage rendert einen Standardslider mit den üblichen Produktinformationen, die Sie nach Ihren Bedürfnissen 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}


.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;
}

@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%;
    }
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.