Mystore

Recommendations

Automatiser og personaliser produkter på enhver side i Mystore

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

Denne artikel forklarer, hvordan du kommer i gang, når du bruger et Clerk.js-setup i Mystore.

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

Slider-opsætning #

Recommendations oprettes med Sliders, der refererer til et Design. Nedenfor finder du den grundlæggende guide til opsætning af en Slider.

Når du følger trinnene i my.clerk.io > Settings > Setup Guides bliver Sliders automatisk oprettet efter vores Best Practices.

Opret design #

Recommendations vises som standard som en slider. Det giver kunderne mulighed for 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 til et hvilket som helst antal Recommendations-slidere, du laver.

Design editor #

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

  2. Vælg Product Slider

  3. Vælg den designtemplate, du ønsker at starte med.

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

  5. Foretag eventuelle æ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 codedesign fra bunden med Liquid code.

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

Opret indhold #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations og gøre dem indlejrede på dit website.

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

  1. Gå til Recommendations > Sliders.

  2. Klik på New Content.

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

  4. Under Content type, vælger du den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.

  5. Under Design vælger du det design, du har oprettet, fra dropdown-menuen og vælger hvor mange produkter, du ønsker at vise.

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

Tilføj til website #

For at tilføje Clerk Recommendations på dit website 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å dit website.

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

  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg Mystore i disse tilfælde. Dette udfylder embedkoden med de korrekte Mystore-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 > Sliders.

  2. Vælg den slider, du ønsker at indsætte.

  3. Åbn fanen Insert into website.

  4. Vælg en af følgende muligheder:

    • 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å Mystore er de typiske placeringer:

    • Forside: indsæt embedkoden i din forsidetemplate/-blok.

    • Produktside: sæt data-products til det aktuelle produkt-ID.

    • Kategoriside: sæt data-category til det aktuelle kategori-ID.

    • Kurvside: sæt data-products til kurvens produkt-ID’er.

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 Sliders med følgende logikker:

    • Visitor Recommendations
    • Bestsellers
    • Hot Products

  2. Indsæt embedkoderne i din forsidetemplate/-blok.

Kategoriside #

  1. I my.clerk.io, opret en Slider med logikken Bestsellers In Category.

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

  3. Indsæt embedkoden i din kategorisidetemplate. Sæt data-category til det aktuelle kategori-ID.

Produktside #

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

    • Best Alternative Products
    • Best Cross-Sell Products

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

  3. Indsæt embedkoderne i din produktsidetemplate. Sæt data-products til det aktuelle produkt-ID.

Tilføj-til-kurv-step #

  1. I my.clerk.io, opret en Slider med logikken Best Cross-Sell Products.

  2. Giv den navnet “Add-To-Basket / Others Also Bought”. Dette er vigtigt for at embedkoden fungerer korrekt.

  3. Klik på Save øverst på siden.

  4. For at aktivere add-to-basket Powerstep:

    1. Opret de Sliders, du ønsker vist på Powerstep.

    2. Indsæt Powerstep embedkoden i din popup/side og udløs den, når et produkt lægges i kurven.

Kurvside #

  1. I my.clerk.io, opret en Slider med logikken Best Cross-Sell Products.

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

  3. Indsæt embedkoden i din kurvsidetemplate. Sæt data-products til kurvens produkt-ID’er.

Exit intent #

  1. I my.clerk.io, opret en Slider med logikken Visitor Recommendations.

  2. Tilføj følgende tæt på slutningen af dit layout/template, før </body>:

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

Startskabeloner #

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

Slider-kode #

Denne skabelon vil vise 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.