Shopware 6

Recommendations

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

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

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

Slider-opsætning #

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

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides bliver Elements for vores Best Practices automatisk oprettet.

Opret Design #

Recommendations vises som standard som en slider. Det giver kunderne 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 så mange Recommendations-elementer, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg fra listen over designtemplates 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 at bruge Liquid code.

Hvis du ønsker et startdesign, så find Slider template længere nede.

Opret Content #

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

  1. Gå til Recommendations > Elements.
  2. Klik på New Content.
  3. Giv det et beskrivende navn. Vi anbefaler, at du navngiver det efter side og logik, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Content type, vælg den produktlogik, du ønsker at bruge fra dropdown-menuen. Du kan se et overblik over alle product logics her.
  5. Under Design vælg det design, du har oprettet, fra dropdown-menuen og vælg 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. Åben fanen Insert into website.
  2. Du har nu to muligheder:
    • Brug af injection gør det muligt at indsætte koden med en CSS-selektor.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er lettest for dig.
  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg Shopware 6 i disse tilfælde. Så udfyldes 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å vigtige sider:

  1. Gå til Settings > System > Plugins og åben 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 content, du ønsker at indsætte.
  3. Åben fanen Insert into website.
  4. Vælg en af følgende:
    • Brug af injection indsætter koden via en CSS-selektor.
    • Brug af embedded code indsætter koden manuelt, f.eks. via Content > Shopping Experiences ved at tilføje et Raw HTML-blok til layoutet og indsætte embedkoden.

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

Sider #

Nedenfor ses de specifikke sider, hvor du bør indsætte Recommendations, samt 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 logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkodene i dit forside-template/blok.

Kategoriside #

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

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform dropdown, vælg Shopware 6 for hver af dem, og kopier embedkodene.
  3. Indsæt embedkodene i dit produktside-template 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 i toppen af siden.
  4. For at aktivere add-to-basket Powerstep via Shopware 6 plugin:
  5. Gå til Settings > System > Plugins og åben Clerk.io > Config.
  6. Under Powerstep Settings, aktiver og vælg Page eller Popup, vælg content og klik derefter Save.

Kurvside #

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

Exit Intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.
  2. Aktivér via plugin:
  3. Gå til Settings > System > Plugins og åben Clerk.io > Config.
  4. Under Exit Intent Settings angiv Status til Enabled og indtast content-navnet. Gem.

Startskabeloner #

Hvis du ønsker at bruge code designs, kan disse templates hjælpe dig i gang.

Slider-kode #

Denne template vil vise en standard slider med forskellig produktinformation, som du kan tilpasse efter 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.