Lightspeed

Recommendations

Automatiser og personaliser produkter på enhver side i Lightspeed.

Opret Design #

Recommendations vises som standard som en slider. Du kan enten bruge Design Editor til at konfigurere den visuelt, eller bruge code designs.

Design Editor #

Gå til Recommendations > Designs og klik på New Design.
Vælg Product Slider
Vælg en skabelon at starte fra, giv den et navn og klik på Create design.
Tilpas designet efter behov.

Code Design #

Gå til Recommendations > Designs og klik på New Design.
Vælg Other designs > Blank > With code.
Giv den et navn og klik på Create design.
Opret et code design fra bunden ved brug af Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations-slideren og gøre den indlejringbar.

Gå til Recommendations > Element.
Klik på New Element.
Giv det et beskrivende navn, f.eks. “Home / Visitor”.
I Element type, vælg den produktlogik der skal bruges.
I Design, vælg det design du har oprettet og vælg antal produkter.
Klik på Save.

Tilføj til Website #

For at tilføje Clerk Recommendations på dit website, har du to muligheder: Injection og Embedded code.

For at få adgang til dine temafiler i Lightspeed, klik på “Design” i menuen til venstre, og derefter “Code bewerken” i Geavanceerd-dropdownen.

For at tilføje synkroniseringsdetaljer eller starte en synkronisering, gå til my.clerk.io > Data > Configuration.

Plugin Setup #

Ikke tilgængelig for Lightspeed. Brug my.clerk.io Setup nedenfor.

my.clerk.io Setup #

Gå til Recommendations > Element.
Vælg det element, du ønsker at indsætte.
Åbn fanen Insert into website.
Vælg en af følgende:
- Ved at bruge injection kan du indsætte koden vha. en CSS selector.
- Ved at bruge embedded code kan du indsætte koden manuelt på dit website.
For embedded code på Lightspeed er typiske placeringer:
- Forside: snippets/homepage.rain.
- Produktside: product.rain og sæt data-products til [{{product.id}}].
- Kategoriside: collection.rain og sæt data-category til {{ collection.category_id }}.
- Brand-side: I collection.rain, omslut brand-logik i en {% if collection.category_id %} ... {% else %} ... {% endif %} for at skelne.
- Kurvside: fixed.rain med et IF omkring embed-koden: {% if 'cart' in template %} … {% endif %} og sæt data-products til:
```
data-products="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"
```

Powerstep #

Opret først det Recommendations Design og Element i my.clerk.io, du vil tilføje til powerstep.
Find powerstep-snippet-filen i Snippets-sektionen af dine temafiler, popup-buy.rain i dette eksempel. Indsæt den embed-kode, der er genereret fra dit Element her:

<div style="display: none;" id="clerk_powerstep">
  <div class="clerk_powerstep_wrap">
    <span class="clerk-powerstep-recommendations"
      data-template="@power-step-others-also-bought"
      data-products="[{{product.id}}]">
    </span>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    var buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.productCartButton';
    document.querySelector(buyBtn).addEventListener('click', function(){
      Clerk('content', '.clerk-powerstep-recommendations');
      document.getElementById('clerk_powerstep').style.display = 'block';
    });
  });
</script>

Nogle embed-koder kræver variabler såsom produkt- eller kategori-ID’er. I disse tilfælde vil de blive udfyldt i embed-koden, men vær sikker på at dobbelttjekke, at dette er de korrekte variabler at referere til i din Lightspeed portal.

Kurvside #

I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
I dropdownen Insert into website > Choose your platform, vælg Lightspeed og kopier embedkoden.
Indsæt embedkoden i din kurvside-skabelon (f.eks. fixed.rain med et IF omkring embed-koden: {% if 'cart' in template %} … {% endif %}). Sæt data-products til kurvens produkt-ID’er.

Exit Intent #

I my.clerk.io, opret et Element med logikken Visitor Recommendations.
Exit Intent tilføjes til din hovedtema-fil, sandsynligvis custom.rain.
Placer Element embed-koden, der er genereret i my.clerk.io, lige før den afsluttende -tag. Hvis du har Live Search implementeret, skal Exit Intent-koden placeres lige efter denne.
Tilføj data-exit-intent="true" til embedkoden.

<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 produktinformationer, som du kan tilpasse efter 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.