Shopware 6

Recommendations

Automatiser og personalisere 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 fuldautomatiske 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 Setup #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor finder du den grundlæggende guide til at opsætte et Element.

Følger du trinene i my.clerk.io > Settings > Setup Guides vil du automatisk få oprettet Elements til vores Best Practices.

Opret Design #

Recommendations vises som standard som en slider. Dette gør det muligt for kunder at se flere produkter med færre klik. Du kan enten bruge Design Editor til at konfigurere det visuelt, eller benytte kode-designs.

Et design kan genbruges til alle de Recommendations-elementer, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den designtemplate, du vil starte med, fra listen.
  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 kode-design fra bunden med Liquid kode.

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

Opret Element #

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

  1. Gå til Recommendations > Elements.
  2. Klik på New Element.
  3. Giv det et sigende navn. Vi anbefaler at navngive det efter siden og logikken, du vil bruge. F.eks. “Forside / Visitor Recommendations”.
  4. Under Element type, vælger du den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
  5. Under Design vælger du det design, du oprettede, fra dropdown-menuen og vælger antallet af produkter, du vil vise.
  6. Klik på Save øverst på skærmen.

Tilføj til Website #

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 Choose your platform-dropdownen. Vælg Shopware 6 i disse tilfælde. Dette vil forudfylde embedkoden med de korrekte Shopware 6-shortcodes.

For at tilføje sync-detaljer eller starte en sync, gå til my.clerk.io > Data > Configuration.

Plugin Setup #

Brug Shopware 6 Clerk-pluginet 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 Setup #

  1. Gå til Recommendations > Elements.
  2. Vælg det element, du vil indsætte.
  3. Åbn fanen Insert into website.
  4. Vælg en af følgende muligheder:
    • 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 vil de blive udfyldt i embedkoden, men dobbelttjek, at de matcher dine Shopware 6-variabler.

Sider #

Nedenfor 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 din forsidetemplate/-blok.

Kategori-side #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I Insert into website > Choose your platform-dropdownen, vælg Shopware 6, og kopier embedkoden.
  3. Indsæt embedkoden i din kategorisidetemplate, eller brug plugin-indstillingerne til at aktivere den.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform-dropdownen, vælg Shopware 6 for hver af dem og kopier embedkoderne.
  3. Indsæt embedkoderne i dine produktsidetemplates 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 Side eller Popup, vælg indhold, og derefter Save.

Kurv-side #

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

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 indholdsnavn. Gem.

Startskabeloner #

Hvis du vil bruge kode-designs, kan disse skabeloner hjælpe dig i gang.

Slider-kode #

Denne skabelon vil vise en standard-slider med forskellig produktinformation, 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;

    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.