Shopify

Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogik, hvilket gør det muligt for dig at vise helt 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ætningsguider for automatisk at oprette indholdsblokke 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 #

Gå til Recommendations > Designs og klik New Design.
Vælg Product Slider
Vælg den designskabelon, du ønsker at starte med, fra listen.
Giv det et navn og klik Create design.
Foretag de ændringer, du ønsker i designet.

Kodedesign #

Gå til Recommendations > Designs og klik New Design.
Vælg Other designs > Blank > Code.
Giv det et navn og klik Create design.
Opret et kodedesign fra bunden ved hjælp af Liquid-kode.

Hvis du vil have 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 indlejrbare på dit websted. Følg disse trin for hver anbefalingsbanner, du ønsker at oprette.

Gå til Recommendations > Content.
Klik New Content.
Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på den side og logik, du ønsker at bruge. F.eks. “Hjemmeside / Besøgsanbefalinger”.
I Content type, vælg den produktlogik, du ønsker at bruge fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
I Design vælg det design, du har oprettet fra dropdown-menuen, og vælg antallet af produkter, du ønsker at vise.
Klik Save øverst på skærmen.

Tilføj til websted #

Åbn fanen Insert into website.
Her har du to muligheder:
- Brug af injektion giver dig mulighed for at indsætte koden ved hjælp af en CSS-vælger.
- Brug af indlejret kode giver dig mulighed for at indsætte koden manuelt på dit websted.
Vælg den mulighed, der er nemmest for dig at bruge.
For nogle logikker vil du se dropdown-menuen Choose your platform. 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 #

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 er måske ikke altid 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.

Hjemmeside #

I my.clerk.io, opret 3 indholdsblokke med følgende logikker:
- Besøgsanbefalinger
- Bedst sælgende
- Hot produkter
I Shopify, gå til Online Store > Themes > Customize
Klik Add Section > Custom Liquid.
Indsæt indlejringskoderne i Custom Liquid boksen.
Klik Save.

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

Kategori side #

I my.clerk.io, opret en indholdsblok med logikken Bestsellers In Category.
I dropdown-menuen Insert into website > Choose your platform, vælg Shopify, og kopier indlejringskoden.
Gå til Shopifys tema-filer og find den fil, der genererer dine samlingssider. Dette er oftest Sections > main-collection-product-grid.liquid.
Indsæt indlejringskoden et sted under titlen og beskrivelsen. Afhængigt af dit tema vil denne placering variere.

Produkt side #

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

Tilføj-til-kurv trin #

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

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

Hvis den ikke gør, skyldes det sandsynligvis, at 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 #

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

Exit Intent #

I my.clerk.io, opret en indholdsblok med logikken Besøgsanbefalinger.
Gå til Shopifys tema-filer og find den primære tema-fil. Dette er oftest Layout > theme.liquid.
Indsæt indlejringskoden lige før den afsluttende </body> tag.
Tilføj attributten data-exit-intent="true" 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-popup’en vises, når en kunde holder musen over adressefeltet i deres browser.

Blog side #

I my.clerk.io, opret en indholdsblok med logikken Produkter relateret til en side.
I Shopify, gå til Online Store > Blog posts.
Klik på det indlæg, du ønsker at tilføje anbefalinger til.
Klik på <> knappen i øverste højre hjørne af tekstboksen for at se HTML’en i indlægget.
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 kodedesign, 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 handle</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.