Bigcommerce

Recommendations

Automatisér og personalisér produkter på enhver side i BigCommerce.

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 BigCommerce.

For vores komplette Best Practices, læs denne artikel om hvilke Recommendations der skal bruges.

Hvis du endnu ikke har opsat din datasynkronisering, kan du tilføje synkroniseringsdetaljer eller starte en synkronisering i my.clerk.io > Data > Configuration.

Før du redigerer tema-filer, skal du lave en kopi af det aktive tema. I BigCommerce skal du gå til Storefront > My Themes, åbne tema-menuen og vælge Make a copy. Anvend det kopierede tema, før du vælger Advanced > Edit Theme Files. På denne måde får du en sikker version at teste på og undgår, at ufærdige skabelonændringer påvirker live butiksfronten.

BigCommerce kræver Store Owner-kontoen til nogle indstillinger. Hvis Edit Theme Files eller sporingsindstillingerne ikke er tilgængelige, skal du bede Store Owner om at foretage ændringen eller give den nødvendige tilladelse.

Slider Setup #

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

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

Opret Design #

Recommendations vises som standard som en slider. Det gør det muligt for kunder at se flere produkter med færre klik. Du kan enten bruge Design Editor for 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 på New Design.
Vælg Product Slider
Vælg det design-skabelon, du ønsker at starte med, fra listen.
Giv den et navn, og klik på Create design.
Foretag eventuelle ønskede ændringer i designet.

Code Design #

Gå til Recommendations > Designs og klik på New Design.
Vælg Other designs > Blank > Code.
Giv den et navn, og klik på 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ør det muligt at indlejre det på din hjemmeside. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

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

Tilføj til hjemmeside #

Du kan indsætte Recommendations i dit tema ved at bruge injection eller embedded code. På BigCommerce tilføjer du typisk embedded code til relevante tema-skabelonfiler.

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

Sider #

Nedenfor er de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du skal bruge for at følge vores Best Practices.

Forside #

I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > layout > pages > home.html.
Indsæt embedkoden dér, hvor du vil have den vist (anbefales inde i <div class="main full">).

<span class="clerk" data-template="@YOUR_SLIDER_ID"></span>

Klik på Save & apply file.

Produktside #

I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn filen, der genererer dine produktsider, ofte under templates > components (f.eks. product-view.html eller pages > product-page-with-sidenav.html).
Indsæt embedkoden dér, hvor du vil have den vist (anbefales i bunden, efter produktbeskrivelsen). Eksemplet nedenfor anvender produktets ID fra siden.

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

Klik på Save & apply file.

Kategori-side #

I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > category.html.
Indsæt embedkoden dér, hvor du vil have den vist (anbefales lige under kategoribeskrivelsen). Eksemplet nedenfor anvender kategoriens ID fra siden.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-category="{{ { category.id } }}">
</span>

Klik på Save & apply file.

Kurvside #

I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden dér, hvor du vil have den vist (anbefales i bunden, lige før den afsluttende </div>). Eksemplet nedenfor anvender alle produkt-ID’er i kurven.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Klik på Save & apply file.

Blogside #

Hvis du vil vise kontekstuelle recommendations på CMS-indholdssider:

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-page="INSERT_PAGE_ID">
</span>

Udskift INSERT_PAGE_ID med ID’et på siden.

Tilføj-til-kurv Trin #

Du kan vise recommendations umiddelbart efter, et produkt er tilføjet til kurven. Vælg en af mulighederne nedenfor.

I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > components > cart > preview.html.
Indsæt følgende kode dér, hvor du vil have Powerstep vist (anbefales i bunden, efter produktbeskrivelsen), og vis dit valgte Element ID i data-template.

<span id="clerk-powerstep"
  class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>
<script>
  Clerk('content','#clerk-powerstep');
</script>

Klik på Save & apply file.

Fuld Powerstep #

Tilføj popup-containeren, styles og en række Powerstep recommendation-spans til din produktside-skabelon. Spans vil indlæse, når add-to-cart knappen klikkes.

<!-- Container (hidden by default) -->
<div style="display: none;" id="clerk_powerstep">
  <span class="clerk-popup-close" onclick="close_powerstep()">&#x2715</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="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="Du har tilføjet {{ product.title }} til din kurv.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Fortsæt til kassen</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="@power-step-others-also-bought" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-visitor-complementary" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular" data-products="[{{product.id}}]"></span>
    <span class="clerk-powerstep-recommendations" data-template="@power-step-popular-on-sale" data-products="[{{product.id}}]"></span>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('[data-add-to-cart]')) ? '[data-add-to-cart]' : '#form-action-addToCart';
    const prodPage = (document.querySelector('[itemtype="http://schema.org/Product"] > div')) ? '[itemtype="http://schema.org/Product"] > div' : 'main';
    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');
    clerkPowerstep.style.display = 'none';
  }
</script>

Klik på Save & apply file.

Kurvside #

I my.clerk.io skal du oprette et Element med logikken Best Cross-Sell Products.
I dropdown-menuen Insert into website > Choose your platform, vælg BigCommerce, og kopier embedkoden.
I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden dér, hvor du vil have den vist (anbefales i bunden, lige før den afsluttende </div>). Eksemplet nedenfor anvender alle produkt-ID’er i kurven.

<span class="clerk"
  data-template="@YOUR_SLIDER_ID"
  data-products="[{{ '{' + '{#each cart.items}' + '}' + '{' + '{#if @last}' + '}' + '{' + '{product_id}' + '}' + '{' + '{/if}' + '}' + '{' + '{/each}' + '}' }}]">
</span>

Exit Intent #

I my.clerk.io skal du oprette et Element med logikken Visitor Recommendations.
I BigCommerce går du til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > layout > base.html.
Indsæt følgende kode lige før den afsluttende </body>-tag, og vis dit valgte Element ID i data-template.

<span class="clerk"
  data-template="@{{content.id}}"
  data-exit-intent="true">
</span>

Startskabeloner #

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

Slider Code #

Denne skabelon viser en standard slider med forskellige produktinformationer, som du kan tilpasse efter 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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 embedkode skal indsættes i bunden af produktsidens temafil. Den viser en popup med en slider med produkter, når en kunde tilføjer et produkt til deres kurv. Koden kan tilpasses efter behov.

HTML #

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.

Recommendations

Slider Setup #

Opret Design #

Design Editor #

Code Design #

Opret Element #

Tilføj til hjemmeside #

Sider #

Forside #

Produktside #

Kategori-side #

Kurvside #

Blogside #

Tilføj-til-kurv Trin #

Indbygget Popup #

Fuld Powerstep #

Kurvside #

Exit Intent #

Startskabeloner #

Slider Code #

HTML #

CSS #

Tilføj-til-kurv kode #

HTML #