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 med at bruge 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 den grundlæggende vejledning til opsætning af et Element.

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

Opret Design #

Recommendations vises som en slider som standard. 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 elements, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den designtemplate, 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 Create design.
  4. Opret et kodet design 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ør det muligt at integrere dem på dit website. Følg disse trin for hver Recommendations banner, du vil oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Element.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. I Element type, vælg den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se en oversigt over alle product logics her.
  5. I Design vælg det design, du oprettede, fra dropdown-menuen og vælg antallet af produkter, du vil 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 injection for at indsætte koden ved hjælp af en CSS selector.
    • Brug embedded code for at indsætte koden manuelt på dit website.
  3. Vælg den mulighed, som er lettest for dig at bruge.
  4. For nogle Logics vil du se Choose your platform dropdown-menuen. Vælg Shopify i disse tilfælde. Dette udfylder embedkoden med de korrekte Shopify shortcodes.

Typiske filplaceringer i temaet (kan variere alt efter tema):

  • Forside: Online Store > Themes > Customize > Add Section > Custom Liquid.
  • Produktside: Sections > main-product.liquid.
  • Kategori-side: 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å en Recommendations embed kode 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 bør indsætte Recommendations, og hvilken type du skal bruge for at følge vores Best Practices. Shopify har mere end 100 temaer, så filplaceringerne kan variere.

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 selectors for de elementer, hvor du vil indsætte resultaterne.

Forside #

  1. Opret i my.clerk.io 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 embedkoder i den samme boks. Hvis du vil placere dem forskellige steder på Forsiden, følg blot ovenstående proces flere gange.

Kategori-side #

  1. Opret i my.clerk.io 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 Collection-sider. Dette er oftest Sections > main-collection-product-grid.liquid.
  4. Indsæt embedkoden et sted under titel og beskrivelse. Placering vil variere afhængigt af dit tema.

Fuldt Kategori-side #

Hvis du ønsker, at Clerk.io skal gengive hele produktgitteret på collection-sider (i stedet for kun en slider), brug et kategori-baseret snippet og erstat den normale produkt-løkke i din collection template.

  1. Opret i my.clerk.io et nyt Recommendations Element til kategorisider.
  2. I Shopify, åben din collection template (ofte Sections > main-collection-product-grid.liquid).
  3. Kommentér eller fjern den oprindelige produktgitter-løkke.
  4. Indsæt dette snippet, hvor produktgitteret 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 en collection-side med query-parametre i URL’en for at bekræfte, at facets og pagination opfører sig som forventet.

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

Produktside #

  1. Opret i my.clerk.io 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 hver af dem og kopier embedkoderne.
  3. I Shopifys temafiler, find filen der genererer produktsider. Dette er oftest Sections > main-product.liquid.
  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Placeringen afhænger af dit tema.

Add-To-Basket Steg #

  1. Opret i my.clerk.io 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 øverst på siden.
  4. I Shopifys temafiler, find filen der genererer produktsider. Dette er oftest Sections > main-product.liquid.
  5. Indsæt Add-To-Basket embedkoden i bunden af filen og klik Save. Du finder embedkoden i sektionen Starting Templates.

Add-To-Basket popup vil nu blive vist, når en kunde tilføjer et produkt til deres kurv fra produktsiden.

Hvis det 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/navnets ID på din knap.

Kurvside #

  1. Opret i my.clerk.io 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 filen, der genererer dine Cart-sider. Dette er oftest Sections > main-cart-footer.liquid.
  4. Indsæt embedkoden under kurvevarer og checkout-knap, 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. Opret i my.clerk.io et Element med logikken Visitor Recommendations.
  2. Gå til Shopifys temafiler og find hovedtema-filen. Dette er oftest Layout > theme.liquid.
  3. Indsæt embedkoden lige før den 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>

Efter at have tilføjet dette, vil Exit Intent popuppen blive vist, når en kunde bevæger sin mus over adresselinjen i deres browser.

Blogside #

  1. Opret i my.clerk.io et Element med logikken Products Related To A Page.
  2. I Shopify, gå til Online Store > Blog posts.
  3. Klik på det indlæg, du vil tilføje recommendations til.
  4. Klik på <> knappen øverst til højre i tekstboksen for at se HTML’en for indlægget.
  5. Indsæt embedkoden i den del af indlægget, hvor det er naturligt at vise recommendations, og udskift INSERT_PAGE_ID_HERE med side-ID’et for indlægget. Du finder dette ID i URL’en for indlægget.

Startskabeloner #

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

Slider Code #

Denne skabelon vil vise en standard slider med forskellige produktoplysninger, 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">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 i bunden af produkt-side tema-filen. Den vil vise en popup med en slider over 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 betaling</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Fortsæt 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.