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 Produktempfehlungs-Logiken, sodass Sie komplett automatisierte Produkte auf jeder Seite anzeigen können.

Dieser Artikel erklärt, wie Sie beginnen, wenn Sie ein Clerk.js-Setup in Shoporama verwenden.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel, welche Recommendations verwendet werden sollten.

Slider-Einrichtung #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Unten finden Sie die grundlegende Anleitung zur Einrichtung eines Elements.

Wenn Sie die Schritte unter my.clerk.io > Einstellungen > Setup Guides befolgen, werden die Elements 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 ihn visuell zu konfigurieren, oder Code-Designs nutzen.

Ein Design kann für beliebig viele Recommendations-Elements wiederverwendet werden, die Sie erstellen.

Design-Editor #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf Neues Design.

  2. Wählen Sie Product Slider

  3. Wählen Sie aus der Liste der Designvorlagen die Vorlage, mit der Sie beginnen möchten.

  4. Geben Sie einen Namen ein und klicken Sie auf Design erstellen.

  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Recommendations > Designs und klicken Sie auf Neues Design.

  2. Wählen Sie Andere Designs > Blank > Code.

  3. Geben Sie einen Namen ein und klicken Sie auf Design erstellen.

  4. Erstellen Sie ein neues Code-Design von Grund auf mit Liquid Code.

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

Element erstellen #

Dies enthält alle Einstellungen zur Anzeige der Recommendations und macht diese auf Ihrer Website einbettbar.

Führen Sie diese Schritte für jedes Recommendations-Banner aus, das Sie erstellen möchten.

  1. Gehen Sie zu Recommendations > Elements.

  2. Klicken Sie auf Neues Element.

  3. Geben Sie einen beschreibenden Namen ein. Wir empfehlen, das Element auf Basis der Seite und der gewünschten Logik zu benennen, z.B.: “Home Page / Visitor Recommendations”.

  4. Wählen Sie in Elementtyp, die gewünschte Produktempfehlungs-Logik im Dropdown-Menü. Eine Übersicht aller Produktlogiken finden Sie hier.

  5. Wählen Sie im Dropdown-Menü Design das zuvor erstellte Design und die Anzahl der anzuzeigenden Produkte aus.

  6. Klicken Sie oben auf der Seite auf Speichern.

Zu Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website einzubinden, haben Sie zwei Möglichkeiten: Injection und Embedded-Code.

  1. Öffnen Sie den Tab In die Website einfügen.

  2. Hier haben Sie zwei Optionen:

    • Mit Injection fügen Sie den Code per CSS-Selektor ein.

    • Mit Embedded-Code können Sie den Code manuell auf Ihrer Website einfügen.

  3. Wählen Sie die für Sie einfachste Option.

  4. Bei einigen Logiken sehen Sie das Dropdown Plattform auswählen. Wählen Sie in diesen Fällen Shoporama aus. Dadurch werden die Shoporama-Shortcodes im Embedcode automatisch ausgefüllt.

Um Synchronisationsdetails hinzuzufügen oder eine Synchronisierung zu starten, gehen Sie zu my.clerk.io > Daten > Konfiguration.

my.clerk.io-Einrichtung #

  1. Gehen Sie zu Recommendations > Elements.

  2. Wählen Sie das gewünschte Element aus.

  3. Öffnen Sie den Tab In die Website einfügen.

  4. Wählen Sie eine der folgenden Optionen:

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

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

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

    • Warenkorbseite: Einstellungen > … > 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 das passende Homepage-Template/CMS-Block.

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

Seiten #

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

Homepage #

  1. Erstellen Sie in my.clerk.io drei Elements mit den folgenden Logiken:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

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

Kategorieseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.

  2. Wählen Sie im Dropdown In die Website einfügen > Plattform auswählen Shoporama und kopieren Sie den Embedcode.

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

  4. Fügen Sie den Embedcode unter der Überschrift und Beschreibung ein. Setzen Sie data-category auf <{$category->getCategoryId()}>.

Produktseite #

  1. Erstellen Sie in my.clerk.io zwei Elements mit den folgenden Logiken:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. Wählen Sie im Dropdown In die Website einfügen > Plattform auswählen für jedes von ihnen Shoporama und kopieren Sie die Embedcodes.

  3. Finden Sie in den Theme-Dateien von Shoporama die Datei, die Ihre Produktseiten generiert. Dies ist meistens Einstellungen > … > Temaer > product.html.

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

Warenkorbseite #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.

  2. Wählen Sie im Dropdown In die Website einfügen > Plattform auswählen Shoporama und kopieren Sie den Embedcode.

  3. Gehen Sie zu den Theme-Dateien von Shoporama und finden Sie die Datei, die Ihre Warenkorbseiten erstellt. Dies ist meistens Einstellungen > … > Temaer > basket.html.

  4. Fügen Sie den Embedcode unter den Warenkorb-Items und dem Checkout-Button ein. Setzen Sie data-products auf [<{strip}><{foreach from=$basket item=basket_item name=basket_loop}><{$basket_item.product_id}><{if !$smarty.foreach.basket_loop.last}>,<{/if}><{/foreach}><{/strip}>].

Exit Intent #

  1. Erstellen Sie in my.clerk.io ein Element mit der Logik 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 verwenden möchten, können Sie mit diesen Vorlagen loslegen.

Slider-Code #

Diese Vorlage zeigt einen Standard-Slider mit allgemeinen Produktinformationen, den 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.