Bigcommerce

Recommendations

Automatiser og personaliser produkter på enhver side i BigCommerce.

Clerk.io tilbyder mere end 23 forskellige typer 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 BigCommerce.

For vores fulde Best Practices kan du læse 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.

Slider-opsætning #

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

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides, oprettes Elements til vores Best Practices 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 alle de Recommendations-elements, du opretter.

Design Editor #

Gå til Recommendations > Designs og klik på New Design.
Vælg Product Slider
Vælg fra listen over designtemplates den, du vil starte med.
Giv den et navn og klik på Create design.
Foretag de ø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 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 indstillinger til at vise Recommendations og gøre det muligt at integrere dem på dit website. Følg disse trin for hver Recommendations-banner, du ønsker at oprette.

Gå til Recommendations > Elements.
Klik på New Element.
Giv den et beskrivende navn. Vi anbefaler at navngive det baseret på siden og logikken, du ønsker at bruge. F.eks. “Forside / Visitor Recommendations”.
Under Element type, vælger du den produktlogik, du ønsker at 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 det antal produkter, du ønsker at vise.
Klik på Save øverst på skærmen.

Tilføj til website #

Du kan indsætte Recommendations i dit tema ved at bruge injection eller embedded code. I BigCommerce tilføjer du som regel embedded code til relevante tema-templatefiler.

Åbn fanen Insert into website.
Her har du to muligheder:
- Ved at bruge injection kan du indsætte koden via et CSS-selector.
- Ved at bruge embedded code kan du manuelt indsætte koden på dit website.
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 embedkoden med de korrekte BigCommerce-shortcodes.

Sider #

Nedenfor finder du de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer der bør bruges 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 der, hvor du ønsker, den skal 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 filen, 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 ønsker, den skal 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.

Kategori-side #

I BigCommerce, gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > category.html.
Indsæt embedkoden, hvor du ønsker, den skal 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.

Kurv-side #

I BigCommerce, gå til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du ønsker, den skal 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.

Blog-side #

Hvis du ønsker at vise kontekstuelle anbefalinger 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.

Add-To-Basket-trin #

Du kan vise anbefalinger med det samme, efter et produkt er tilføjet til kurven. Vælg en af følgende 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 ønsker, Powerstep vises (anbefales i bunden, efter produktbeskrivelsen), og indsæt 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 et sæt Powerstep-anbefalingsspans til din produktsidetemplate. Spans vises, når add-to-cart-knappen klikkes.

<!-- 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 shopping</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.

Kurv-side #

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å til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du ønsker den vist (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 indsæt dit valgte Element-ID i data-template.

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

Skabeloner til start #

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

Slider-kode #

Denne skabelon vil vise en standard-slider med forskellig produktoplysning, 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-kode #

Denne embedkode skal indsættes i bunden af produktsidetema-filen. Den vil vise en popup med en slider af produkter, når en kunde lægger et produkt i kurven. 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 website #

Sider #

Forside #

Produktside #

Kategori-side #

Kurv-side #

Blog-side #

Add-To-Basket-trin #

Indbygget popup #

Fuld Powerstep #

Kurv-side #

Exit Intent #

Skabeloner til start #

Slider-kode #

HTML #

CSS #

Add-To-Basket-kode #

HTML #