Francky Four Fingers is a total comics buff. He's the kind of guy who eats comic books for breakfast, you know? He even blogs about comics, all the time. He's got a bunch of geek readers following his blog on the regular. Francky Four Fingers also happens to have a pricey comics collection he wants to sell. And he'd sure love to sell it directly on his blog, to one of his loyal readers.
We're going to help ol' Francky out. Maybe we'll help you too in the process?
Most likely, as a blogger, you have more than quality content to offer to your audience. Maybe you're a coach, a SaaS founder, a fiction writer, a music producer? Either way, you'd highly benefit from your blog audience converting into customers. And if you're doing quality work, they would too. So selling directly on your blog seems to be a good way to facilitate that transition from content to checkout, from post to purchase.
With Snipcart, you can embed buyable links and buttons in your articles. Your visitors can be prompted to purchase products while they're consuming your content.
Today, I'll show you how to do just that with a top-tier blogging platform: Ghost.
What is Ghost, and why it's awesome
Ghost is a simple blogging platform started by John O'Nolan & Hannah Wolfe in 2013. I recently soft-launched a personal blog using their hosted plan, and it's amazing. I compiled the reasons why I chose Ghost in my first post, but I'll also sum it up for y'all right here:
Markdown-based, lean UI editor
Lightweight feature set (no overkills)
Easy 3rd party integrations
Easy SEO & meta data settings
Openness & active community
The Ghost Foundation in charge of the project is a non-profit, and its application software is free and Open Source. Doesn't get much better than that, ugh?
Now let's show you how to integrate Snipcart, our HTML/JS-based shopping cart, to a Ghost blog. For this demo, I'm going to set up a comic books blog where we sell our own collection of comics on the side.
Quick note: for all you hardcore devs following us, this one's going to be an easy one. :)
4 steps to start selling on your Ghost blog
Step 1: Sign up for Ghost(Pro) + Snipcart
First, sign up for a Ghost(Pro) blog, and sign up for a Snipcart account. They're both free to get started. You should get your Ghost blog up and running (a few clicks) before setting up your Snipcart account. You'll need your Ghost blog URL when activating your Snipcart account.
You could also download the whole application and host it on a server of your own.
You should end up with a Ghost blog ready to roll in a few minutes tops.
You can take a minute to read the intro post if you'd like. It'll give you a feel of how to operate the editor and create posts. It's pretty simple, really. Ghost uses Markdown syntax for formatting, and this intro post has the basics covered.
Step 2: Integrate your shopping cart platform with Snipcart
Access your own Snipcart merchant dashboard.
Notice that I'm staying in Test mode for this demo (Snipcart is forever free when you use it in the test environment).
From there, hit the little user icon in the top right corner and go to Account > API KEYS.
Okay, copy the code snippet provided on this page.
Now head back to your Ghost blog editor, and go to the Code injection section. In the Blog Footer box, paste the code you just copied.
Note: I copied it in the footer because jQuery is already included in this default theme (hence not visible in the code injection box). It must always be above Snipcart's .js file.
Pasted? Nice. Hit Save.
Well my friend, it seems like you have the required
snipcart.js file and our modal cart CSS stylesheet on your Ghost blog. Good job. Let's go set up that blog and create some products now, shall we?
Step 3: Set up the blog: new post, new page + navigation
In your Ghost editor, in the left sidebar menu, select General. Update the settings however you'd like.
Note: If you scroll down a bit, you'll be offered to change your theme. Feel free to hit the Ghost Open Marketplace and pick another theme. For this demo, I stuck with the default one, Casper. Pretty slick IMO.
While you're in the editor, take some time to update your author profile in the Team section.
Creating the first post
We should create a post for this blog now, right?
Hit the New post section on the left, name that thing, and write your heart out. Here's a sneak-peek of my dummy comics post in editing mode:
Creating a static About page
For the sake of demonstration, we'll create a static page for this blog too. We'll then be able to add it to our navigation menu. Again, hit New post.
Pick a page title and write the appropriate content. I made a classic About page. You see the little settings icon on the top right corner of your post preview? Click on it. Then, select Turn this post into a static page.
Next, head to the navigation section in the left sidebar menu.
Name your navigation item, and insert the appropriate URL (just like I did above).
Step 4: Insert Snipcart products in your post + static page
Okay, let's tackle the crunchy part.
Go back to your Content section, select your first post, and hit the edit pen logo.
You'll need to define the Snipcart product you want to sell first. I used the following HTML attributes for the demo:
<a href="#" class="snipcart-add-item" data-item-id="1" data-item-name="[DEMO] DC vs Marvel Bundle: Collector's Edition" data-item-price="1200.00" data-item-weight="20" data-item-url="http://crazy4comics.ghost.io/marvel-vs-dc-comics/" data-item-description="A cool comics bundle for cool collectors. This isn't a real product, it's for a demo." data-item-image="https://upload.wikimedia.org/wikipedia/en/6/63/DC_Versus_Marvel_1.jpg"> buy the bundle here </a>
As you can see, the simple HTML code above represents a DC vs Marvel Bundle: Collector's Edition, sold for 1200$.
A few notes here:
data-item-urlto make sure it's the same page as the one you're selling the product on.
You can play around with the other classes; I added a
data-item-imagefor good measure!
You can read more about product definition with Snipcart in our documentation.
All you have to do now is include the HTML link into a clearly written call to action and set is as a text link in your Ghost Markup editor. Like this:
Now if you save, open that page, and click on the link:
Go ahead: try it for yourself on the post page directly.
And in case you want a second example, I also inserted the same product in my static About page. All I had to do was change the
If you were done with testing and ready to sell actual products on your Ghost blog, all you'd have to do is swap the test API key for the live one. You can read more about it here.
Setting up a Ghost blog and integrating Snipcart's shopping cart platform took me less than an hour. Again, I believe this post proved how much our e-commerce solution plays well with almost any web platforms. The Ghost + Snipcart combo opens the door to many cool content/commerce scenarios. I hope some of you end up using it!
If you'd like to take the integration a bit further, you could always download a Ghost theme and customize Snipcart's cart look and feel with CSS.
You can also check out Ghost for Beginners for more helpful resources to get started with Ghost.
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 Ghost, Snipcart or this post? Feel free to hit the comments.