Shoporama

Recommendations

Automatiser og personaliser produkter på enhver side i Shoporama

Automatisér og personalisér produkter på enhver side i Shoporama. Clerk.io tilbyder mere end 23 forskellige typer produktlogikker, hvilket gør det muligt for dig at vise fuldstændigt automatiserede produkter på enhver side.

Denne artikel forklarer, hvordan du kommer i gang ved brug af en Clerk.js-opsætning i Shoporama.

For vores fulde Best Practices, læs denne artikel om hvilke Recommendations du skal bruge.

Slider-opsætning #

Recommendations oprettes med Elements, der henviser til et Design. Nedenfor finder du den grundlæggende vejledning til opsætning af et Element.

Ved at følge trinnene i my.clerk.io > Settings > Setup Guides oprettes Elements automatisk for vores Best Practices.

Opret design #

Recommendations vises som standard som en slider. Dette gør det muligt for kunderne at se flere produkter med færre klik.

Du kan enten bruge Design Editor til at konfigurere det visuelt, eller bruge code designs.

Et design kan genanvendes til et vilkårligt antal Recommendations-elements, du opretter.

Design editor #

  1. Gå til Recommendations > Designs og klik på New Design.

  2. Vælg Product Slider

  3. Vælg den skabelon, du vil begynde med, fra listen over designskabeloner.

  4. Giv det et navn, og klik på Create design.

  5. Foretag eventuelle ønskede ændringer i designet.

Code design #

  1. Gå til Recommendations > Designs og klik på New Design.

  2. Vælg Other designs > Blank > Code.

  3. Giv det et navn, og klik på Create design.

  4. Opret et codedesign fra bunden ved at bruge Liquid code.

Hvis du vil have et designs udgangspunkt, kan du finde Slider template længere nede.

Opret Element #

Dette indeholder alle indstillingerne for at vise Recommendations, og gøre det muligt at indlejre det på din hjemmeside.

Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

  1. Gå til Recommendations > Elements.

  2. Klik på New Element.

  3. Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og den logik, du ønsker at bruge. F.eks. “Home Page / Visitor Recommendations”.

  4. I Element type, vælg den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se et overblik over alle product logics her.

  5. I Design vælg det design, du oprettede, fra dropdown-menuen, og vælg det antal produkter, du ønsker at vise.

  6. Klik på Save øverst på skærmen.

Tilføj til hjemmeside #

For at tilføje Clerk Recommendations på din hjemmeside har du to muligheder: Injection og Embedded code.

  1. Åbn fanen Insert into website.

  2. Her har du to muligheder:

    • Brug af injection giver dig mulighed for at indsætte koden ved at bruge en CSS-selector.

    • Brug af embedded code gør det muligt at indsætte koden manuelt på dit website.

  3. Vælg den løsning, der er nemmest for dig at bruge.

  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg Shoporama i disse tilfælde. Dette udfylder embedkoden med de korrekte Shoporama-shortcodes.

For at tilføje synkroniseringsdetaljer eller starte en synkronisering, gå til my.clerk.io > Data > Configuration.

my.clerk.io opsætning #

  1. Gå til Recommendations > Elements.

  2. Vælg det element, du vil indsætte.

  3. Åbn fanen Insert into website.

  4. Vælg en af følgende:

    • Brug af injection indsætter koden ved hjælp af en CSS-selector.

    • Brug af embedded code indsætter koden manuelt.

  5. For embedded code på Shoporama er typiske placeringer og filnavne:

    • Produktside: Settings > … > Temaer > product.html — sæt data-products til [<{$product->getProductId()}>].

    • Kategoriside: Settings > … > Temaer > category.html — sæt data-category til <{$category->getCategoryId()}>.

    • Kurvside: Settings > … > Temaer > basket.html — sæt data-products til [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

    • Forside: indsæt i din forside-skabelon/CMS-blok efter behov.

    • Global (Exit Intent): Settings > … > Temaer > global.html (indsæt før </body>).

Sider #

Nedenfor er de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du bør bruge, for at følge vores Best Practices.

Forside #

  1. I my.clerk.io, opret 3 Elements med følgende logikker:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Indsæt embedkoderne i din forside-skabelon/CMS-blok.

Kategoriside #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.

  2. I Insert into website > Choose your platform dropdown, vælg Shoporama, og kopier embedkoden.

  3. Gå til Shoporamas tema-filer og find filen, der genererer dine Kategorisider. Oftest er dette Settings > … > Temaer > category.html.

  4. Indsæt embedkoden et sted under titel og beskrivelse. Sæt data-category til <{$category->getCategoryId()}>.

Produktside #

  1. I my.clerk.io opret to Elements med følgende logikker:

    • Best Alternative Products
    • Best Cross-Sell Products

  2. I dropdown-menuen Insert into website > Choose your platform vælg Shoporama for begge og kopier embedkoderne.

  3. Find i Shoporama tema-filerne filen, der genererer produktsiderne. Oftest er dette Settings > … > Temaer > product.html.

  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Sæt data-products til [<{$product->getProductId()}>].

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.

  2. I dropdown-menuen Insert into website > Choose your platform vælg Shoporama, og kopier embedkoden.

  3. Gå til Shoporamas tema-filer og find filen, der genererer din Kurvside. Oftest er dette Settings > … > Temaer > basket.html.

  4. Indsæt embedkoden et sted under kurvprodukter og checkout-knappen. Sæt data-products til [<{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. I my.clerk.io, opret et Element med logikken Visitor Recommendations.

  2. Tilføj følgende nær slutningen af global.html, før </body>:

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

Startskabeloner #

Hvis du vil bruge codedesigns, kan disse skabeloner hjælpe dig med at komme i gang.

Slider-kode #

Denne skabelon viser en standardslider med almindelige produktoplysninger, som du kan tilpasse efter behov.

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

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.