Build a fully customisable ecommerce solution into your Ghost publication with a Snipcart integration
Snipcart is a shopping cart solution that allows developers to turn any website into a robust ecommerce platform in minutes. It's a developer friendly experience that unlocks the power and flexibility to incorporate products into your site's content. Using the code injection feature within Ghost, it's entirely impossible to integrate with Snipcart directly and start selling products and services from your site.
Sign up for a Snipcart account
Snipcart offer two payment options, with 2% fees on each purchase or fixed fees. Check out their pricing page and sign up for your Snipcart account. Alternatively, you can try out the software for free in test mode.
Once you have signed up, grab your code snippet from the Snipcart dashboard which looks like this with your API key in place:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="YOUR_API_KEY" id="snipcart"></script> <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
You'll find this information inside the
API keys area of your account:
Note that your account and API key will be in test mode by default. You can use test mode for free completely unlimited. To switch to live, you'll need to add a credit card, and then implement Snipcart using the live API key.
Use Ghost Code Injection
In Ghost you can inject code across your entire site or on an individual post or page. Snipcart requires a single piece of code to be implemented across your site, so that you're able to manually add products on posts or pages as required. To do this, we'll use the global code injection feature which can be found in the Ghost Admin settings menu:
Note: We're using
Site Footerinstead of the
Headerbecause the default Ghost theme includes jQuery which is not visible in code injection, and must always be above Snipcart's .js file.
Your site is now fully integrated with Snipcart and you can turn any element on your site into buyable products using code 🎉
Use product attributes in your site's HTML
Since Snipcart is a sensible developer tool - once your code snippet is in place you can then store products directly inside your website's HTML code.
This can be done using an HTML card inside the Ghost editor on any page or post:
How does it work?
All of your product information is stored in the HTML markup. You can basically convert any link or element into a buy button. Here's an example of the
geek shirt button from Snipcart’s homepage:
<button class="snipcart-add-item" data-item-id="2" data-item-name="The Geek shirt" data-item-price="20.00" data-item-weight="20" data-item-url="http://myapp.com/products/geekshirt" data-item-description="Be the coolest geek in town with this awesome shirt"> Try the cart! </button>
You can preview a Snipcart buy button in action on their homepage - when a visitor clicks the buy button it looks something like this:
For more information about creating custom attributes, check out the Snipcart documentation.