Astro Snipcart

Astro Snipcart contains a theme and ready to use Snipcart setup.

Step one:

Use the following snippet somewhere common, such as your layout component, and ensure you setup your environment variable for the API key:

<SnipcartSetup />

Step two:

Allow the user to open their shopping cart:

<CartCheckout>
    <button>
        Open basket
    </button>
</CartCheckout>

Step three:

Create your first product:

<Product
    as="span"
    id="SKU-0001"
    name="Standard T-Shirt"
    url="/product/standard-t-shirt"
    price={12.99}
    description="Every day basic t-shirt"
    image="/blue-t-shirt.jpg">
    <button>
        Add
    </button>
</Product>

How easy was that!

Pre-built theme components:

The theme contains several UI components and page layouts, make sure to see the documentation and live demo.