Bigcommerce

Recommendations

Automatiser og personalisere 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 fuldstændig automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med at bruge en Clerk.js-opsætning i BigCommerce.

For vores fulde Best Practices, læs denne artikel om hvilke Recommendations du skal bruge.

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 temafiler, skal du lave en kopi af det aktive tema. I BigCommerce skal du gå til Storefront > My Themes, åbne temamenuen og vælge Opret en kopi. Anvend det kopierede tema, før du vælger Advanced > Edit Theme Files. Dette giver dig en sikker version at teste på og forhindrer, at ufærdige skabelonændringer påvirker den aktive butik.

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 Opsætning #

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 trinene i my.clerk.io > Settings > Setup Guides, bliver Elements for vores Best Practices automatisk oprettet.

Opret Design #

Recommendations vises som standard som en slider. Dette giver kunderne 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
Vælg den skabelon, du vil starte med, fra listen over designskabeloner.
Giv det et navn og klik på Create design.
Foretag de ønskede ændringer af 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 ønsker 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 muligt at indlejre det på din hjemmeside. Følg disse trin for hvert Recommendations-banner, du ønsker at oprette.

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

Tilføj til hjemmeside #

Du kan indsætte Recommendations i dit tema ved hjælp af injektion eller indlejret kode. I BigCommerce tilføjer du typisk den indlejrede kode til de relevante temaskabelonfiler.

Åbn fanen Insert into website.
Her har du to muligheder:
- Brug af injektion giver dig mulighed for at indsætte koden med en CSS-selektor.
- Brug af indlejret kode giver dig mulighed for manuelt at indsætte koden på din hjemmeside.
Vælg den mulighed, der er nemmest for dig at bruge.
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 bør bruge, for at følge vores Best Practices.

Forside #

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

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

Klik på Save & apply file.

Produktside #

I BigCommerce gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn den fil, der genererer dine produktsider, ofte under templates > components (f.eks. product-view.html eller pages > product-page-with-sidenav.html).
Indsæt embedkoden, hvor du vil have den til at vises (anbefales i bunden, efter produktbeskrivelsen). Eksemplet nedenfor bruger produkt-id’et fra siden.

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

Klik på Save & apply file.

Kategoriside #

I BigCommerce gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > category.html.
Indsæt embedkoden, hvor du vil have den til at vises (anbefales lige under kategoribeskrivelsen). Eksemplet nedenfor bruger kategori-id’et fra siden.

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

Klik på Save & apply file.

Kurvside #

I BigCommerce gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du vil have den til at vises (anbefales i bunden, lige før den afsluttende </div>). Eksemplet nedenfor bruger 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 sidens ID.

Add-To-Basket Step #

Du kan vise recommendations umiddelbart efter, at et produkt er føjet til kurven. Vælg en af nedenstående muligheder.

I BigCommerce gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > components > cart > preview.html.
Indsæt følgende kode, hvor du vil have Powerstep til at vises (anbefales i bunden, efter produktbeskrivelsen), og angiv 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.

Full Powerstep #

Tilføj popup-container, styles og et sæt Powerstep recommendations-spans til din produktside-skabelon. Spans bliver indlæst, når der klikkes på add-to-cart-knappen.

<!-- Container (skjult som standard) -->
<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 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="@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, opret et Element med logikken Best Cross-Sell Products.
I Insert into website > Choose your platform dropdown, vælg BigCommerce, og kopier embedkoden.
I BigCommerce gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du vil have den til at vises (anbefales i bunden, lige før den afsluttende </div>). Eksemplet nedenfor bruger 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, opret et Element med logikken Visitor Recommendations.
I BigCommerce gå 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 angiv dit valgte Element ID i data-template.

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

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 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-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%;
    }
}

Add-To-Basket Code #

Denne embedkode skal indsættes i bunden af filen for produktside-temaet. Den vil vise en popup med en slider af produkter, når en kunde tilføjer et produkt til deres kurv. Den 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 Opsætning #

Opret Design #

Design Editor #

Code Design #

Opret Element #

Tilføj til hjemmeside #

Sider #

Forside #

Produktside #

Kategoriside #

Kurvside #

Blogside #

Add-To-Basket Step #

Indbygget Popup #

Full Powerstep #

Kurvside #

Exit Intent #

Startskabeloner #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #