Shopware 6

Recommendations

Automatiser og personaliser produkter på enhver side i Shopware 6.

Clerk.io tilbyder mere end 23 forskellige typer af produktlogik, hvilket gør det muligt for dig at vise fuldautomatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang, når du bruger et Clerk.js-setup i Shopware 6.

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

Slider-opsætning #

Recommendations oprettes med Elements, der refererer til et Design. Herunder finder du den grundlæggende guide til opsætning af et Element.

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

Opret design #

Recommendations vises som en slider som standard. Dette giver kunder 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. Fra listen over designskabeloner vælger du den, du vil starte med.
  4. Giv det et navn og klik på Create design.
  5. Foretag de ønskede ændringer i designet.

Code 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 codedesign fra bunden ved hjælp af Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gør det muligt at indlejre det på din hjemmeside. Følg disse trin for hver Recommendations-banner, du vil oprette.

  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. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du vil bruge, fra dropdown-menuen. Du kan få et overblik over alle produktlogikker her.
  5. Under Design vælg det design, du har oprettet, fra dropdown-menuen, og vælg antallet af produkter, du ønsker at 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 via 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 Shopware 6 i disse tilfælde. Dette udfylder embedkoden med de korrekte Shopware 6-shortcodes.

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

Plugin-opsætning #

Brug Shopware 6 Clerk-plugin til at aktivere elements på nøglesider:

  1. Gå til Settings > System > Plugins og åbn Clerk.io > Config.
  2. Vælg den korrekte Sales Channel.
  3. Aktiver pr. sidetype og gem:
    • Product Page Settings
    • Category Settings
    • Cart Settings

my.clerk.io Opsætning #

  1. Gå til Recommendations > Elements.
  2. Vælg det element, du ønsker at indsætte.
  3. Åbn fanen Insert into website.
  4. Vælg en af følgende:
    • Brug af injection indsætter koden ved hjælp af en CSS-selector.
    • Brug af embedded code indsætter koden manuelt, f.eks. via Content > Shopping Experiences ved at tilføje en Raw HTML-blok til layoutet og indsætte embedkoden.

Nogle embedkoder kræver variabler som produkt- eller kategori-ID’er. I disse tilfælde indsættes de i embedkoden, men dobbelttjek at de matcher dine Shopware 6-variabler.

Sider #

Herunder er 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 Elements med følgende logikker:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i dit forside-tema/blok.

Kategori-side #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg Shopware 6, og kopier embedkoden.
  3. Indsæt embedkoden i dit kategori-side-tema eller brug plugin-indstillingerne for at aktivere det.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I dropdown-menuen Insert into website > Choose your platform vælg Shopware 6 for hver af dem og kopier embedkoderne.
  3. Indsæt embedkoderne i dit produktside-tema eller brug plugin-indstillingerne for at aktivere dem.

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 via Shopware 6-pluginet:
  5. Gå til Settings > System > Plugins og åbn Clerk.io > Config.
  6. Under Powerstep Settings, aktiver og vælg Page eller Popup, vælg indhold, og klik derefter på Save.

Kurv-side #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg Shopware 6, og kopier embedkoden.
  3. Indsæt embedkoden i dit kurvside-tema eller brug plugin-indstillingerne for at aktivere det.

Exit Intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.
  2. Aktiver via pluginet:
  3. Gå til Settings > System > Plugins og åbn Clerk.io > Config.
  4. Under Exit Intent Settings sæt Status til Enabled og angiv indholdets navn. Gem.

Startskabeloner #

Hvis du ønsker at bruge codedesigns, kan disse skabeloner hjælpe dig i gang.

Slider-kode #

Denne skabelon vil rendere en standard slider med forskellige produktinformationer, 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;

    cursor: pointer;
}

.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;

    cursor: pointer;
}

@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.