Shopify

Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise helt 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 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 er den grundlæggende vejledning til at opsætte et Element.

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

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 bruge code designs.

Et design kan genbruges til et vilkårligt antal Recommendations-elementer, du opretter.

Design Editor #

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

Code Design #

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

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations, og gøre det muligt at indlejre dem på din hjemmeside. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

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

Tilføj til hjemmeside #

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

Typiske sti til theme-filer (kan variere afhængigt af theme):

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å embedkode for Recommendations med en Shopify shortcode for at indsætte produkt-ID’et:

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

Sider #

Nedenfor finder du de specifikke sider, hvor du skal indsætte Recommendations, og hvilke typer du skal bruge, for at følge vores Best Practices. Shopify har mere end 100 themes, så filplaceringerne er ikke altid præcise.

Kodesnippets skal indsættes i theme’ets 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 #

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

Hvis du vil vise alle bannere oven på hinanden, indsæt alle embedkoder i den samme boks. Såfremt du ønsker at dele dem ud på forsiden, gentages processen ovenfor flere gange.

Kategoriside #

I my.clerk.io, opret et Element med logikken Bestsellers In Category.
I dropdown-menuen Insert into website > Choose your platform, vælg Shopify, og kopier embedkoden.
Gå til Shopifys theme-filer og find den fil, der genererer dine Collection-sider. Det er oftest Sections > main-collection-product-grid.liquid.
Indsæt embedkoden et sted under titel og beskrivelse. Placeringen afhænger af dit theme.

Fuldt kategoriside #

Hvis du vil have Clerk.io til at gengive hele produktgitteret på kategori-/collectionsider (i stedet for kun en slider), skal du bruge et kategoribaseret snippet og erstatte produktloopet i dit collection-template.

I my.clerk.io, opret et nyt Recommendations Element til kategorisider.
I Shopify åbner du dit collection-template (ofte Sections > main-collection-product-grid.liquid).
Kommenter eller fjern det native produktgrid-loop.
Indsæt dette snippet, hvor produktgitteret skal gengives:

<div id="clerk-category-filters"></div>
<span
  id="clerk-category-products"
  class="clerk"
  data-template="@YOUR_ELEMENT_ID"
  data-category="{{ collection.id }}"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","vendor"]'
  data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
  data-facets-in-url="true">
</span>

Gem og test én collection-side med query-parametre i URL’en for at bekræfte, at facetter og pagination fungerer korrekt.

Brug artiklen på platformniveau for dybere API/logic-vejledning: Category page guide.

Produktside #

I my.clerk.io, opret 2 Elements med følgende logikker:
- Best Alternative Products
- Best Cross-Sell Products
I Insert into website > Choose your platform dropdown, vælg Shopify for hver af dem og kopier embedkoderne.
I Shopify theme-filerne, find den fil der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
Indsæt embedkoderne et sted under produktbeskrivelsen. Placeringen afhænger af dit theme.

Add-To-Basket trinnet #

I my.clerk.io, opret 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 Shopify theme-filerne, find filen der genererer dine produktsider. Dette er oftest Sections > main-product.liquid.
Indsæt Add-To-Basket-embedkoden nederst i filen og klik Save. Du kan finde embedkoden i sektionen Starting Templates.

Add-To-Basket-popuppen vises nu, når en kunde lægger et produkt i kurven fra produktsiden.

Hvis den ikke gør, er det sandsynligvis fordi din “add-to-cart”-knap har en anden klasse eller ID. Inspicer din knap, og erstat .product-form__cart-submit i embedkoden med klassen/ID’et for din knap.

Kurvside #

I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
I Insert into website > Choose your platform dropdown, vælg Shopify, og kopier embedkoden.
Gå til Shopifys theme-filer og find den fil, der genererer dine kurvsider. Dette er oftest Sections > main-cart-footer.liquid.
Indsæt embedkoden et sted under kurvvarerne og checkout-knappen, for eksempel lige før {% schema %}-tagget.

Exit Intent #

I my.clerk.io, opret et Element med logikken Visitor Recommendations.
Gå til Shopifys theme-filer og find den primære theme-fil. Dette er oftest Layout > theme.liquid.
Indsæt embedkoden lige før den 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 at have tilføjet dette, vil Exit Intent-popuppen vises, når en kunde flytter musen hen over adresselinjen i browseren.

Blogside #

I my.clerk.io, opret et Element med logikken Products Related To A Page.
I Shopify, gå til Online Store > Blog posts.
Klik på det indlæg, du vil tilføje recommendations til.
Klik på <>-knappen i øverste højre hjørne af tekstboksen for at se HTML’en for indlægget.
Indsæt embedkoden i en del af indlægget, hvor det er naturligt at vise recommendations, og erstat INSERT_PAGE_ID_HERE med sidens ID for indlægget. Du kan finde ID’et i postens URL.

Starting Templates #

Hvis du vil bruge codedesigns, kan disse templates hjælpe dig i gang.

Slider Code #

Denne template vil vise 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 Code #

Denne embedkode skal indsættes nederst i produktsidens theme-fil. Den vil vise en popup med en slider af produkter, når en kunde lægger en vare i kurven. 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>You added <b><u>{{ product.title }}</u></b> to your cart.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</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.