Setting up a Powerstep in Shopify

How to show the best Cross-Sell products when your customers add products to the cart.

Platforms:

Shopify

Adding the Powerstep

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.