Follow

Adding e-commerce

Adding e-Commerce functionality to your Pixel Together site 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 Pixel Together 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 Pixel Together 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 in Pixel Together. Please note that adding Snipcart requires a Pixel Together 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 Pixel Together 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 setup 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 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 Pixel Together updates will provide the functionality to setup 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 the you will now need to setup 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.

 

Going Live 

To Go Live you will need to setup 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 within Pixel Together.

 

Other Features

There are other features that can be added into 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 

Articles on how to add these is available at Snipcart Documentation or alternatively do not hesitate in contacting our support team who will happily guide you through the process of adding these.

 

Comments

Powered by Zendesk