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 vollständig automatisierte Produkte auf jeder Seite anzeigen können.

Dieser Artikel erklärt, wie Sie mit einem Clerk.js Setup in Shoporama starten.

Unsere vollständigen Best Practices finden Sie in diesem Artikel darüber, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

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

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

Design erstellen #

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

Sie können entweder den Design Editor zur visuellen Konfiguration verwenden oder Code Designs nutzen.

Ein Design kann für jede beliebige Anzahl von Recommendations-Elementen wiederverwendet werden, die Sie erstellen.

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 das gewünschte Template aus.

  4. Geben Sie ihm einen Namen 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 ihm einen Namen und klicken Sie auf Create design.

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

Wenn Sie ein Startdesign benötigen, schauen Sie sich das Slider-Template weiter unten an.

Element erstellen #

Dies enthält alle Einstellungen, die zum Anzeigen der Recommendations verwendet werden, und macht sie in 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 New Element.

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

  4. Wählen Sie unter Element type, die Produktlogik aus dem Dropdown-Menü, die Sie verwenden möchten. Eine Übersicht aller Produktlogiken finden Sie hier.

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

  6. Klicken Sie oben auf dem Bildschirm auf Save.

Zu Website hinzufügen #

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

  1. Öffnen Sie den Reiter Insert into website.

  2. Hier haben Sie zwei Möglichkeiten:

    • Die Verwendung von Injection ermöglicht es Ihnen, den Code mit einem CSS-Selektor einzufügen.

    • Mit Embedded Code können Sie den Code manuell in Ihre Website einfügen.

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

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

Um Synch-Details hinzuzufügen oder eine Synchronisierung zu starten, gehen Sie zu my.clerk.io > Data > Configuration.

my.clerk.io Setup #

  1. Gehen Sie zu Recommendations > Elements.

  2. Wählen Sie das Element aus, das Sie einfügen möchten.

  3. Öffnen Sie den Tab 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: Fügen Sie im Homepage-Template/CMS-Block wie gewünscht ein.

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

Seiten #

Nachfolgend sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen und welche Typen Sie zur Einhaltung unserer Best Practices verwenden sollten.

Startseite #

  1. Erstellen Sie in my.clerk.io 3 Elements mit folgenden Logics:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

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

Kategorieseite #

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

  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 finden Sie die Datei, die Ihre Kategorieseiten erzeugt. Dies ist meist Settings > … > Temaer > category.html.

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

Produktseite #

  1. Erstellen Sie in my.clerk.io 2 Elements mit folgenden Logics:

    • Best Alternative Products
    • Best Cross-Sell Products

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

  3. Suchen Sie in den Shoporama-Theme-Dateien die Datei, die Ihre Produktseiten erzeugt. Diese 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 ein Element 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 finden Sie die Datei, die Ihre Warenkorbseiten erzeugt. Meist ist das Settings > … > Temaer > basket.html.

  4. Fügen Sie den Embedcode unterhalb der Warenkorbelemente 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 ein Element 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>

Start-Templates #

Wenn Sie Code Designs verwenden möchten, können Sie mit diesen Vorlagen beginnen.

Slider-Code #

Diese Vorlage stellt einen Standardslider mit gängigen Produktinformationen dar, 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.