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 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 med Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger brugt til at vise Recommendations slideren og gøre den indlejringsbar.

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 Hjemmeside #

For at tilføje Clerk Recommendations på din hjemmeside 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-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 setup via my.clerk.io nedenfor.

my.clerk.io Setup #

Gå til Recommendations > Element.
Vælg det element, du vil indsætte.
Åbn Insert into website fanen.
Vælg en af følgende:
- Brug af injection giver dig mulighed for at indsætte koden via en CSS selector.
- Brug af embedded code giver dig mulighed for manuelt at indsætte koden på din hjemmeside.
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 }}.
- Brandside: I collection.rain, omslut brand-logik i en {% if collection.category_id %} ... {% else %} ... {% endif %} for at differentiere.
- Kurvside: fixed.rain med en IF omkring embedkoden: {% 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-snippetfilen i Snippets-sektionen af dine temafiler, popup-buy.rain i dette eksempel. Indsæt embedkoden 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 codes kræver variabler som produkt- eller kategori-ID’er. I disse tilfælde vil de være udfyldt i embedkoden, men dobbelttjek, at det er de korrekte variabler, du refererer til i dit Lightspeed-portal.

Kurvside #

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

Exit Intent #

Opret i my.clerk.io et Element med logikken Visitor Recommendations.
Exit Intent tilføjes til din hovedtema-fil, sandsynligvis custom.rain.
Placer Element-embedkoden genereret i my.clerk.io lige før lukningen af -tagget. Hvis du har implementeret Live Search, 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 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.