General #
Clerk.io’s Recommendations can be installed on any page of the webshop, to help customers find the right products.
With the Setup Guide, you can see which pages to install recommendations on, and which types to use, to get our Best Practice running.
From the main menu start by clicking on Getting Started:
Create a Standard Design #
The first thing you need to do, is create a Standard Design for your sliders.
You can use the Setup Guide under Recommendations - Create a design for your recommendations sliders - to quickly create a Design that has the same color scheme and style as your webshop.
Click Publish when you are happy with the styling.
You can easily change this later, under Recommendations - Designs in the left menu.
Selecting Which Recommendations To Use #
Next, each step of the Setup Guide focuses on a specific page of the webshop.
They contain information about
Why recommendations are important on the page.
Which recommendations types to use.
Where on the page they should be placed.
Click for each type of recommendations you want to use and follow the steps.
Please bare in mind: by only clicking on each block of Recommendations they will turn green as if they were installed - they are not - you still need to click and follow the steps.
Inserting Recommendations #
After choosing which recommendations to use for a page, you can add them to your webshop.
Inserting only with Embedcodes #
Shopify only allow an integration with embedcode:
For each type of recommendations, simply copy the embedcode and insert them to the file that generates the relevant page in your webshop.
Click on each type of Recommendations and follow the steps.
Here is an example of how to Add recommendations to your product page:
Click on DONE
You can easily change your content later, under Recommendations - Content in the left menu.
Change Content
After enabling the features, you will be able to see Clerk.io’s RECOMMENDATIONS function on your webshop.
Some embed codes need variables like product or category-IDs. In these cases, simply choose Shopify from the Choose Platform dropdown, before copying the embedcode.
Homepage #
Many Themes in Shopify allows you to insert Clerk.io’s embedcodes through Custom HTML in your Home-Page. However, some Themes do not have this option, in which case you need to add your own section to allow it. This is how you do it:
Add a Clerk-Slider section to your Theme #
1. Log in to your Shopify backend.
2. Go to Online Store -> Themes -> Actions -> Edit code
3. Scroll to Sections and click Add a new section.
4. Name your section Clerk-Slider and click Create section
5. Replace all content in the Section with the following code:
{%raw%}{{ section.settings.embedcode }}
{% schema %}
{
"name": "Clerk Slider",
"class": "clerk-slider",
"settings": [
{
"type": "html",
"id": "embedcode",
"label": "Embedcode"
}
],
"presets": [
{
"category": "Products",
"name": "Clerk Slider"
}
]
}
{% endschema %}
{%endraw%}
6. Click Save
Insert Sections with embedcodes in your Homepage #
1. Go to Themes -> Customize
2. Click Add section and then add Clerk Slider:
3. Insert the embedcode of the Recommendations you want to display and click Save:
And that’s it! You can add as many sections as you want to the homepage, and even include multiple embedcodes in one if you wish.
Add-To-Basket Step #
1. Login to your Shopify backend and go to Online Store -> Themes -> Actions -> Edit Code
2. Find the file that generates your product-page. Usually this is Sections -> product-template.liquid or main-product-liquid
3. Copy the following code to the bottom of the file:
<script>
document.addEventListener('DOMContentLoaded', function(){
const buyBtn = (document.querySelector('.product-form__add-button')) ? '.product-form__add-button' : '.product-form__add-button';
const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
const clerkPowerstep = document.getElementById('clerk_powerstep');
const clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
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');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
clerkPowerstepOverlay.style.height = document.body.clientHeight + 'px';
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');
var clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
clerkPowerstep.classList.toggle('animate_top');
clerkPowerstepOverlay.classList.toggle('animate_overlay');
//window.location.reload();
}
</script>
<style>
@keyframes top {
from {
top: -100%;
}
to {
top: 50%;
}
}
.animate_top {
animation: top 100 ease-in-out;
top: 50% !important;
}
.animate_overlay {
display:block !important;
}
#clerk_powerstep {
width: clamp(45ch, 50%, 100ch) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 3px solid #888 !important;
border-radius: 2px !important;
position: fixed;
top: -100%;
z-index: 999;
display: none;
background-color: white;
box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
#clerk_powerstep h2 {
text-align: center;
}
.clerk_powerstep_image {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.clerk_powerstep_image img {
object-fit: contain;
max-height: 240px;
height: 25vh;
margin: auto;
}
.clerk-popup-close {
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
font-family: Arial;
font-size: 32px;
line-height: 1;
color: gray;
z-index: 2;
padding: 3px;
}
.clerk_powerstep_header {
position: relative;
}
.clerk_powerstep_wrap {
position: relative;
overflow-y: scroll;
overflow-y: overlay;
max-height: 80vh;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.clerk_powerstep_wrap::-webkit-scrollbar {
display: none;
}
.clerk_powerstep_actions {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.clerk_powerstep_actions button {
margin: 0 0 10px 0;
}
@media only screen and (max-width: 800px){
.clerk_powerstep_actions {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* from SB */
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
order:2;
align-content: center;
display: flex;
flex-wrap:wrap;
width:calc(100% - 100px - 180px - 20px);
}
#clerk_powerstep .clerk_powerstep_header h2 {
width:100%;
}
.clerk_powerstep_top h2 {
font-weight: 500;
font-size: 1.2em;
text-align: left;
margin-bottom: 10px;
text-transform: uppercase;
}
.clerk_powerstep_image {
height:0px;
width:0px;
order: 1;
display:none;
}
.clerk_powerstep_actions {
order: 3;
display: flex;
flex-direction: column;
justify-content:space-evenly;
width:180px;
}
.clerk_powerstep_actions button {
margin-bottom:0;
width: 100%;
}
.clerk_powerstep_actions .powerstep_continue {
background: #0d1e48;
border: 0px solid #000;
padding: 4px 12px;
color:#fff;
line-height: 26px;
font-size: 14px;
}
.clerk_powerstep_actions .powerstep_close {
padding: 3px 11px;
border: 1px solid #0d1e48;
color:#557b97;
line-height: 26px;
font-size: 14px;
}
#clerk_powerstep {
width: clamp(45ch, 80%, 200ch) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
@media (max-width: 1139px) {
#clerk_powerstep {
width: clamp(45ch, 90%, 100ch) !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
width:calc(100% - 0px - 10px);
}
.clerk_powerstep_actions {
flex-direction:row;
gap:10px;
width:100%;
}
}
@media (max-width: 448px) {
#clerk_powerstep {
width: 90% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0px !important;
border: 0px solid #888 !important;
border-radius: 0px !important;
position: fixed;
z-index: 999;
background-color:#fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
width:calc(100% - 0px - 0px);
}
.clerk_powerstep_actions {
flex-direction:column;
gap:10px;
width:100%;
}
}
.clerk_powerstep_overlay {
width:100%;
background-color:rgba(0,0,0,.5);
position:absolute;
top:0;
left:0;
z-index:998;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
</style>
<div class="clerk_powerstep_overlay" style="display:none;"></div>
<div style="display: none;" id="clerk_powerstep">
<div class="clerk_powerstep_top">
<span class="clerk-popup-headline">
<h2>Almost there</h2>
</span>
<span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
</div>
<div class="clerk_powerstep_wrap">
<div class="clerk_powerstep_header">
<h2>You added "{{ product.title }}" to your cart.</h2>
</div>
<div class="clerk_powerstep_image">
<img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
</div>
<div class="clerk_powerstep_actions">
<button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
<button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</button>
</div>
</div>
<span class="clerk-powerstep-recommendations"
data-template="@power-step-others-also-bought"
data-products="[{{product.id}}]">
</span>
</div>
4. Your Powerstep Page should now show up when a product is added to the cart.
Adjusting the Cart Type in your Shopify Theme
To change your Cart Type, follow the path Theme > Customize > Theme Settings > Cart > Cart type in your Shopify backend.
In the Cart type dropdown, be sure to select any option except for “Page”. Options that appear in the dropdown depend on your webshop’s theme, and may include “Drawer” or “Popup”, among others.
Choosing an option other than “Page” is to avoid any page reload with activation of your Powerstep.
After creating these two files, adding the two lines to your Theme file, and updating your Cart Theme, your Powerstep should appear.
What if my powerstep does not show up?
If your powerstep does not show up, its likely because your Add To Cart button has a different class or ID. Inspect your button and insert the class/id of the .product-form__cart-submit class in the code.
Exit Intent #
The Exit Intent popup reacts when a visitor tries to leave your webshop. It pops up and displays interesting products, possibly converting a leaving visitor to a buying customer.
Setup #
Follow these 5 steps:
Make a new of Website Content in my.clerk.io
Choose the right logic for it - We suggest “Visitor Recommendations”.
From Insert Into Website, copy the provided embedcode and go to your Shopify backend.
Go to Online Store -> Themes -> Actions -> Edit Code and insert the code in the file that generates all pages. This is normally theme.liquid.
Add: data-exit-intent=“true” to the embed code you just placed.
Example
<span class="clerk"
data-template="@exit-intent"
data-exit-intent="true">
</span>
Inserted in theme.liquid
Now you will see the exit intent pop-up when anyone tries to leave the page.
Remember to style your content in Designs at my.clerk.io
All recommendations containing the data-exit-intent=“true” will trigger the exit intent pop up.
Dynamic filtering #
The Clerk.io Filters can be used directly in the embed codes using the data-filter attribute. This allows you to make dynamic filters in the logic based on variables in the webshop.
Below you’ll find a few examples, but you can use this in many other ways.
Example 1: Display products of a specific type or brand #
You can filter sliders to only show products from within the same type or from the same brand/manufacturer .
In this case you need to use Shopify’s logic for fetching the type. This is usually ’{%raw%}{{ product.type }}{%endraw%}’
Remember: Its important to add single quotes around the variable:
<span class="clerk"
data-template="@type-slider"
data-filter="type = '{%raw%}{{ product.type }}{%endraw%}'">
</span>
Example 2: Display products that causes a free shipping limit to be reached: #
Assuming you shop has a variable called {{ order.shipping_limit }} that contains the remaining amount needed for the customer to reach the free shipping limit, you can use a dynamic filter that looks like this, to only display products above this price point:
<span class="clerk"
data-template="@complementary-to-basket"
data-filter="price > {%raw%}{{ order.shipping_limit }}{%endraw%}">
</span>