Shopify

Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise fuldstændigt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang, når du bruger et Clerk.js-setup i Shopify.

For vores komplette 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 den grundlæggende vejledning til opsætning af et Element.

Følger du trinene i my.clerk.io > Settings > Setup Guides oprettes Elements automatisk for vores Best Practices.

Opret Design #

Recommendations vises som standard som en slider. Dette giver kunder 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 et vilkårligt antal Recommendations Elements, du opretter.

Design Editor #

Gå til Recommendations > Designs og klik på New Design.
Vælg Product Slider
Fra listen over designtemplates vælger du den, du vil starte med.
Giv det et navn og klik på Create design.
Foretag de ønskede ændringer i designet.

Code Design #

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

Hvis du vil have et startdesign, kan du se Slider template længere nede.

Opret Element #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations, og gør det indlejeligt på dit website. Følg disse trin for hver Recommendations-banner du vil oprette.

Gå til Recommendations > Elements.
Klik på New Element.
Giv det et beskrivende navn. Vi anbefaler, at du navngiver det ud fra siden og den logik, du ønsker at anvende. F.eks. “Home Page / Visitor Recommendations”.
Under Element type, vælger du den ønskede produktlogik fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
Under Design vælger du det design, du har oprettet, og vælger antallet af produkter, du vil vise.
Klik på Save øverst på skærmen.

Tilføj til website #

Åbn fanen Insert into website.
Her har du to muligheder:
- Brug af injection giver dig mulighed for at indsætte koden ved hjælp af en CSS-selector.
- Brug af embedded code giver dig mulighed for manuelt at indsætte koden på dit website.
Vælg den mulighed, der er nemmest for dig.
For nogle Logics vil du se Choose your platform-dropdownmenuen. Vælg Shopify i disse tilfælde. Dette udfylder automatisk embedkoden med de korrekte Shopify-shortcodes.

Typiske stiforløb til temafiler (kan variere alt efter tema):

Forside: Online Store > Themes > Customize > Add Section > Custom Liquid.
Produktside: Sections > main-product.liquid.
Kategoriside: Sections > main-collection-product-grid.liquid.
Kurvside: Sections > main-cart-footer.liquid.
Global (Exit Intent): Layout > theme.liquid (indsæt før </body>).

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

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

Sider #

Herunder er de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du skal bruge, for at følge vores Best Practices. Shopify har mere end 100 temaer, så filplaceringen kan variere.

Kodesnippets 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-selectors for de elementer, du vil indsætte resultater i.

Forside #

Opret i my.clerk.io 3 Elements med følgende logikker:
- Visitor Recommendations
- Bestsellers
- Hot Products
Gå i Shopify til Online Store > Themes > Customize
Klik på Add Section > Custom Liquid.
Indsæt embedkoderne i boksen Custom Liquid.
Klik på Save.

Hvis du ønsker at vise alle bannere oven på hinanden, skal du indsætte alle embedkoder i samme boks. Hvis du vil fordele dem på forsiden, skal du blot følge ovenstående proces flere gange.

Kategoriside #

Opret i my.clerk.io et Element med logikken Bestsellers In Category.
I Insert into website > Choose your platform-dropdownmenuen skal du vælge Shopify, og kopiere embedkoden.
Gå til Shopifys temafiler og find den fil, der genererer dine Collection-sider. Dette er oftest Sections > main-collection-product-grid.liquid.
Indsæt embedkoden et sted under titel og beskrivelse. Afhængigt af dit tema vil placeringen variere.

Produktside #

Opret i my.clerk.io 2 Elements med følgende logikker:
- Best Alternative Products
- Best Cross-Sell Products
I Insert into website > Choose your platform-dropdownmenuen vælges Shopify for hver af dem, og embedkoderne kopieres.
I Shopifys temafiler, find filen, der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
Indsæt embedkoderne et sted under produktbeskrivelsen. Placeringen kan variere afhængigt af dit tema.

Tilføj til kurv-step #

Opret i my.clerk.io et Element med logikken Best Cross-Sell Products.
Giv det navnet “Add-To-Basket / Others Also Bought”. Dette er vigtigt, for at embedkoden fungerer korrekt.
Klik på Save øverst på siden.
I Shopifys temafiler, find filen, der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
Indsæt Add-To-Basket-embedkoden nederst i filen og klik på Save. Du kan finde embedkoden i sektionen Starting Templates.

Add-To-Basket-popup’en vises nu, når en kunde tilføjer et produkt til kurven fra produktsiden.

Hvis den ikke gør det, er det sandsynligvis fordi din add-to-cart-knap har en anden klasse eller ID. Inspicér din knap og erstat .product-form__cart-submit i embedkoden med klassens/ID’et på din knap.

Kurvside #

Opret i my.clerk.io et Element med logikken Best Cross-Sell Products.
I Insert into website > Choose your platform-dropdownmenuen, vælg Shopify, og kopier embedkoden.
Gå til Shopifys temafiler og find filen, der genererer din Kurv-side. Dette er oftest Sections > main-cart-footer.liquid.
Indsæt embedkoden et sted under kurvitems og checkout-knap, for eksempel lige før {% schema %}-tagget.

Exit Intent #

Opret i my.clerk.io et Element med logikken Visitor Recommendations.
Gå til Shopifys temafiler og find hovedtema-filen. Dette er oftest Layout > theme.liquid.
Indsæt embedkoden lige før afsluttende </body>-tag.
Tilføj attributten data-exit-intent="true" til embedkoden. 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 dette vil Exit Intent-popup’en blive vist, når en kunde flytter musen over adresselinjen i deres browser.

Blog-side #

Opret i my.clerk.io et Element med logikken Products Related To A Page.
Gå i Shopify til Online Store > Blog posts.
Klik på det opslag, du vil tilføje recommendations til.
Klik på <>-knappen øverst til højre i tekstboksen for at se HTML for opslaget.
Indsæt embedkoden i den del af opslaget, hvor det er naturligt at vise recommendations, og erstat INSERT_PAGE_ID_HERE med side-ID’et på opslaget. Du kan finde dette ID i opslagets URL.

Startskabeloner #

Hvis du vil bruge code 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-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Add to Cart</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%;
    }
}

Add-To-Basket-kode #

Denne embedkode skal indsættes nederst i temafilens produktside. Den viser en popup med en slider med produkter, når en kunde tilføjer et produkt til sin 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 betaling</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.