Mystore

Recommendations

Automatiser og personaliser produkter på enhver side i Mystore

Automatiser og personaliser 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 fuldt automatiserede produkter på enhver side.

Denne artikel forklarer, hvordan du kommer i gang med at bruge 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 Elements, der refererer til et Design. Herunder finder du den grundlæggende vejledning til opsætning af et Element.

Hvis du følger trinene i my.clerk.io > Settings > Setup Guides, oprettes Elements automatisk ud fra vores Best Practices.

Opret design #

Recommendations vises som standard som en slider. Dette 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 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 ønskede skabelon fra listen over designskabeloner.

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

  5. Foretag 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 den et navn og klik på Create design.

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

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

Opret Element #

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

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

  1. Gå til Recommendations > Elements.

  2. Klik på New Element.

  3. Giv det et beskrivende navn. Vi anbefaler at navngive det efter siden og logikken, du vil bruge. For eksempel “Home Page / Visitor Recommendations”.

  4. I Element type, vælg den produktlogik, du vil 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 dropdownen 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:

    • Brug af injection gør det muligt at 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 lettest for dig at bruge.

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

  5. For embedded code på Mystore er typiske placeringer:

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

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

    • Kategori-side: 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 der skal bruges 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/blok.

Kategori-side #

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

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

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

Produktside #

  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-dropdownen vælges Mystore for dem begge, og embedkoderne kopieres.

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

Add-to-basket-trin #

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

  2. Giv det 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 Elements, du vil vise på Powerstep.

    2. Indsæt Powerstep-embedkoden i din pop-up/side og trig den, når et produkt lægges i kurven.

Kurvside #

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

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

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

Exit intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.

  2. Tilføj følgende nær slutningen af dit layout/skabelon, 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-kode #

Denne skabelon vil vise en standard-slider med almindelig produktinformation, som du kan tilpasse efter 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.