Skip to content
Astro Snipcart

Introduction

This integration is a solution for rapidly building and selling products on the web. Astro Snipcart is a free and open source e-commerce Astro integration that is built on top of the Snipcart platform.

Create an e-commerce site with just a few lines of HTML and Astro components!

What is Snipcart?

Snipcart is a powerful, developer-first HTML/JavaScript shopping cart platform. You can use it to add custom e-commerce to any sites or web applications in minutes.

Demonstration A fully functional e-commerce demo site built with Astro Snipcart
Motivation An explanation as to why this integration exists
Snipcart Documentation The Snipcart platform documentation

Features

This Astro integration contains all of the features that you need to build an e-commerce site with Snipcart, including:

  • ✅ Automatic installation of the Snipcart library
  • ✅ Zero JavaScript by default (apart from Snipcart)
  • ✅ Astro components to define products
  • ✅ Astro components for features such as displaying basket and total price
  • ✅ TypeScript based product definitions surfaced as Astro component props
  • ✅ An optional small design system providing common e-commerce components
  • 🔜 Not just products, but subscription support also!

Getting Started

Read the Getting Started guide to learn how to install and use the Astro Snipcart integration. Here is a small preview of how easy it is to create a product.

/components/Product.astro
<Product
    as="span"
    id="SKU-0003"
    name="Standard T-Shirt"
    price={12.99}
    description="Every day basic t-shirt"
    image="/blue-t-shirt.jpg"
    categories={['cotton', 'clothes', 'blue']}>
    <Button>
        Add
    </Button>
</Product>

Fetching products

Store and load your data from anywhere that suits your project best!

Data Storage