Shopify

Recommendations

Recommendations

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise fuldautomatiserede 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 Setup #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor er en grundlæggende guide til opsætning af et Element.

Hvis du følger trinnene i my.clerk.io > Indstillinger > Setup Guides oprettes Elements automatisk til vores Best Practices.

Opret Design #

Recommendations vises som en slider som standard. Dette gør det muligt for kunder 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 Recommendations elements, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den designskabelon, du vil starte med, fra listen.
  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 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øre det indlejringsbart på din hjemmeside. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Element.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på siden og logikken, du ønsker at bruge. F.eks. “Forside / Visitor Recommendations”.
  4. Under Element type, vælger du den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
  5. Under Design vælger du det design, du oprettede, fra dropdown-menuen og vælger, hvor mange produkter du ønsker at vise.
  6. Klik på Save øverst på skærmen.

Tilføj til website #

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Brug af injection giver dig mulighed for at indsætte koden ved brug af en CSS-selector.
    • Brug af embedded code giver dig mulighed for manuelt at indsætte koden 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 Shopify i disse tilfælde. Dette forudfylder embedkoden med de korrekte Shopify shortcodes.

Typiske temafil-stier (kan variere afhængig af 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 Recommendations embedkode-eksempel med en Shopify shortcode til indsættelse af produkt-ID:

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

Sider #

Insert Code Example
Nedenfor er de specifikke sider, hvor du bør indsætte Recommendations, samt hvilke typer du bør bruge, for at følge vores Best Practices. Shopify har mere end 100 temaer, så filplaceringerne er ikke altid præcise.

Snippets bør indsættes i temaets HTML-filer, som normalt findes i Shopify Admin > Online Store > Themes. Alternativt kan du injicere resultater, hvis du kender CSS-selectorerne for de elementer, du vil indsætte resultater i.

Forside #

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

Hvis du vil vise alle bannere oven på hinanden, indsæt alle embedkoderne i den samme boks. Hvis du vil fordele dem over forsiden, skal du blot gentage ovenstående proces flere gange.

Kategoriside #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I Insert into website > Choose your platform dropdown, vælg Shopify, og kopier embedkoden.
  3. Gå til Shopifys temafiler og find den fil, der genererer dine kategorisider. Dette er ofte Sections > main-collection-product-grid.liquid.
  4. Indsæt embedkoden et sted under titel og beskrivelse. Placeringen varierer afhængig af temaet.

Fuldt kategoriside #

Hvis du vil have Clerk.io til at vise det fulde produktgrid på kategorisider (i stedet for kun en slider), bruges et kategori-baseret snippet og udskift den indbyggede produkt-loop i kategori-templaten.

  1. I my.clerk.io, opret et nyt Recommendations Element til kategorisider.
  2. I Shopify, åbn din kategori-template (ofte Sections > main-collection-product-grid.liquid).
  3. Kommenter eller fjern det indbyggede produktgrid loop.
  4. Indsæt dette snippet, hvor produktgridet skal vises:
<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>
  1. Gem og test én kategoriside med query-parametre i URL’en for at bekræfte, at facets og pagination fungerer som forventet.

Brug platform-artiklen for dybere API/logic-vejledning: Category page guide.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform dropdown, vælg Shopify for dem begge og kopier embedkoderne.
  3. I Shopify-temaets filer, find den fil, der genererer dine produktsider. Dette er ofte Sections > main-product.liquid.
  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Placeringen varierer afhængig af temaet.

Add-To-Basket Step #

  1. I my.clerk.io, opret 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 i toppen af siden.
  4. I Shopify-temaets filer, find den fil, der genererer dine produktsider. Dette er ofte Sections > main-product.liquid.
  5. Indsæt Add-To-Basket embedkoden i bunden af filen og klik Save. Du kan finde embedkoden i sektionen Starting Templates.

Add-To-Basket popuppen vises nu, når en kunde tilføjer et produkt til sin kurv fra produktsiden.

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

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I Insert into website > Choose your platform dropdown, vælg Shopify, og kopier embedkoden.
  3. Gå til Shopifys temafiler, og find den fil, der genererer dine kurvsider. Dette er ofte Sections > main-cart-footer.liquid.
  4. Indsæt embedkoden et sted under kurvens varer og checkout-knappen, for eksempel lige før {% schema %}-tagget.
<span
  class="clerk"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

Exit Intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.
  2. Gå til Shopifys temafiler og find primære tema-fil. Dette er ofte Layout > theme.liquid.
  3. Indsæt embedkoden lige før afsluttende </body>-tag.
  4. 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>

Når du har tilføjet dette, vises Exit Intent-popuppen, når en kunde fører musen op til adressefeltet i sin browser.

Blogside #

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

Startskabeloner #

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

Slider-kode #

Denne template renderer 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 produkt-sidens temafil. Den vil vise en popup med en slider med produkter, når en kunde tilføjer et produkt til deres kurv. Det 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.