How to Add Custom HTML to Snipcart

We've been quite busy at Snipcart since 2015 came around. Between tackling a new WordPress integration, diving into static e-commerce and hosting a live Hangout for Craft developers, we haven't slowed our roll yet. Of course, we've also been going full-throttle on the less flashy side of things (read: product development and support). Today, we chose to discuss one interesting customer request that recently came in through the mist of UserVoice tickets:

Can I add a custom footer inside the popup showing relevant info to my customer?

Good news: this can indeed be done with our shopping cart. As you may already know by now, we're a bunch of geeks here at Snipcart. So we got together, talked a little, and figured out a real cool solution for this particular case. We believe it can be helpful not only for the dev who requested it, but also for other Snipcart users. Now let's quit the chit-chat and get to it:

Injecting custom HTML in your cart: walkthrough

The final output of what we're about to show you looks like this:

Snipcart popup

To get to that result, we use our Javascript API events. When the Snipcart popup opens, we add custom HTML using jQuery.

First of all, we need to bind to the cart.opened event.

Snipcart.execute('bind', 'cart.opened', function () { });

In the callback of this method, the first thing we need to do is to unbind our website from this event. If we don't, the custom text will be appended to the DOM multiple times.

Snipcart.execute('bind', 'cart.opened', function() {
    Snipcart.execute('unbind', 'cart.opened');
});

Then, we must use a template to insert our custom text into our website. We added the following code just before closing the body tag.

<script id="cart-content-text" type="text/template">
    <div class="custom-snipcart-footer-text">
    <h2>Some information</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget velit    luctus lectus fringilla sodales. Phasellus finibus lectus nunc. Aenean semper lacus vitae porttitor tempus. Etiam quis luctus diam. Vivamus luctus justo vel elit vulputate vehicula et sed justo. Fusce pharetra ipsum sit amet nisl vestibulum venenatis. Maecenas eu sem id est fringilla ullamcorper nec ut nunc. Donec finibus nibh at mauris tincidunt, sed vehicula turpis eleifend. Nam quis mollis magna. Ut imperdiet tincidunt porta.
  </p>
    </div>
  </script>

Wondering why we used type="text/template"? By doing it this way, we make sure the content of the script tag is never displayed on the website but remains available to select via a jQuery selector.

We now need to append this code into Snipcart when it pops.

Snipcart.execute('bind', 'cart.opened', function() {
    Snipcart.execute('unbind', 'cart.opened');
    
    var html = $("#cart-content-text").html();
    $(html).insertBefore($("#snipcart-footer"));
});

We use the insertBefore method to include the DOM element just before the #snipcart-footer element so it stays at the same position inside the cart.

Okay now: go ahead, refresh your page and hit any buy button. See the custom HTML text in your cart? Awesome, right?

Just so you know, we also added some styles in my stylesheet to make it all look a little better. Here it is:

#snipcart-main-content .custom-snipcart-footer-text {
  background-color: rgba(240,240,240,1);
  padding: 10px 20px;
}

#snipcart-main-content .custom-snipcart-footer-text h2 {
  font-size: larger;
  font-weight: bold;
  padding: 10px 0;
}

Using #snipcart-main-content for each CSS selector allows you to have CSS rules specific enough.

It was a quick, easy little trick, but we believe it was worth sharing!


You could also add custom HTML content inside your standard Snipcart shopping cart wherever you want: not just in the footer area, but also for content or styling purposes. Let us know if you need a hand with that! ;)

Having users come up with all kinds of needs and ideas for Snipcart really is a blessing. It keeps us on our toes and reminds us to push our product in interesting directions. If you have any ideas or feedback you'd like to send our way, you can check out our UserVoice support page.

If you've enjoyed this short walkthrough, please take a second to share it on your social media channels! Your thoughts on this little trick (or anything else, really) are welcome in the section below.

Suggested posts: