How to Sell Online with CloudCannon

Hey, you, website builder. Yeah, you. What if we were to tell you you can ditch FTP passwords, deployment procedures and painful installations/maintenance? Would you like that? Yeah? Well, that’s what the guys over at Cloud Cannon are offering you.

What’s Cloud Cannon?

Harnessing Dropbox’s power, their team managed to create a fluid, straightforward web-building experience. You can click here to find out more about the benefits and how it works. Basically, what you have to do is this: copy your existing HTML to Dropbox, specify editable areas of content for your clients, and BING! you’ve got yourself a live website your clients can update through a simple CMS. Kind of awesome, right?

We’re suckers for simplicity and control over code here, as you may have noticed. And when we discover tools like Cloud Cannon, we get all excited and stuff. So when one of Cloud Cannon’s founders hit us up on Twitter, we were thrilled about working something out with them. They offer the same kind of swiftness with their solution we do with Snipcart, so it really seemed like a match made in Heaven.

Why Snipcart is a good fit for Cloud Cannon

A Cloud Cannon website is just HTML, CSS and JavasScript files: exactly what Snipcart needs to live. A lot of our customers are already using Snipcart on static websites; Cloud Cannon simply makes it easier for them to deploy and manage their websites.

As we’re writing this, the Cloud Cannon option is mostly suitable for web merchants who are selling a limited number of products. If you’ve only got a small set of products to manage, doing it right in the files won’t be too much of a hassle. Handling a larger, more complex inventory might require another system though.

Okay, enough with the chit-chat. Let’s get down to business. Here’s how you can enable e-commerce on Cloud Cannon sites:

Creating a new site

First, you’ll need a Snipcart account and a Cloud Cannon account. Got it? All right, log into Cloud Cannon.

Next step will be to authorize your Dropbox account. Now we need to create our first website. Just click on the Add New Site button and fill in the needed information.

cloudcannon-snipcart1 The most technologically challenging part of the process right here.

I decided to start with a free template. Cloud Cannon actually provides 3 templates you can use to bootstrap your website. I will use the Cirrus one. They don't actually have any templates for an ecommerce website right now, but who knows, maybe this blog post will ring a bell for the Cloud Cannon team. ;)

cloudcannon-snipcart2

You can choose yours by clicking on Pick a free template. You will then have to wait a few seconds for your files to be uploaded to your Dropbox.

Adding the Snipcart required files

If you’ve already heard about Snipcart or went through our documentation, you should know that you need a specific file to make Snipcart work. Basically, it’s snipcart.js, which contains the application itself and a stylesheet to make the cart look good.

Cloud Cannon provides a basic templating engine that allows us to render repetitive sections like the header and the footer of the website. The theme that I chose actually have a header in which I will add the Snipcart required file.

You can use the Cloud Cannon dashboard to edit the files directly or simply open the folder that has been created in your Dropbox folder under Apps\Cloud Cannon\{website name}.

Personally I prefer opening the folder in Atom Editor.

Open the _header.html file.

The quickest way to know what to include is to log into the Snipcart dashboard and then go in Account > Credentials section. You will see the exact code you need to paste in the header file.

My _header.html file now looks like this:

<!-- lang: html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<title>Cloud Cannon and Snipcart are happy together</title>
<link rel="shortcut icon" href="favicon.png">

<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Raleway:900,400,300' rel='stylesheet' type='text/css'>
<link href="/css/style.css" rel="stylesheet">

<!-- Snipcart files -->
<script type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" 
  id="snipcart" 
  src="https://app.snipcart.com/scripts/snipcart.js"
  data-api-key="MzMxN2Y0ODMtOWNhMy00YzUzLWFiNTYtZjMwZTRkZDcxYzM4"></script>

<link type="text/css"
  id="snipcart-theme"
  href="https://app.snipcart.com/themes/base/snipcart.css" 
  rel="stylesheet" />

Adding a store section

The next thing I will do is add a link to the store in the menu. Open the _navigation.html, which is another section like the _header.html file that I’ve just modified.

I will add a li element in the list:

<!-- lang: html -->
<li><a href="/store">Store</a></li>

Creating the store page

Create a folder named store in the root of your website and a index.html file in it.

You certainly understand that the code examples below will not be the same if you did not pick the same template I chose or if you’re starting from scratch.

My index.html file now looks like this:

<!-- lang: html -->
<!-- include /_header.html -->

<div class="hero thin-hero">
  <!-- include /_navigation.html -->

  <div class="container">
    <h2>Store</h2>
  </div>
</div>

<section class="alternate-section">
  <div class="container">
  </div>
</section>

<!-- include /_footer.html -->

Adding your product to the page

In my example, I will be selling a poutine, which is the iconic meal of our place of business (Québec, Canada).

I suggest you look at our documentation to know what are all the available properties when defining a product. For the demo, I will just add the required ones.

<!-- lang: html -->
 <button class="snipcart-add-item"
  data-item-id="POUTINE"
  data-item-name="Poutine"
  data-item-price="10.50"
  data-item-image="http://mda.bigoven.com/pics/diamonds-classic-poutine-2.jpg"
  data-item-url="/store">Buy it NOW</button>

The whole file now looks like this:

<!-- lang: html -->
<!-- include /_header.html -->

<div class="hero thin-hero">
  <!-- include /_navigation.html -->

  <div class="container">
    <h2>Store</h2>
  </div>
</div>

<section class="alternate-section">
  <div class="container">

    <img src="http://mda.bigoven.com/pics/diamonds-classic-poutine-2.jpg" />

    <button class="snipcart-add-item"
      data-item-id="POUTINE"
      data-item-name="Poutine"
      data-item-price="10.50"
      data-item-image="http://mda.bigoven.com/pics/diamonds-classic-poutine-2.jpg"
      data-item-url="/store">Buy it NOW</button>

  </div>
</section>

<!-- include /_footer.html -->

You can now navigate to your website and buy some marvelous poutine ;)

cloudcannon-snipcart-poutine

To see a live example of Snipcart running into a Cloud Cannon website, you can go to http://snipcart-cloudcannon.cloudvent.net/store.

Conclusion

This blog post illustrated the most basic way to plug Snipcart into your Cloud Cannon site. We’re currently talking with the Cloud Cannon team to find out if we can come up with a smoother, more native e-commerce integration. Of course, we’ll keep you guys updated. If you’re trying to set up your shop on a Cloud Cannon site and need our help with anything, drop us a line at geeks@snipcart.com.

Have you had experiences with static CMSs worth sharing? If so, hit the comments and let us know!

Suggested posts: