Lightspeed

Recommendations

Automatiser og personaliser produkter på enhver side i Lightspeed.

Opret Design #

Recommendations vises som en slider som standard. Du kan enten bruge Design Editor til at konfigurere det 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 med, 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 hjælp af Liquid code.

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

Opret Element #

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

Gå til Recommendations > Element.
Klik på New Element.
Navngiv det beskrivende, f.eks. “Forside / Besøgende”.
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 til 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 vælg derefter “Code bewerken” i Geavanceerd-dropdown.

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

Plugin Setup #

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

my.clerk.io Setup #

Gå til Recommendations > Element.
Vælg det element, du ønsker at indsætte.
Åbn Insert into website fanen.
Vælg en af følgende muligheder:
- Bruger du injection kan du indsætte koden via en CSS selector.
- Bruger du 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 }}.
- Mærkeside: I collection.rain, omfavn mærkelogikken 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 dit Recommendations Design og Element i my.clerk.io, som du gerne vil tilføje til powerstep.
Find powerstep snippet-filen i Snippets-sektionen af dine temafiler, popup-buy.rain i dette eksempel. Indsæt embed-koden 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 som produkt- eller kategori-id’er. I disse tilfælde bliver de udfyldt i embed-koden, men vær sikker på, at det er de korrekte variabler du refererer til i din Lightspeed-portal.

Kurvside #

I my.clerk.io skal du oprette et Element med logikken Best Cross-Sell Products.
I Insert into website > Choose your platform-dropdownen skal du vælge Lightspeed og kopiere 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 skal du oprette et Element med logikken Visitor Recommendations.
Exit Intent tilføjes til din hovedskabelon, sandsynligvis custom.rain.
Placer Element embed-koden genereret i my.clerk.io lige inden 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 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.