A Powerstep Page is a great way of selling more, since you can react to the fact that the customer is interested in the specific product they just added, by showing the best Cross-Sell products matching it.
The Powerstep will be shown as a full page, when adding the product to the basket:
1. Create Recommendations
1.1. Start by going to my.clerk.io -> Recommendations -> Content
1.2. Create a new Recommendations banner by clicking New Content.
1.3. Give it the exact name "Powerstep Recommendations" and click Create Content
1.4. Choose the Content Logic Best Cross-Sell Products, select a Design and a number of products and add a headline. Then click Update Content:
1.5. Follow the same process to create these 3 other Recommendations:
- Name: "Powerstep Visitor Recommendations"
Content Logic: "Visitor Recommendations" - Name: "Powerstep Best Sellers"
Content Logic: "Best Sellers" - Name: "Powerstep Best Offers"
Content Logic: "Best Sellers" including a filter for "on_sale is true"
2. Insert the Powerstep code in Shopify
2.1. Now you need to add the Powerstep to Shopify. Login to your Shopify backend and go to Online Store -> Themes -> Actions -> Edit Code:
2.2. Find the file that generates your product-page. Usually this is Sections -> product-template.liquid
2.3. Copy the following code to the bottom of the file:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$('.product-form__cart-submit').click(function() {
open_powerstep();
});
function open_powerstep() {
Clerk('content', '.clerk-powerstep-recommendations');
$('#shopify-section-product-template').css('padding-left', '40px')
$('#shopify-section-product-template').css('padding-right', '40px')
$('#clerk_powerstep').css('display','contents');
$('#clerk_powerstep').css('padding-left','15px');
$('#clerk_powerstep').css('padding-right','15px');
$('.product-single').hide();
$('#clerk_powerstep').animate({
top: "10%",
},
100,
);
$('.cart-popup-wrapper').css('top', "-100%")
$('.cart-popup-wrapper').hide();
}
function close_powerstep() {
window.location.href = "{{ product.url }}";
}
</script>
<style>
#clerk_powerstep {
position: fixed;
top: -100%;
z-index: 16777271;
display: none;
width: 90%;
padding: 20px;
margin: 0 5%;
background-color:
white;
border: 1px solid
#eee;
border-radius: 5px;
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.open {
top: 10%;
}
#clerk_powerstep h2 {
text-align: center;
}
.clerk_powerstep_image {
text-align: center;
}
.action.primary {
background-image: none;
background: #1979c3;
border: 1px solid #1979c3;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600;
padding: 7px 15px;
font-size: 1.4rem;
box-sizing: border-box;
vertical-align: middle;
border-radius: 6px;
}
button {
background-image: none;
background:
#eeeeee;
border: 1px solid
#cccccc;
color:
#333333;
cursor: pointer;
display: inline-block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600;
margin: 0;
padding: 7px 15px;
font-size: 1.4rem;
line-height: 1.6rem;
box-sizing: border-box;
vertical-align: middle;
border-radius: 6px;
}
.clerk_powerstep_continue {
float: right;
}
.clerk_powerstep_clear {
overflow: hidden;
}
.clerk-popup-close {
position: absolute;
right: 8px;
top: 3px;
cursor: pointer;
font-family: Arial;
font-size: 32px;
line-height: 1;
color:
gray;
}
#PageContainer {
min-height: 100vh;
}
</style>
<div style="display: none;" id="clerk_powerstep">
<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="{{ 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_clear actions" >
<button class="action primary clerk_powerstep_button clerk_powerstep_continue" onclick="location.href='/cart/';">Continue to Checkout</button>
<button class="action clerk_powerstep_button clerk_powerstep_close" onclick="close_powerstep();">Continue Shopping</button>
</div>
<hr>
<span class="clerk-powerstep-recommendations" data-template="@powerstep-recommendations" data-products="[{{product.id}}]"></span>
<span class="clerk-powerstep-recommendations"
data-template="@powerstep-visitor-recommendations"
data-products="[{{product.id}}]"
></span>
<span class="clerk-powerstep-recommendations"
data-template="@powerstep-best-sellers"
data-products="[{{product.id}}]"
></span>
<span class="clerk-powerstep-recommendations"
data-template="@powerstep-best-offers"
data-products="[{{product.id}}]"
></span>
</div>
2.4. Your Powerstep Page should now show up when a product is added to the cart.
Troubleshooting
If your Powerstep does not show up when adding a product its likely because you are using a different class for your add-to-cart button.
Follow these steps to fix it:
1.1. Find the class of your button. You can do this by inspecting it in your browser:
1.2. In the file where you inserted the Powerstep, locate this line of code:$('.product-form__cart-submit').click(function() {
1.3. Change the class after the dot inside the quotation-marks, to match the class of your button and click Save:
1.4. The Powerstep should now show up when adding a product to the cart.