Works with Eleventy

Sell from an Eleventy site without adding a server

Eleventy writes HTML and stops. That is the whole appeal, and it is also why there is nothing there to take a payment. SuiteStatic supplies the parts a transaction needs and leaves your build alone.

Create your store See the integration

Products belong in the data cascade

Eleventy already has a good answer for structured content, so a store should use it rather than invent a second one. Put the catalogue in src/_data/products.json and every template can reach it as products, with no plugin involved.

src/_data/products.json

[
  {
    "slug": "yirgacheffe",
    "id": "a1b2c3d4-...",
    "name": "Ethiopian Yirgacheffe",
    "price": 22.50
  }
]

The id comes from your dashboard when you add the product. The price sits here too, but it is not what the customer gets charged. Every cart is priced again on the server from its own records, so a number edited in the browser is thrown away.

One macro, every product page

Pagination over that same data file builds a page per product. A Nunjucks macro keeps the button markup in one file instead of copied across templates.

src/_includes/buy.njk

{% macro buy(product) %}
  <button class="commerce-add"
          data-item-id="{{ product.id }}"
          data-item-name="{{ product.name }}"
          data-item-price="{{ product.price }}">
    Add to Cart
  </button>
{% endmacro %}

src/shop.njk · a page per product

---
pagination:
  data: products
  size: 1
  alias: product
permalink: "/shop/{{ product.slug }}/"
---
{% from "buy.njk" import buy %}
<h1>{{ product.name }}</h1>
{{ buy(product) }}

The cart container and the script go in your base layout, once. That is the last change your templates need. The three tags in full.

What does not change

People who run Eleventy usually chose it on purpose, often after leaving something heavier. Nothing here asks you to walk that back.

No plugin, no edit to .eleventy.js, no new build dependency.
Output stays static files, and npx @11ty/eleventy behaves as it did.
No client framework arrives with the cart. It is one script, and it does nothing at all until a shopper clicks a buy button.
Your host stays your host.

The hard half is behind the button

A buy button is an afternoon. What takes months is everything it implies: stock that decrements when the order lands, live carrier rates for a parcel you have to measure correctly, label purchase, tracking email, refunds, receipts that reconcile. That is the part running on our side. How shipping is calculated.

Put a store on your Eleventy site

Add one product, paste the tags into your base layout, and try it on a real page. The Starter plan costs nothing.

Create your store