Shoporama

Recommendations

Automatiser og personalisere 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 af produktlogikker, hvilket gør det muligt for dig at vise fuldautomatiserede produkter på enhver side.

Denne artikel forklarer, hvordan du kommer i gang med at bruge et Clerk.js-setup i Shoporama.

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

Slider-opsætning #

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

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

Opret design #

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

Du kan enten bruge Design-editoren til at konfigurere det visuelt, eller bruge kode-designs.

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

Design-editor #

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

  2. Vælg Product Slider

  3. Fra listen over designtemplates vælger du den, du vil starte med.

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

  5. Lav de ønskede ændringer til designet.

Kode-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 kode-design fra bunden ved hjælp af Liquid code.

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

Opret indhold #

Dette indeholder alle indstillinger, 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 oprette.

  1. Gå til Recommendations > Sliders.

  2. Klik på New Content.

  3. Giv det et beskrivende navn. Vi anbefaler at navngive det efter siden og logikken, du vil bruge. F.eks. “Forside / Visitor Recommendations”.

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

  5. I Design vælger du det design, du har oprettet, fra dropdown, og vælger 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 at bruge en CSS-selector.

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

  3. Vælg den mulighed, der er nemmest for dig.

  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 synkronisering, gå til my.clerk.io > Data > Configuration.

my.clerk.io setup #

  1. Gå til Recommendations > Sliders.

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

  3. Åbn fanen Insert into website.

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

  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-template/CMS-blok efter behov.

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

Sider #

Herunder 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 forside-template/CMS-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 Shoporama, og kopiér embedkoden.

  3. Gå til Shoporamas temafiler, og find filen, der genererer dine kategorisider. Dette er oftest 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 2 Sliders 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 hver af dem og kopiér embedkoderne.

  3. I Shoporamas temafiler, find filen, der genererer dine produktsider. Dette er oftest 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 en Slider 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 temafiler, og find filen, der genererer dine kurvsider. Dette er oftest Settings > … > Temaer > basket.html.

  4. Indsæt embedkoden et sted under kurvvarer 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 en Slider 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 kode-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 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.