A Tumblr Shopping Cart for Quick E-Commerce (< 2 Minutes)!

Tumblr is awesome.

It's as easy to use as it is beautiful.

Over the years, it brought me a healthy dose of laughter, inspiration, and discovery.

Throughout my numerous blog visits, I would have probably bought some of the stuff I discovered. And back when I had a blog myself + a little home-made t-shirt business, I would've loved to sell on Tumblr. But here's the problem:

There's no "native" way to sell on Tumblr.

Which doesn't mean there isn't a way. If you're a serious user of the blog platform, you've probably asked yourself:

Well, I've got an answer for you. It's called Snipcart, and it'll allow you to add a shopping cart to Tumblr in two minutes. No, I'm not kidding. Yes, we brag about the rapidity of our shopping cart integration all the time.

So today, I'm going to prove how quick enabling e-commerce on Tumblr really is with Snipcart.

Ready? Let's do it.

Step 1: Copy-pasting the shopping cart code snippet in Tumblr

Of course, you'll need a Snipcart account for this whole thing to work! You can sign up free anytime. :)

We’ll start by adding the magical required JS and CSS files—just two short lines of code—in your site's tag. This will literally inject the shopping cart inside your Tumblr site!

You can find the snippet under Account > API Keys in your Snipcart merchant dashboard. Copy it, and head to Tumblr.

Once you're logged into your Tumblr dashboard, head to Account > Tumblrs > Edit appearance.

Now hit the Edit theme button next to the Website Theme option.

And here we are! Select the Edit HTML link under Custom theme:

All sorts of colourful lines of code will pop up. Don't worry; we don't need to read or change any of that! All you have to do is find the closing tag of your site's head. Protip: hit CTRL + F "</head>" to get there real quick.

Now paste the snippet of code you previously copied from your Snipcart dashboard:

Done? Hit both Update preview, then SAVE.

Step 2: Add products to your Tumblr e-commerce site

We're already halfway through, folks!

Quit your editor and go back to your dashboard. We've added the shopping cart; now it's time to create some products to sell on your Tumblr blog.

We'll use the Text post to do just that.

Now for the slightly trickier part.

Snipcart products are created using dead-simple HTML attributes. Which basically means you can transform any link, image, or button on your blog into a buyable product. For this tutorial, we'll add a product on a "buy button" in a Tumblr text post.

Let's say you want to sell a geek t-shirt on your blog.

First, in your Text post, select the HTML editor:

You'll need to enter the following HTML code to create your product and buy button:

<button 
    class="snipcart-add-item button" 
    data-item-name="The Geek Shirt" 
    data-item-price="20.00" 
    data-item-id="42" 
    data-item-url="http://snipcart-demo.tumblr.com/post/150324386603/the-geek-shirt" 
    data-item-description="Be the coolest geek in town with this awesome shirt." 
    data-item-image="https://i.imgur.com/BbCiBGg.png" 
    data-item-weight="20">BUY NOW
    </button>

The data-item attributes you're seeing are merely the details Snipcart need to create your product so you can sell it in your shopping cart.

A few important notes here:

• Keep the snipcart-add-item class at all times.

• One of the most important Snipcart product attributes is the URL. You'll need to save your post first in order to get its full URL. Once you do, simply edit your post and copy paste its URL in the data-item-url attribute.

• You can use other CSS classes on your button to style it however you want. I used this website to create a .button style for this demo. Then, I went to Account > Edit appearance > Edit theme > Advanced options > ADD CUSTOM CSS. From there, I pasted the CSS code generated on the site I mentioned, like this:

• The text you enter just before </button> is the call-to-action your button will display on your blog.

• I also added an image to my Text post + a little product description. Doing the same will make your product post look sexier!

And now, ladies & gentlemen, let's have a look!

There you have it, a full shopping cart on a Tumblr site, ready for e-commerce!

Taking your Tumblr e-commerce site to the next level

Once you've signed up for Snipcart and added products to your site, you'll be able to manage your e-commerce operations inside a comprehensive merchant dashboard:

From there, I'd strongly advise leveraging both the Discounts & Abandoned carts sections. They'll allow you to boost sales with promotions, and cut down on abandoned orders with clever retrieval emails! :)

And if you want to create a truly custom e-commerce experience, you should definitely look into customizing your Tumblr shopping cart. Now, this will require some more serious coding. So depending on your development skills, you might want to get some help from a developer, or try learning some cool code basics first!

Conclusion

Adding a shopping cart and buy buttons to Tumblr with Snipcart was a fast and smooth experience. But we could've easily embedded our products inside simple text links (<a href>) or images (<img>) too!

Tumblr has a tremendous, voluminous community, and I hope this post makes Tumblr users want to tap into this huge e-commerce potential. As for us at Snipcart, we'd sure love to see more lean e-commerce sites running on Tumblr. :)

If you enjoyed this post and found it valuable in any way, go ahead and send a tweet our way. I'd really appreciate that! Got any questions regarding Tumblr & Snipcart? Feel free to hit the comments. :)