Shoporama

Recommendations

Automatiser og personalisere produkter på enhver side i Shoporama

Automatiser og personaliser produkter på enhver side i Shoporama. Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise fuldt automatiserede produkter på enhver side.

Denne artikel forklarer, hvordan du kommer i gang, når du bruger en Clerk.js setup 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 refererer til et Design. Nedenfor er den grundlæggende guide til opsætning af et Element.

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

Opret design #

Recommendations vises som udgangspunkt som en slider. Dette gør det muligt for kunder 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 genbruges for 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 designskabelon på listen, som du vil starte med.

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

  5. Lav de ændringer du ønsker 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 code design fra bunden ved hjælp af Liquid code.

Hvis du ønsker et startdesign, kan du se Slider template længere nede.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gøre det indlejringsbart på din hjemmeside.

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

  1. Gå til Recommendations > Elements.

  2. Klik på New Element.

  3. Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på siden og logikken, 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 har oprettet, fra dropdown-menuen, og vælg antallet af produkter, du vil 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:

    • Ved at bruge injection kan du indsætte koden ved hjælp af en CSS-selector.

    • Ved at bruge embedded code kan du indsætte koden manuelt på din hjemmeside.

  3. Vælg den mulighed, 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 sync-detaljer eller starte en sync, 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:

    • Ved at bruge injection indsættes koden ved hjælp af en CSS-selector.

    • Ved at bruge embedded code indsættes koden manuelt.

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

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

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

    • Kurv-side: 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 forsidelayout/CMS-blok efter behov.

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

Sider #

Nedenfor finder du 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.

Kategori-side #

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

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

  3. Gå til Shoporamas temafiler og find den fil, der genererer dine Kategori-sider. Det er som oftest Settings > … > Temaer > category.html.

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

Produkt-side #

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

    • Best Alternative Products
    • Best Cross-Sell Products

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

  3. I Shoporamas temafiler skal du finde den fil, der genererer dine produktsider. Det er som oftest Settings > … > Temaer > product.html.

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

Kurv-side #

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

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

  3. Gå til Shoporamas temafiler og find den fil, der genererer din kurv-side. Det er som oftest Settings > … > Temaer > basket.html.

  4. Indsæt embedkoden et sted under kurvartiklerne og checkout-knappen. Sæt data-products til [{section name=\"i\" loop=$basket}{$basket[i].id}{if ! $smarty.section.i.last},{/if}{/section}].

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 ønsker at bruge code designs, kan disse skabeloner hjælpe dig i gang.

Slider code #

Denne skabelon viser en standard slider med almindelige produktoplysninger, som du kan tilpasse til dine 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.