ideal.shop

Recommendations

Automatisér og personalisér produkter på enhver side.

Clerk.io tilbyder mere end 23 forskellige typer af 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 efter færdiggørelsen af ideal.shop opsætningen.

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

Slideropsætning #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor er den grundlæggende vejledning til at opsætte et Element.

Følger du trinene i my.clerk.io > Settings > Setup Guides oprettes Elements automatisk til vores Best Practices.

Opret Design #

Recommendations vises som en slider som standard. 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 kode-designs.

Et design kan genbruges til et vilkårligt antal Recommendations-elementer, du opretter.

Design Editor #

Gå til Recommendations > Designs og klik på New Design.
Vælg Product Slider
Fra listen over designtemplates vælg den, du ønsker at starte med.
Giv det et navn og klik på Create design.
Foretag eventuelle ændringer i designet.

Code Design #

Gå til Recommendations > Designs og klik på New Design.
Vælg Other designs > Blank > Code.
Giv det et navn og klik på Create design.
Opret et kodebaseret design fra bunden ved at bruge Liquid kode.

Hvis du vil have et startdesign, kan du se Slider-templaten længere nede.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gør det muligt at indlejre det på din hjemmeside. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

Gå til Recommendations > Elements.
Klik på New Element.
Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
I Element type, vælg den produktlogik, du vil bruge fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
I Design vælg det design, du har oprettet, fra dropdown-menuen, og vælg hvor mange produkter, du vil vise.
Klik på Save øverst på skærmen.

Tilføj til hjemmeside #

Åbn fanen Insert into website.
Her har du to muligheder:
- Brug af injection gør det muligt at indsætte koden ved hjælp af en CSS-selector.
- Brug af indlejret kode gør det muligt at indsætte koden manuelt på din hjemmeside.
Vælg den mulighed, der er lettest for dig at bruge.
For indlejret kode, tilføj eventuel nødvendig frontend-logik, for at indsætte f.eks. et produkt- eller kategori-ID. Dette afhænger af den logik, du vælger.

Her er et komplet Recommendations-embedkodeeksempel med et eksempel på et produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Injection IDs #

Ved brug af injection kræver nogle recommendations-logikker et produkt- eller kategori-ID fra den aktuelle side. ID’erne skal matche dem, der er importeret i dit feed.

Produkt og Kategori #

data-page-id attributten på body ser ud til at indeholde det aktuelle produkt-ID på produktsider og det aktuelle kategori-ID på kategorisider. Tjek begge sidetyper på din webshop, før du bruger disse indstillinger.

Side	ID CSS selector	ID attribut
Produktside	`body`	`data-page-id`
Kategoriside	`body`	`data-page-id`

I Elementets Insert into website > Using injection indstillinger, brug disse værdier til relevante produkt- eller kategori-ID felter. Konfigurer placeringsselektoren separat for at vælge, hvor recommendations vises.

Sider #

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

Forside #

I my.clerk.io, opret 3 Elements med følgende logikker:
- Visitor Recommendations
- Bestsellers
- Hot Products
Indsæt embedkoderne i din forsidetemplate/-blok.

Kategoriside #

I my.clerk.io, opret et Element med logikken Bestsellers In Category.
Kopiér embedkoden og indsæt den i din kategorisidetemplate.
Sæt data-category til det aktuelle kategori-ID.

Produktside #

I my.clerk.io, opret 2 Elements med følgende logikker:
- Best Alternative Products
- Best Cross-Sell Products
Kopiér embedkoderne og indsæt dem på din produktsidetemplate.
Sæt data-products til det aktuelle produkt-ID.

Kurvside #

I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
Kopiér embedkoden og indsæt den i din kurvsidetemplate.
Sæt data-products til kurvens produkt-ID’er.

Exit Intent #

I my.clerk.io, opret et Element med logikken Visitor Recommendations.
Kopiér embedkoden og indsæt den lige før den afsluttende </body> tag i din hovedtemplatefil.
Tilføj data-exit-intent="true" til embedkoden.

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

Startskabeloner #

Hvis du vil bruge kode-designs, kan disse skabeloner hjælpe dig i gang.

Slider-kode #

Denne skabelon vil vise en standard slider med forskellige 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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-add-to-cart, .clerk-add-to-cart: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;

    cursor: pointer;
}

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

    cursor: pointer;
}

@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.