Using Clerk.io in Your Store

Setting up a Powerstep in Shopify

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

Overview

Adding a Powerstep to your webshop is a great way to increase basket sizes of customers who have already added products to the cart.

This takes four key steps:

  1. Creating an Asset file to hold the functions related to the Powerstep

  2. Creating a Snippet file for the design and styling of the Powerstep

  3. Adding to your Theme file to make sure the Powerstep is deferred as the last-read script file, as well as adding a line to make sure the Powerstep renders appropriately.

  4. Adjusting the Cart Type in your Shopify Theme

First, create a .js Asset for the jQuery functionalities:

  • Under Assets, click "Add a new asset", and name it clerk-powerstep.js

  • Enter the following code to the newly created file, and be sure to Save:

        jQuery('[data-action="add-to-cart"]').click(function() {
    open_powerstep();
    Clerk("content",".clerk-powerstep-recommendations");
    });
    function open_powerstep() {
    jQuery('#clerk_powerstep').show();
    jQuery('#clerk_powerstep').animate({
    top: "30px",
    },
    100,
    );
    jQuery('#mini-cart').hide();
    setTimeout(function(){
    jQuery('#mini-cart').attr('aria-hidden', 'true');
    }, 1000);
    jQuery('.cart-popup-wrapper').css('top', "-100%");
    jQuery('.cart-popup-wrapper').hide();
    }
    function close_powerstep() {
    jQuery('#clerk_powerstep').animate({
    top: "-100%",
    },
    100,
    );
    setTimeout(function() {
    jQuery('#clerk_powerstep').hide();
    }, 1100);
    jQuery('#mini-cart').show()
    }

The new file should now look something like this:

Next, add a .liquid file within Snippets, and name it clerk-powerstep.liquid.

  • Paste the following code into the newly created Snippet:

    <div style="display: none;" id="clerk_powerstep">
    <div class="clerk_powerstep_header">
    <h2>You added <b><u></u></b> to your cart.</h2>
    </div>

    <div class="clerk_powerstep_image">
    <img src="" alt="You added <b><u></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="[]"></span>
    <span class="clerk-powerstep-recommendations"
    data-template="@powerstep-visitor-recommendations"
    data-products="[]"
    ></span>
    <span class="clerk-powerstep-recommendations"
    data-template="@powerstep-best-sellers"
    data-products="[]"
    ></span>
    <span class="clerk-powerstep-recommendations"
    data-template="@powerstep-best-offers"
    data-products="[]"
    ></span>

    </div>

    <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>

Lastly, add the appropriate script and rendering calls to your webshop's Theme file.

In the your main Theme file (most often theme.liquid), you'll need to add two lines for Powerstep functionality and rendering:

  1. A script to call the Powerstep functions via your newly created Asset file:


    If you're working with multiple functions called within <script> tags, be sure to add this as the last script, and make sure to include defer in the <script> tag so that this line is the last function called here:

    <script src="" defer> </script>


    The addition should look something like this in your theme file:

     

  2. A line to render the Powerstep Snippet:

    To render your new Powerstep, add the following line just before the closing </body> tag in your main theme file, likely theme.liquid:

    
    

...To look something like this:

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.