1. On the stores page (http://cartshingle.com/stores/), click on Add New Store.
(If you're not signed in, you'll be asked to sign in before you can access the page).
2. Fill out the store information on the form.
* Webhook URL
Webhook URL is used for API integration. If you want to build your own order administration/shipping processing system,
then the web hook url will tell the cartshingle system where their server lives so any time an order is placed, the cart shingle server
can transmit the details to your system.
4. Click the create store button.
You will be redirected to the store home for the store you have just created.
Notice that the store will not be operational until one product and one shipping option have been created. Navigate to that tab and we'll get started creating a product.
1. Click the add a product button to get started.
2. Fill in the information for your product on the form.
* Weight: We are currently working on adding weight based shipping so you can tie cartshingle into your UPS/FedEx shipping account. It has been removed from the form for the time being.
3. Save the product
You should now see your new product in your products list.
Now navigate to the shipping tab and we will set up a shipping option.
1. Click the Add Shipping Option button
2. Fill in the form regarding your shipping method
* shipping option type: Currently only flat rate shipping is available. We're working on weight based shipping, and it should be available soon.
3. Submit the form and you should see your shipping option added to the list.
Now we're almost ready to plug cartshingle into your website.
1. Obtain the store snippet.
On your Store Home copy your store initialization snippet into the 'head' of your html file.
2. Obtain the product snippet.
On your products page click the eye icon () for your product to view it's snippet.
3. Plug the snippets into your html
Voila! There's a quick simple item on your page. it should look like this:
Lets create a few more items and add them to the page. As you can see, each item gets wrapped with the cartShingle_shelfItem class. When the add to cart is clicked the item_add class tells cartshingle to add it's parent cartShingle_shelfItem to the shopping cart.
5. Set up a page for your shopping cart, and checkout
We've made it easy to embed the shopping cart and checkout into your page.
Add this snippet to your page which you will have the shopping cart.
Make sure you add in a link to the page your shopping cart will be on. Which will need the following snippet on it:
Now you have a functioning store in test mode. When your store is in test mode, you can go through and test all of the steps of an order without actually having real credit cards being charged. While in Test Mode, fees will not be charged.
This credit card can be used for testing the functionality of the checkout:
There are additional numbers that can be used to test different credit card scenarios available on stripes testing documentation here
Also, test orders are filtered in your orders tracking page, so they won't interfere once live mode is enabled.
6. Connect to stripe
Now that we've got all the working parts in place, lets connect stripe to our store.
Go to your store home page on the cartshingle site and click the Connect to Stripe button.
You will be redirected to Stripe.com (our credit card processing partner).
Once you complete the Stripe.com registration, you're returned to the cartshingle site.
Each store you create will need to be connected to stripe in this way.
Now you're connected to Stripe and your store is operating in Live Mode. Credit cards will now be charged when going through the checkout process. Fees will be charged while the store is in live mode. If you need to return your store to test mode, there is a button on your store home to switch back to test mode.
These items we added are rather simple, but cartshingle allows us to create far more complicated items on our site. There are two methods to give item information to cartshingle. The first is by using the 'item_*' class. Using the class 'item_name' tells cartshingle that that element contains the name of your item. 'item_token' tells cartshingle that it contains your items token.
We've already seen a few classes that can be used to tell cartshingle things about your item. What if we wanted to be able to use an input to add more than one of an item to the cart? Cartshingle makes this easy. Lets add the quantity to Item 1. Our html will look something like this, with an input with a type of number, and the class 'item_quantity'
Now when Add to Cart is clicked for Item 1, the quantity will be added to the cart as well.
Cartshingle also allows for custom attributes to be used as well. Lets say Item 2 is going to be a t-shirt and we want the customer to be able to select the size of the shirt, specify a quantity for purchase, and view an image of the product. We'll need to add an image, and a way for the customer to select size and quantity
Our code should now look something a little like this:
For our third example, I'm going to do something a little more complicated. It will be a photo which is going to be sold with a few different frame options. I've added 2 more items to my cartshingle store and given them the proper price points for our different frames. Because I'm going to have more than one item_name and item_price in this cartShingle_shelfItem, I have to mark the data a little differently.
Notice there are a few things different here: I've created a select list with the class item_token. When add to cart is clicked, cartshingle will find which option is selected and retrieve the information for the selected option. Our name and price are identified to cartshingle via the 'data-*' attributes.
One other fun tidbit in here for you to use. You'll notice just above our add to cart button for item 3, I've added in a span with the class subtotal. This will automatically subtotal the price and quantity for the cartShingle_shelfItem for you. When the quantity is incremented or in the case of our product here, when a different option is selected, the subtotal will be automatically updated to reflect the change.