Bigcommerce

Recommendations

Automate and personalise products on any page in BigCommerce.

Clerk.io offers more than 23 different types of product logics, making it possible for you to display completely automated products on any page. This article explains how to get started when using a Clerk.js setup in BigCommerce.

For our full Best Practices, read this article on which Recommendations to use.

If you have not set up your data sync yet, you can add sync details or start a sync in my.clerk.io > Data > Configuration.

Slider Setup #

Recommendations are created with Elements that reference a Design. Below is the basic guide for setting up an Element.

Following the steps in my.clerk.io > Settings > Setup Guides will automatically create the Elements for our Best Practices.

Create Design #

Recommendations are shown as a slider by default. This allows customers to see more products with fewer clicks. You can either use the Design Editor to configure it visually, or use code designs.

A design can be reused for any number of Recommendations elements you create.

Design Editor #

Go to Recommendations > Designs and click New Design.
Choose Product Slider
From the list of design templates, choose the one you want to start with.
Give it a name and click Create design.
Make any changes you want to the design.

Code Design #

Go to Recommendations > Designs and click New Design.
Choose Other designs > Blank > Code.
Give it a name and click Create design.
Create a code design from scratch using Liquid code.

If you want a starting design, check the Slider template further down.

Create Element #

This contains all the settings used to display the Recommendations, and make it embeddable in your website. Follow these steps for each Recommendations banner you want to create.

Go to Recommendations > Elements.
Click New Element.
Give it a descriptive name. We recommend naming it based on the page and logic you want to use. E.g., “Home Page / Visitor Recommendations”.
In Element type, select the product logic you want to use from the dropdown. You can see an overview of all the product logics here.
In Design select the design you created from the dropdown and choose the number of products you want to show.
Click Save at the top of the screen.

Add to Website #

You can insert Recommendations into your theme using injection or embedded code. On BigCommerce, you typically add the embedded code to the relevant theme template files.

Open the Insert into website tab.
Here you have two options:
- Using injection allows you to insert the code by using a CSS selector.
- Using embedded code allows you to insert the code into your website manually.
Pick the option that is easiest for you to use.
For some Logics you will see the Choose your platform dropdown. Select BigCommerce in these cases. This will prefill the embedcode with the correct BigCommerce shortcodes.

Pages #

Below are the specific pages where you should insert Recommendations, and which types you should use, in order to follow our Best Practices.

Homepage #

In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > layout > pages > home.html.
Insert the embed code where you want it to appear (recommended inside <div class="main full">).

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

Click Save & apply file.

Product Page #

In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open the file that generates your product pages, often under templates > components (e.g. product-view.html or pages > product-page-with-sidenav.html).
Insert the embed code where you want it to appear (recommended at the bottom, after the product description). The example below uses the product ID from the page.

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

Click Save & apply file.

Category Page #

In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > pages > category.html.
Insert the embed code where you want it to appear (recommended just below the category description). The example below uses the category ID from the page.

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

Click Save & apply file.

Cart Page #

In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > pages > cart.html.
Insert the embed code where you want it to appear (recommended at the bottom, just before the closing </div>). The example below uses all product IDs in the cart.

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

Click Save & apply file.

Blog Page #

If you want to show contextual recommendations on CMS content pages:

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

Replace INSERT_PAGE_ID with the ID of the page.

Add-To-Basket Step #

You can show recommendations immediately after a product is added to the cart. Choose one of the options below.

In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > components > cart > preview.html.
Insert the following code where you want the Powerstep to appear (recommended at the bottom, after the product description), and render your chosen Element ID in 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>

Click Save & apply file.

Full Powerstep #

Add the popup container, styles and a set of Powerstep recommendation spans to your product page template. The spans will load when the add-to-cart button is clicked.

<!-- 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>You added <b><u>{{ product.title }}</u></b> to your cart.</h2>
    </div>
    <div class="clerk_powerstep_image">
      <img src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}" alt="You added {{ product.title }} to your cart.">
    </div>
    <div class="clerk_powerstep_actions">
      <button class="powerstep_continue button btn" onclick="location.href='/cart.php';">Continue to Checkout</button>
      <button class="powerstep_close button btn" onclick="close_powerstep();">Continue 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>

Click Save & apply file.

Cart Page #

In my.clerk.io, create an Element with the logic Best Cross-Sell Products.
In the Insert into website > Choose your platform dropdown, select BigCommerce, and copy the embedcode.
In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > pages > cart.html.
Insert the embed code where you want it to appear (recommended at the bottom, just before the closing </div>). The example below uses all product IDs in the cart.

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

Exit Intent #

In my.clerk.io, create an Element with the logic Visitor Recommendations.
In BigCommerce go to Storefront > My Themes > Advanced > Edit Theme Files.
Open templates > layout > base.html.
Insert the following code just before the closing </body> tag, and render your chosen Element ID in data-template.

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

Starting Templates #

If you want to use code designs, these templates can get you started.

Slider Code #

This template will render a standard slider with various product information, that you can tailor to your needs.

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 #

This embedcode should be inserted at the bottom of the product page theme file. It will show a popup with a slider of products when a customer adds a product to their cart. It can be customized as needed.

Recommendations

Slider Setup #

Create Design #

Design Editor #

Code Design #

Create Element #

Add to Website #

Pages #

Homepage #

Product Page #

Category Page #

Cart Page #

Blog Page #

Add-To-Basket Step #

Built-in Popup #

Full Powerstep #

Cart Page #

Exit Intent #

Starting Templates #

Slider Code #

HTML #

CSS #

Add-To-Basket Code #

HTML #