Stooplightstooplight

Docs › The shop: sell products

The shop: sell products from your site

Pro and up

Up to 50 products with photos and prices — in sizes, colors or other options if you like — a real cart, and card payments that land straight in your own Stripe account. Stock can count itself, and gift certificates and services work too.

A shop section on a live site — product cards with photos, prices, and Add to cart buttons
What visitors see: your products, your colors, an Add to cart button on each

First: connect your Stripe account

The shop takes card payments through your own Stripe account — the money never passes through us. That means Stripe has to be connected before the shop can sell anything. It's a one-time setup, about ten minutes, and it's the same connection that powers paid event tickets — if you already sell tickets, you're done and can skip to adding products.

  1. In your dashboard, open Settings and find the Getting paid — your Stripe account card.
  2. Follow the "How to connect" steps right on that card: create a free account at stripe.com (or sign in), paste in your secret key, then add the webhook with the URL the card shows you.
  3. When the card says it's connected, you're set. The Settings guide covers this screen in more detail.
The Settings tab with the Getting paid card for connecting a Stripe account
Settings → Getting paid: connect Stripe once and both tickets and the shop use it

Until Stripe is connected, your shop can be built and previewed but checkout will tell buyers payments aren't set up yet — so connect Stripe first and save yourself the head-scratching.

Add your products

The Products tab — shipping settings and a product being edited with photo, price, and description
The Products tab: shipping settings up top, then a card per product
  1. Open Products in the dashboard (under Store) and tap + Add a product.
  2. Give it a name, a line or two of description, and a price (at least $0.50 — that's the card networks' floor).
  3. Tap Add photo to upload a picture — it's resized automatically, and products with photos sell better than products without.
  4. Tap Save draft, then Preview to see the shop on your site, and Publish when it looks right. Like everything else in the dashboard, nothing your visitors see changes until you publish — and version history has your back.

The shop section appears on your site automatically once your first product is published, with a "Shop" link in the menu. You can rename both — the Section title and Menu label fields at the top of the tab. Your store holds up to 50 products; the first 25 show right away and the rest sit behind a "Show more" button.

Sizes, colors, and other options

When one product comes in several versions — earrings in silver or gold, a T-shirt in four sizes, coffee in two bag sizes and two grinds — it stays one product with options, not a pile of near-copies.

A product card with options on: Size (12 oz bag, 2 lb bag) and Grind (Whole bean, Ground), a grid of four combinations each with a price and an In stock box, and a photo slot for each size
House Blend on the Wasatch demo: two options make four combinations, each with its own price and stock
  1. On the product, check This product comes in options.
  2. Name the option (Size) and type its choices separated by commas (12 oz bag, 2 lb bag). Up to 10 choices.
  3. Need a second one, like Color or Grind? Tap + Add a second option. Two options can make up to 50 combinations.
  4. Every combination gets its own line. Leave a price blank and it uses the product's price; type one to charge more (or less) for that choice. Same price for all clears them back to the product's price in one tap.
  5. Optional: add a photo for each choice of the first option — each color, each metal. The shop swaps to it when a shopper picks that choice.
  6. Save draft and Publish, like any other product change.

Fixing a typo in a choice ("Sm" to "Small") keeps that line's price, stock and photo. Just edit the word in place.

On your site, the product card shows From $16 when the choices cost different amounts, and a row of buttons for each option. The price and photo change as the shopper picks, and Add to cart waits until every option is chosen. The exact choice shows in the cart, on Stripe's checkout page, on the receipt, and in your Orders.

A Camp Mug card on a phone with Color buttons Forest, Sandstone picked, and Night sky crossed out, an Only 1 left note, and Add to cart
On a phone: Sandstone picked, Night sky sold out, and “Only 1 left”

Stock counts (optional)

Counting is optional. Leave a product's In stock box blank and there's no limit, same as always. Type a number and Stooplight keeps count for you:

  1. The count goes down by itself each time an order is paid.
  2. At 0 the product, or that one choice, shows as Sold out and can't be bought. Sold-out choices stay visible, greyed out, so shoppers know they exist.
  3. When it's low, shoppers see Only 2 left. The Stock card at the top of Products sets what counts as low (3 or fewer to start), or turns that note off.
  4. Counts save the moment you type them — no Publish needed. A new delivery arrived? Type the new number and it's live.
  5. Your new-order email tells you when something is running low or just sold out.
The Stock card: counting is optional, a checked box for Show Only 2 left when a count is at 3 or fewer
The Stock card on the Products tab

Checkout re-checks the count before payment. If someone left a cart open while the last one sold, the cart fixes itself with a short note ("Sandstone just sold out — we updated your cart") instead of sending them to pay for something you don't have.

Nothing is held while a shopper is on Stripe's payment page. So in the rare case two people buy the very last one in the same minute, both payments go through. Your order email flags it plainly ("you sold one more than you had") so you can refund one or make another.

Seasonal or paused? Hide it

For things that are out for the season rather than out of stock, check Hide from your shop for now on the product and publish. It disappears from the site and can't be bought, but keeps its photo, price, options and settings in your dashboard. Uncheck and publish to bring it back.

Choose how orders get to customers

One setting covers the whole store — the How orders get to customers card at the top of the Products tab:

  1. Pickup only — nothing ships; buyers collect their order from you. No address is asked for at checkout.
  2. Flat-rate shipping — one rate per order, whatever's in the cart. Set the rate, and optionally a free shipping over amount ("free over $40") — a nice nudge toward bigger orders.
  3. Customer chooses — checkout offers both pickup and your flat rate, and the buyer picks.

A flat rate per order is deliberately simple: pick a number that covers your typical package and move on. Nobody's building shipping zones on a Tuesday night.

Services, digital items, and gift certificates

A gift certificate product with 'This is a gift certificate' and 'Nothing to ship' checked
A gift certificate: one checkbox, and every one sold gets its own code

Not everything fits in a box. A few settings on every product handle the rest:

  1. Nothing to ship — check it for services, digital items, and gift certificates. These never charge shipping, and an order made only of them skips the address at checkout entirely.
  2. This is a gift certificate — every one bought gets its own code, worth the price, that can be spent on your site or at your counter. Buyers can send it straight to a friend's email. More on gift certificates and discount codes.
  3. Message sent after purchase — whatever you write here is added to the buyer's emailed receipt for that product, once payment clears. A scheduling link for a session ("Book your first session here: …") or a download link for a guide. Leave it blank and the item simply appears in the order summary.

That's how a coaching package, a PDF, and a bag of coffee can all sit in the same cart — each one's receipt block says the right thing, in your words.

Orders

The Orders tab — each order with items, total, shipping address, and a Mark fulfilled button
The Orders tab: who bought what, where it's going, and what's left to do
  1. Every paid order lands in Orders (under Store) — items, total, the buyer's email, and pickup or the shipping address.
  2. You also get an email alert for each sale, and the buyer gets an itemized receipt. Replies to either go to your alert address.
  3. Tap Mark fulfilled once it's been picked up, shipped, or delivered — just for your own bookkeeping.
  4. Export CSV downloads the list, with each order's choices and whether it was refunded.
  5. Mark refunded records a refund (refund the card itself in Stripe) and puts the items back in stock. Untick any item that isn't coming back, for a partial refund. Delete removes a record — handy for test or cancelled orders — and also puts its items back. Either way, an item goes back on the shelf only once.
An order card with Mark refunded open: a note that it doesn't move money, and a checked box to put Wasatch Camp Mug, Sandstone times 2 back in stock
Mark refunded: pick what goes back in stock

Refunds you make in Stripe put stock back on their own too, as long as your Stripe webhook also sends the charge.refunded event. New setups include it; if you connected Stripe before November 2026, add that event to your webhook (the Settings guide shows where), or just use Mark refunded.

The cart, from your buyer's side

The cart drawer on a live site with items, subtotal, shipping note, and a Check out button
The cart drawer — subtotal, your shipping terms, and one button to Stripe's secure checkout

Buyers add items, adjust quantities in the cart drawer, enter a discount code or gift certificate if they have one, and tap Check out — which opens Stripe's own secure payment page. Card numbers never touch your website. When payment succeeds they land back on your site with a confirmation, the receipt hits their inbox, and the order hits yours.

Want to try the whole loop without spending money? The Wasatch Trail Coffee demo runs its shop in Stripe test mode — buy something with card number 4242 4242 4242 4242, any future expiry, any CVC. A real receipt arrives and no money moves.