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 fuldt automatiserede 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 skal bruge.

Slider-opsætning #

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

Følger du trinene i my.clerk.io > Settings > Setup Guides opretter automatisk de Elements, der bruges til vores Best Practices.

Opret Design #

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

Et design kan genbruges til ethvert antal Recommendations-elements, 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 designskabeloner den, du ønsker at 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 kode-design fra bunden ved at bruge Liquid code.

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

Opret Element #

Dette indeholder alle de 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 du navngiver det efter siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. I Element type, vælg den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
  5. I Design vælg det design, du har oprettet, i dropdown-menuen og vælg, hvor mange 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 injection til at indsætte koden ved hjælp af et CSS-selector.
    • Brug embedded code til at indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  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-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-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 injection til at indsætte koden vha. en CSS-selector.
    • Brug embedded code til at indsætte 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 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. Opret i my.clerk.io 3 Elements med følgende logikker:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i din forside-skabelon/blok.

Kategoriside #

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

Produktside #

  1. Opret i my.clerk.io 2 Elements med følgende logikker:
    • 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 kopiér embedkoderne.
  3. Indsæt embedkoderne i din produktside-skabelon, eller brug plugin-indstillingerne for at aktivere dem.

Add-To-Basket-trin #

  1. Opret i my.clerk.io 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 ved hjælp af 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.

Kurvside #

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

Exit Intent #

  1. Opret i my.clerk.io 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 indholdsnavnet. Gem.

Startskabeloner #

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

Slider-kode #

Denne skabelon viser en standard-slider med forskellige produktoplysninger, 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.