Adding e-Commerce functionality to your website is now possible thanks to an integration that has been built with Snipcart.
What is Snipcart?
Snipcart is a comprehensive e-commerce platform that has been designed to be easy to incorporate e-commerce into any custom website. Snipcart is fully featured to offer:
- Mobile Friendly checkout
- Connect with payment gateways
- Merchant dashboards
- Order processing
- Discount logic
- Shipping options
- Customer Dashboard
- Mobile friendly checkout
- Integrations with other systems
- And much more
With the flexibility offered by Snipcart in combination with the flexibility in our editor you are able to add purchasing options to anywhere within the site, making a unique user experience that can't be achieved within standard e-commerce systems.
Setting up SnipCart
Setting up Snipcart in your page is super easy. The first step is sign up with Snipcart.
Once signed up you will need to generate a Test API key. Below is a screenshot to show you where to do this.
You are able to paste the API key into your website settings. Please note that adding Snipcart requires a premium plan.
With the API key in place you will have unlocked the ability to add the Snipcart checkout and buy buttons throughout your site
Adding a Buy Button
With Snipcart setup in your site, you can now add buttons wherever you like on your pages to purchase items.
You can turn any button, image or text into a link to purchase a product. To add simply go to the properties panel, under the tab 'Link' and select the link type "Purchase Product"
Once selected you will now be able to add in the product details for purchase. Add in the required names of ID, product name, price.
You also have the ability to add extra optional information such as weight that can be used by Snipcart to help calculate shipping quotes. On top of this, you can also add other options such as product size, colour, or anything else you like you the advanced code snippet (see below)
Custom Product Properties
Using the Advanced Code field you can add in options for the user to select when purchasing an item. You can add in options such as Size, Colour, Labels or if the product is a Gift - In fact, you can name the options as anything you like.
These options can be set up as drop-down selections, checkboxes or text fields. You can also extend them so the pricing changes depending on the option selected (useful if your product changes the price for different sizes).
To view details on how to write this code please check out Snipcart's documentation for setting up custom fields.
Future updates will provide the functionality to set up these options without coding, however in the meantime feel free to reach out to our support team if you require assistance in setting this up.
Adding the Shopping Cart
With your Buy buttons in place you will now need to set up a link to open up the shopping cart. This has been made super simple.
You can use a button, image or text to be clicked on to open the shopping cart and checkout. Similar to the buy button you simply need to select the link type of Shopping Cart.
That's it! When clicked the shopping cart will open up for the user no matter what page or device they are using.
To Go Live you will need to set up aspects of the payment, delivery and invoicing within Snipcart. This is easy to do and Snipcart offers the latest documentation on how to do this.
Once ready you will need to add the Live API Key into your website settings.
There are other features that can be added to your website to extend upon Snipcart's features. Other options include:
- Display number of items and/or total value of products in the shopping cart
- Customer Dashboard to track orders
- Subscriptions and recurring payments
- Custom checkout skinning