Shopify

Recommendations

Anbefalinger

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise fuldstændig automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med at bruge en Clerk.js opsætning i Shopify.

For vores fulde bedste praksis, læs denne artikel om, hvilke anbefalinger du skal bruge.

Indholdsopsætning #

Anbefalinger oprettes med Indhold blokke, der refererer til et design. Nedenfor er den grundlæggende vejledning til opsætning af en indholdsblok.

Følg trinene i my.clerk.io > Indstillinger > Opsætningsvejledninger for automatisk at oprette indholdsblokkene til vores bedste praksis.

Opret design #

Anbefalinger vises som en slider som standard. Dette 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 kode designs.

Et design kan genbruges til et vilkårligt antal anbefalingsindhold, du opretter.

Design Editor #

  1. Gå til Anbefalinger > Designs og klik Nyt design.
  2. Vælg Produkt slider
  3. Fra listen over designtemplates, vælg den, du vil starte med.
  4. Giv det et navn og klik Opret design.
  5. Foretag de ændringer, du ønsker til designet.

Kodedesign #

  1. Gå til Anbefalinger > Designs og klik Nyt design.
  2. Vælg Andre designs > Blank > Kode.
  3. Giv det et navn og klik Opret design.
  4. Opret et kodedesign fra bunden ved hjælp af Liquid kode.

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

Opret indhold #

Dette indeholder alle indstillinger, der bruges til at vise anbefalingerne og gøre dem indlejrede på dit website. Følg disse trin for hver anbefalingsbanner, du ønsker at oprette.

  1. Gå til Anbefalinger > Indhold.
  2. Klik Nyt indhold.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på den side og logik, du ønsker at bruge. F.eks. “Forside / Besøgeranbefalinger”.
  4. I Indholdstype, vælg den produktlogik, du ønsker at bruge fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
  5. I Design vælg det design, du har oprettet fra dropdown-menuen, og vælg antallet af produkter, du ønsker at vise.
  6. Klik Gem øverst på skærmen.

Tilføj til hjemmeside #

  1. Åbn Indsæt i hjemmeside fanen.
  2. Her har du to muligheder:
    • Ved at bruge injektion kan du indsætte koden ved hjælp af en CSS-vælger.
    • Ved at bruge indlejret kode kan du indsætte koden manuelt på dit website.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  4. For nogle logikker vil du se Vælg din platform dropdown-menuen. Vælg Shopify i disse tilfælde. Dette vil forudfylde indlejringskoden med de korrekte Shopify shortcodes.

Her er et komplet eksempel på indlejringskode til anbefalinger, med en Shopify shortcode til indsættelse af produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products="[{{ product.id }}]">
</span>

Sider #

Indsæt kodeeksempel
Nedenfor er de specifikke sider, hvor du skal indsætte anbefalinger, og hvilke typer du skal bruge, for at følge vores bedste praksis. Shopify har mere end 100 temaer, så filplaceringerne kan ikke altid være præcise.

Snippets skal indsættes i temaets HTML-filer, som normalt findes i Shopify Admin > Online Store > Themes. Alternativt kan du injicere resultater, hvis du kender CSS-vælgerne for de elementer, du ønsker at indsætte resultater i.

Forside #

  1. I my.clerk.io, opret 3 indholdsblokke med følgende logikker:
    • Besøgeranbefalinger
    • Bedst sælgende
    • Hotte produkter
  2. I Shopify, gå til Online Store > Themes > Tilpas
  3. Klik Tilføj sektion > Egen Liquid.
  4. Indsæt indlejringskoderne i Egen Liquid boksen.
  5. Klik Gem.

Hvis du vil vise alle bannere oven på hinanden, indsæt alle indlejringskoder i den samme boks. Hvis du ønsker at splitte dem over forsiden, skal du blot følge ovenstående proces flere gange.

Kategori side #

  1. I my.clerk.io, opret en indholdsblok med logikken Bedst sælgende i kategori.
  2. I Indsæt i hjemmeside > Vælg din platform dropdown-menuen, vælg Shopify, og kopier indlejringskoden.
  3. Gå til Shopifys tema-filer og find den fil, der genererer dine samlingssider. Dette er oftest Sections > main-collection-product-grid.liquid.
  4. Indsæt indlejringskoden et sted under titlen og beskrivelsen. Afhængigt af dit tema vil denne placering variere.

Produkt side #

  1. I my.clerk.io, opret 2 indholdsblokke med følgende logikker:
    • Bedste alternative produkter
    • Bedste krydssalg produkter
  2. I Indsæt i hjemmeside > Vælg din platform dropdown-menuen, vælg Shopify for hver af dem og kopier indlejringskoderne.
  3. I Shopify tema-filerne, find den fil, der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
  4. Indsæt indlejringskoderne et sted under produktbeskrivelsen. Afhængigt af dit tema vil denne placering variere.

Tilføj-til-kurv trin #

  1. I my.clerk.io, opret en indholdsblok med logikken Bedste krydssalg produkter.
  2. Giv det navnet “Tilføj-til-kurv / Andre har også købt”. Dette er vigtigt for, at indlejringskoden fungerer korrekt.
  3. Klik Gem øverst på siden.
  4. I Shopify tema-filerne, find den fil, der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
  5. Indsæt indlejringskoden for Tilføj-til-kurv i bunden af filen og klik Gem. Du kan finde indlejringskoden i sektionen Startskabeloner.

Popup-vinduet for Tilføj-til-kurv vises nu, når en kunde tilføjer et produkt til deres kurv fra produktsiden.

Hvis det ikke gør, er det sandsynligvis fordi din tilføj-til-kurv knap har en anden klasse eller ID. Inspicer din knap og erstat .product-form__cart-submit i indlejringskoden med klassen/ID’en for din knap.

Kurv side #

  1. I my.clerk.io, opret en indholdsblok med logikken Bedste krydssalg produkter.
  2. I Indsæt i hjemmeside > Vælg din platform dropdown-menuen, vælg Shopify, og kopier indlejringskoden.
  3. Gå til Shopifys tema-filer og find den fil, der genererer dine kurvsider. Dette er oftest Sections > main-cart-footer.liquid.
  4. Indsæt indlejringskoden et sted under kurvartiklerne og checkout-knappen, for eksempel lige før {% schema %} tagget.

Exit Intent #

  1. I my.clerk.io, opret en indholdsblok med logikken Besøgeranbefalinger.
  2. Gå til Shopifys tema-filer og find den primære tema-fil. Dette er oftest Layout > theme.liquid.
  3. Indsæt indlejringskoden lige før den afsluttende </body> tag.
  4. Tilføj data-exit-intent="true" attributten til indlejringskoden. Her er et eksempel på, hvordan det skal se ud:
<span 
  class="clerk" 
  data-template="@exit-intent-visitor-recommendations" 
  data-exit-intent="true">
</span>

Efter at have tilføjet dette, vil Exit Intent-popupvinduet vises, når en kunde holder musen over adresselinjen i deres browser.

Blog side #

  1. I my.clerk.io, opret en indholdsblok med logikken Produkter relateret til en side.
  2. I Shopify, gå til Online Store > Blogindlæg.
  3. Klik på det indlæg, du ønsker at tilføje anbefalinger til.
  4. Klik på <> knappen i øverste højre hjørne af tekstboksen for at se HTML’en af indlægget.
  5. Indsæt indlejringskoden et sted i indlægget, hvor det er naturligt at vise anbefalinger, og erstat INSERT_PAGE_ID_HERE med side-ID’en for indlægget. Du kan finde dette ID i URL’en for indlægget.

Startskabeloner #

Hvis du vil bruge kodedesigns, kan disse skabeloner hjælpe dig i gang.

Slider kode #

Denne skabelon vil gengive 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">På udsalg</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">Udsolgt</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Tilføj til kurv</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-add-to-cart, .clerk-add-to-cart: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%;
    }
}

Tilføj-til-kurv kode #

Denne indlejringskode skal indsættes i bunden af produkt side tema filen. Den vil vise en popup med en slider af produkter, når en kunde tilføjer et produkt til deres kurv. Den kan tilpasses efter behov.

HTML #

<script>
    document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '.product-form__submit';
    const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
    const clerkPowerstep = document.getElementById('clerk_powerstep');

    document.querySelector(buyBtn).addEventListener('click', open_powerstep);
    
    function open_powerstep() {   
        Clerk('content', '.clerk-powerstep-recommendations');

        clerkPowerstep.style.display = 'block';
        clerkPowerstep.style.padding = '5px 15px';
        clerkPowerstep.classList.toggle('animate_top');

        setTimeout(function(){
            
            document.querySelector(prodPage).addEventListener('click', close_powerstep);
            document.getElementsByTagName('header')[0].addEventListener( 'click', close_powerstep );
            
        }, 500);
    }

    });

    function close_powerstep() {
        var clerkPowerstep = document.getElementById('clerk_powerstep');
        //window.location.reload();
        clerkPowerstep.style.display = 'none';    
    }
</script>
<div style="display: none;" id="clerk_powerstep">
    <span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
    <div class="clerk_powerstep_wrap">
        <div class="clerk_powerstep_header">
        <h2>Du har tilføjet <b><u>{{ product.title }}</u></b> til din kurv.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="Du har tilføjet <b><u>{{ product.title }}</u></b> til din kurv.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Fortsæt til checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Fortsæt med at shoppe</button>
        </div>
        <br>
        <span class="clerk-powerstep-recommendations" 
            data-template="@add-to-basket-others-also-bought" 
            data-products="[{{product.id}}]">
        </span>
    </div>
</div>

<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !important;
    }
    #clerk_powerstep {
        width: clamp(45ch, 50%, 100ch) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0px !important;
        border: 3px solid #888 !important;
        border-radius: 2px !important;
        position: fixed;
        top: -100%;
        z-index: 999;
        display: none;
        background-color: white;
        box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    #clerk_powerstep h2 {
        text-align: center;
    }

    .clerk_powerstep_image {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .clerk_powerstep_image img {
        object-fit: contain;
        max-height: 240px;
        height: 25vh;
        margin: auto;
    }

    .clerk-popup-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-family: Arial;
        font-size: 32px;
        line-height: 1;
        color: gray;
        z-index: 2;
        padding: 3px;
    }
    .clerk_powerstep_header {
        position: relative;
    }

    .clerk_powerstep_wrap {
        position: relative;
        overflow-y: scroll;
        overflow-y: overlay;
        max-height: 80vh;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .clerk_powerstep_wrap::-webkit-scrollbar {
      display: none;
    }
    .clerk_powerstep_actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .clerk_powerstep_actions button {
        margin: 0 0 10px 0;
    }

    @media only screen and (max-width: 800px){
        .clerk_powerstep_actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
</style>

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.