Adding a Shopping Cart with Snipcart

Snipcart is a shopping cart solution designed to drop neatly into any web project. Including it in your project allows any HTML you write to instantly become a “buy button” with the addition of several Snipcart-specific attributes.

Combine it with a source of products (like a CMS or an e-commerce platform such as Etsy) and a payment processor (like Stripe) to build a complete e-commerce experience for your customers.

Prerequisites

To get started, you’ll need to have the following set up:

• A Gatsby site with gatsby-plugin-snipcart installed
• A Snipcart account
• A Snipcart test API key
• A list of products to sell

Installing the plugin adds Snipcart’s shopping cart JavaScript for you, so you can get right to building your e-commerce site. It’s okay if you’re not sure what you’d like to sell quite yet. Using sample products is fine to begin with!

Defining Products

Adding products with Snipcart involves writing HTML representing your product and adding a set of attributes to that HTML. You might write something similar to the following code block for each item in your catalog. This code could be part of a page like index.js or anywhere else you list a product.

Including this information allows a visitor to see what you have for sale, but they can’t do anything with that information quite yet. You’ll need a way for customers to add individual items to their cart. Try adding a button with the following attributes.

Snipcart uses these attributes (data-item-*) to figure out what your customer is trying to buy and how much to charge them. The ID, price, URL, and name attributes are all required but there are several other attributes that you can add to enhance the shopping cart.

Importantly, data-item-url denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the snipcart-add-item CSS class as well as the data-item-id and checks what it finds there against whatever is in the cart.

Note that, while you’re testing, a data-item-url value of "/" is fine. For the checkout flow to work, you will eventually need to replace this with the actual URL at which you’ve published your catalog or product page.

To learn more about defining products, see the Snipcart documentation.

Adding product variants

Snipcart refers to variations like size and color as “product options” or “custom fields”. You can add these custom fields to your products to allow customers to refine their orders.

Building on the stacking ring example, suppose that you wanted to give your customer a choice between available sizes. You would do this by adding a custom field with a name and options.

You can add multiple custom fields by incrementing the index of the data-item-custom attribute. Perhaps you want customers to have the ability to mark each item in their cart as a gift.

Selling digital products

Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file for others to download, you’ll need to upload it to your Snipcart dashboard and then add the resulting GUID as the value of the data-item-file-guid attribute to your product’s markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard.

Customizing the cart

Using Snipcart allows you to retain nearly complete control over your customers’ experience on your e-commerce site. You can configure and customize the cart behavior as well as the product options. Look through your Snipcart account settings to change things like currency, shipping options, and email templates.

Preventing automatic popups

By default, the shopping cart will pop up every time a customer adds a product. To prevent this behavior, set the value of autopop to false in your gatsby-config.js file.

If you choose to prevent this popup, you’ll need to give your customers some other way to access their shopping carts. Create a “show cart” button by giving a button element a class of snipcart-checkout.

Styling the cart

You can override most aspects of the shopping cart, including the CSS. Try inspecting the element you’d like to customize and using your browser’s developer tools to find the correct Snipcart class to override.

You can also customize the cart template itself. For a complete list of Snipcart’s components (with code examples), check out their default theme reference.

Connecting a payment processor

Once you’re ready to receive payments, connect your chosen payment processor to your Snipcart account from the dashboard. You’ll also need to input your credit card information in order to get your live Snipcart key.

The following quote is from the Snipcart payment gateway page:

Please note that you can select only one payment gateway. However, you can also enable PayPal Express Checkout on top of any gateway you choose.

Also, you can switch from a gateway to another whenever you want.

Other resources

• Build an E-commerce Site with Gatsby, DatoCMS, and Snipcart tutorial
• gatsby-plugin-snipcart
• OneShopper Gatsby starter
• Reference guide on sourcing from Etsy
• Reference guide on processing payments with Stripe
• Snipcart documentation