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ændigt automatiserede 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 du skal bruge.

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

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 trinene 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 kunder 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 fra listen over designtemplates den, du vil starte med.
Giv det et navn, og klik på Create design.
Foretag eventuelle ændringer, du ønsker i 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.
Lav et codedesign 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, der bruges til at vise Recommendations og gøre det muligt at embedde på dit website. Følg disse trin for hver Recommendations-banner, du vil oprette.

Gå til Recommendations > Elements.
Klik på New Element.
Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og den logik, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
I Element type, skal du vælge den produktlogik, du ønsker, fra dropdown-menuen. Du kan se et overblik over alle product logics her.
I Design skal du vælge det design, du oprettede, fra dropdownen og vælge det antal produkter, du vil vise.
Klik på Save øverst på skærmen.

Tilføj til Website #

Du kan indsætte Recommendations i dit tema ved hjælp af injection eller embedded code. På BigCommerce tilføjer du typisk embedded code til de relevante tema-templatefiler.

Åbn fanen Insert into website.
Her har du to muligheder:
- Brug af injection giver dig mulighed for at indsætte koden ved hjælp af en CSS-selector.
- Brug af embedded code giver dig mulighed for at indsætte koden manuelt på dit website.
Vælg den mulighed, der er nemmest for dig.
For nogle Logics vil du se dropdownen Choose your platform. Vælg BigCommerce i disse tilfælde. Dette vil udfylde embedcode med de korrekte BigCommerce shortcodes.

Sider #

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

Forside #

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

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

Klik på Save & apply file.

Produktside #

Gå i BigCommerce 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 der, hvor du ønsker den vist (anbefalet nederst efter produktbeskrivelsen). Eksemplet nedenfor bruger produktets ID fra siden.

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

Klik på Save & apply file.

Kategoriside #

Gå i BigCommerce 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 kategoriens ID fra siden.

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

Klik på Save & apply file.

Kurvside #

Gå i BigCommerce til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du ønsker den vist (anbefales nederst 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 ID’et på siden.

Add-To-Basket-trin #

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

Gå i BigCommerce til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > components > cart > preview.html.
Indsæt følgende kode, hvor du vil have Powerstep vist (anbefales nederst 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.

Fuldt Powerstep #

Tilføj popup-containeren, styles og et sæt Powerstep recommendations-spans til dit produktsidetemplate. Spans vil blive indlæst, når tilføj-til-kurv-knappen bliver klikket.

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

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 kopiér embedcode.
Gå i BigCommerce til Storefront > My Themes > Advanced > Edit Theme Files.
Åbn templates > pages > cart.html.
Indsæt embedkoden, hvor du vil have den vist (anbefales nederst 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.
Gå i BigCommerce 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 codedesigns, kan disse skabeloner hjælpe dig i gang.

Slider-kode #

Denne skabelon viser en standard slider med forskellige produktinformationer, 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 embedcode skal indsættes nederst i produktsidens tema-fil. Den viser en popup med en slider med produkter, når en kunde tilføjer et produkt til 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 Setup #

Opret Design #

Design Editor #

Code Design #

Opret Element #

Tilføj til Website #

Sider #

Forside #

Produktside #

Kategoriside #

Kurvside #

Blogside #

Add-To-Basket-trin #

Indbygget popup #

Fuldt Powerstep #

Kurvside #

Exit Intent #

Startskabeloner #

Slider-kode #

HTML #

CSS #

Add-To-Basket-kode #

HTML #