A Powerstep 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 look like this out of the box, after a product is added:

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:

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();
        Clerk("content",".clerk-powerstep-recommendations");
});
 
function open_powerstep() {

      $('#clerk_powerstep').show();
      $('#clerk_powerstep').animate({
                    top: "10%",
                   
                },
                100,
            );
      $('.cart-popup-wrapper').css('top', "-100%")
   $('.cart-popup-wrapper').hide();
     
    }
 
  function close_powerstep() {

      $('#clerk_powerstep').animate({
                    top: "-100%",
                   
                },
                100,
            );
                                     
        setTimeout(function() {
         
          $('#clerk_powerstep').hide();
       
    }, 1100);
     
    }


</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;
}
 
  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;
}
 
  .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;
}
 
 
</style>
<div style="display: none;" id="clerk_powerstep">
  <span onclick="close_powerstep();" class="clerk-popup-close">×</span>
  <div class="clerk_powerstep_header">
        <h2>You added {{ product.title }} to your cart.</h2>
  </div>
 
  <div class="clerk_powerstep_image">
    <img src="{{ product.images[1].src | img_url: 'x150', scale: 2 }}" alt="You added {{ product.title }} to your cart.">
  </div>
 
  <div class="clerk_powerstep_clear actions">
        <button class="action primary clerk_powerstep_button clerk_powerstep_continue" onclick="location.href='/cart/';">Go 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>

</div>

2.4. Your Powerstep 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. 

Did this answer your question?