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. 

Did this answer your question?