Introduction to NanoCart
NanoCart is a lightweight, flexible e-commerce platform built for small sellers, entrepreneurs, and creators who want to sell online without the overhead of a full-scale commerce suite. Whether you already have a website and just need a cart, or you want a complete hosted storefront up and running in minutes, NanoCart gives you the tools to start selling immediately.
Two Ways to Sell
NanoCart offers two distinct products. You can use one or both, depending on how you sell.
The Widget
The NanoCart Widget is a JavaScript snippet you add to any existing website — a portfolio, blog, landing page, or marketing site. Once the script is on your page, you add a few HTML attributes to your buttons and links, and NanoCart handles everything else: a sliding cart drawer, product detail modals, and a full checkout flow powered by Stripe or PayPal.
Adding a Buy Now button is as simple as:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="your-store-id"></script>
<button data-nanocart-buy="your-product-slug">Buy Now</button>
No redirects. No rebuilding your site. Your visitors stay on your page while NanoCart handles the cart and checkout in the background.
The Hosted Storefront
The NanoCart Hosted Storefront is a complete, managed store hosted at yourstoreid.nanocart.io — or your own custom domain on Growth and Scale plans. It comes with polished templates, a full product catalog, and everything a buyer needs to browse and purchase. No code required.
Your storefront and widget share the same product catalog, orders, and settings — manage everything from a single admin dashboard at portal.nanocart.io.
Who NanoCart Is For
NanoCart is designed for:
- Small business owners who already have a website and want to add commerce without rebuilding it from scratch
- Entrepreneurs and creators launching a new store quickly and affordably
- Developers and agencies who need to embed a cart into a client's existing site
- Makers and artists selling physical products, digital downloads, or print-on-demand merchandise
If you need a cart that works with what you already have — or a clean hosted store without the complexity of larger platforms — NanoCart is built for you.
Key Benefits
- Sells anywhere: The widget works on any website, regardless of how it was built
- No redirects: Checkout happens inline — buyers never leave your page
- Your payment accounts: NanoCart connects to your own Stripe and PayPal accounts; funds go directly to you
- Flexible shipping: Flat rate, tiered, free shipping thresholds, and local pickup
- Built-in order management: Manage orders, issue refunds, update tracking, and export CSVs from one dashboard
- Coupons and discounts: Percentage or fixed-amount discount codes with expiry, usage limits, and category restrictions
- Digital downloads and POD: Sell digital files or print-on-demand products through Printful and Printify
- Analytics: Session-based cart funnel analytics track where buyers drop off and what converts
How It Works
- Create your store at nanocart.io and add your products from the admin dashboard
- Connect payments by adding your Stripe and/or PayPal credentials in Settings
- Start selling — either by adding the widget snippet to your existing site, launching your hosted storefront, or both
- Manage everything from the admin dashboard: orders, refunds, coupons, shipping, analytics, and more
NanoCart handles the cart, checkout, and order management. You keep full control of your products, your payments, and your customer relationships.
Quick Start Guide
Get your NanoCart store accepting orders in under 15 minutes. Follow these six steps to go from signup to your first live checkout.
Step 1: Create an Account
Go to nanocart.io and click Get Started. Enter your email address and choose a password. You will receive a verification email — click the link to activate your account.
Once verified, you are taken directly to the Admin Dashboard at portal.nanocart.io. Your store starts on the Free plan, which supports up to 2 products and flat-rate shipping.
Step 2: Set Up Your Store
Navigate to Settings in the left sidebar and complete the Store Info section:
- Store name — displayed in the cart, emails, and your storefront
- Currency — set once; all prices and payouts use this currency
- Contact email — where admin order notifications are delivered
- Logo — paste a URL to your logo image (used in emails and the storefront)
- Brand color — enter a hex value to apply your brand color to the cart drawer and emails
Click Save before moving on. These details appear across the widget, storefront, and all buyer-facing emails, so it is worth getting them right before you share any links.
Step 3: Connect a Payment Processor
NanoCart routes payments directly through your own Stripe or PayPal account. NanoCart never holds your funds.
To connect Stripe: Go to Settings > Payments and enter your Stripe Publishable Key, Secret Key, and Webhook Secret. You can find these in your Stripe Dashboard. Enable Test Mode initially to verify the connection without processing real charges.
To connect PayPal: In the same section, enter your PayPal Client ID, Secret, and Webhook ID from the PayPal Developer Console. Toggle Sandbox mode for testing.
You can connect both processors simultaneously. Buyers will see both options at checkout.
Step 4: Add Your First Product
Go to Products and click Add Product. Fill in:
- Name and Slug (the slug is used in your widget button attributes)
- Price and Description
- Images, Category, and Stock (optional)
- Variants if your product comes in sizes, colors, or other options
Set the product to Active and click Save. The product is now available for purchase.
Tip: The product slug is how the widget identifies which item to add to the cart. Choose a short, descriptive slug — for example, blue-tee or surf-board-xl.
Step 5: Add the Widget or Set Up Your Hosted Storefront
Widget (add to any existing site):
Paste the following snippet into your site's HTML, just before </body>:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
Then add button attributes to your product links:
<button data-nanocart-buy="blue-tee">Buy Now</button>
<button data-nanocart-add="blue-tee">Add to Cart</button>
<button data-nanocart-product="blue-tee">View Details</button>
Your API key is available in Settings > API Keys.
Hosted Storefront:
If you are on a Starter plan or above, your store is live at {storeId}.nanocart.io immediately. Visit Settings > Storefront to choose a template and customize the appearance. Growth and Scale plans support a custom domain — point your domain's CNAME to nanocart.io and verify it in the admin.
Step 6: Test a Checkout
With test mode enabled in your payment settings, add a product to the cart and complete a checkout using Stripe's test card number 4242 4242 4242 4242 (any future expiry, any CVV).
Check Orders in the admin to confirm the order appears with a paid status. Open the order detail to review line items, shipping address, and the confirmation email that was sent to the test buyer address.
Once everything looks correct, disable test mode in Settings > Payments to go live.
Tip: Use the Resend Confirmation button in the order detail view to verify that buyer emails are rendering correctly with your store name and brand color before you launch.
Subscription Plans & Pricing
NanoCart offers two product lines, each with its own set of plans: Widget plans for adding a cart to an existing website, and Hosted Storefront bundles for a fully managed store at your own subdomain or custom domain. All plans are available on monthly or annual billing.
Annual vs. Monthly Billing
Every plan can be billed monthly or annually. Annual billing costs 10× the monthly rate, which is equivalent to getting 2 months free each year. For example, Standard widget at $5/mo bills as $50/year on an annual subscription.
Widget Plans
Widget plans give you the NanoCart JavaScript snippet to embed a shopping cart on any existing website. Connect your own Stripe or PayPal account and start selling immediately.
| Plan | Price | Products | Shipping Methods | Features |
|---|---|---|---|---|
| Free | $0/mo | 2 | Flat rate, Free | Core cart & checkout |
| Standard | $5/mo | 25 | All methods | Local pickup, all shipping types |
| Pro | $10/mo | 100 | All methods | All Standard features + Print-on-Demand (POD) |
| Expert | $25/mo | Unlimited | All methods | All Pro features, unlimited scale |
Free is a permanent free tier — no credit card required. It supports up to 2 active products and the two most common shipping configurations (flat rate and free shipping).
Standard unlocks all shipping methods, including tiered pricing brackets and local pickup, plus support for up to 25 products. Ideal for small shops with a growing catalog.
Pro adds Print-on-Demand fulfillment via Printful and Printify, along with support for up to 100 products. POD orders dispatch automatically after payment.
Expert removes all product limits and is suited to high-volume sellers or those managing large catalogs.
Hosted Storefront Plans
Hosted Storefront plans are all-in bundles. Each plan includes a hosted store at {storeId}.nanocart.io (or a custom domain on higher tiers) plus a bundled widget tier. You do not need a separate widget subscription when on a hosting plan.
| Plan | Price | Template Access | Custom Domain | Branding | Included Widget Tier |
|---|---|---|---|---|---|
| Starter | $7/mo | Classic only | No | NanoCart branding shown | Free |
| Standard | $15/mo | All templates | No | NanoCart branding shown | Standard |
| Growth | $25/mo | All templates | Yes | NanoCart branding shown | Pro |
| Scale | $49/mo | All templates | Yes | Branding removable | Expert |
Starter is the entry point for a fully hosted store. It uses the Classic template and displays NanoCart branding on your storefront.
Standard unlocks all available storefront templates and the full Standard widget feature set.
Growth adds custom domain support — point your domain's CNAME to nanocart.io and NanoCart provisions SSL automatically via its wildcard certificate.
Scale is the top-tier bundle. It includes the Expert widget (unlimited products), custom domain support, and the ability to remove NanoCart branding from your storefront entirely.
Upgrading and Downgrading
You can change your plan at any time from Settings → Billing in the admin dashboard. Upgrades take effect immediately and are prorated for the current billing period. Downgrades take effect at the end of the current billing cycle.
A few rules to keep in mind:
- Widget-only plans cannot add hosting. To get a hosted storefront, subscribe to a Hosted Storefront plan instead.
- Hosting plans cannot downgrade below their included widget tier. For example, a Growth plan (which includes Pro) cannot be moved to a plan that bundles only the Free widget tier.
- Switching between monthly and annual billing resets your billing cycle to the date of the change.
For questions about billing or plan changes, contact hello@nanocart.io.
Widget Overview
The NanoCart widget is a lightweight JavaScript snippet that adds a fully functional shopping cart to any existing website — no backend required, no platform migration, no rebuilding your site. Drop in a single script tag and your site gains product listings, an add-to-cart flow, and Stripe or PayPal checkout in minutes.
How It Works
Add the following script tag to your HTML, ideally just before the closing </body> tag:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
Use your Store ID here (shown in Settings > Store Information) — it is public and safe to expose. Never put your secret API key in the script tag.
The script loads asynchronously so it never blocks your page from rendering. Once initialized, it scans the page for NanoCart button attributes and attaches click handlers automatically. Your visitors interact with a cart experience that feels native to your site — no redirects, no pop-up windows.
Button Attributes
Control cart behavior by adding data attributes to any HTML element (buttons, links, images, etc.):
| Attribute | Behavior |
|---|---|
| data-nanocart-buy="slug" | Add the product to the cart and open the cart drawer immediately (Buy Now) |
| data-nanocart-add="slug" | Add the product to the cart and open the cart drawer (Add to Cart) |
| data-nanocart-product="slug" | Open a product detail modal with images, description, and variant selection |
Replace slug with the product's URL slug as set in your NanoCart admin dashboard.
The Cart Drawer
When a shopper adds an item, a cart drawer slides in from the right side of the screen. The drawer displays all cart items, quantities, subtotals, and an applied coupon field. From the drawer, shoppers proceed to checkout via Stripe or PayPal — both payment flows are handled securely without leaving your site domain until the payment processor step.
Compatibility
The widget works on any HTML page and is compatible with:
- Static sites — plain HTML, GitHub Pages, Netlify, Vercel
- WordPress — paste the script tag into your theme's footer or use a custom HTML block
- Squarespace, Wix, Webflow — add via the platform's custom code or embed features
- Custom-built sites — any frontend framework or hand-coded HTML
Browser support: All modern browsers are supported, including Chrome, Firefox, Safari, and Edge (current and one previous major version). Internet Explorer is not supported.
Next Steps
- Products & Slugs — Set up products and find their slugs
- Checkout Setup — Connect Stripe or PayPal
- Shipping Methods — Configure rates and fulfillment options
Widget Installation
The NanoCart widget is a lightweight JavaScript snippet that adds a fully functional shopping cart to any existing website — no framework required, no rebuild needed. Drop in one script tag and your site gains a slide-in cart drawer, product modals, and Stripe or PayPal checkout.
The Script Tag
Add the following script tag to every page where you want the cart to appear:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
Replace YOUR_STORE_ID with your store's unique identifier. The widget reads the data-store attribute on load and connects automatically to your store's products, settings, and checkout flow.
> Note: The hosted file (nanocart.min.js) is a minified build at approximately 35 KB. It is served over a global CDN for fast load times regardless of your visitors' locations.
Where to Place It
Place the script tag immediately before the closing </body> tag. This ensures your page content loads first and avoids any render-blocking behavior.
<!-- your page content -->
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
</body>
Finding Your Store ID
Your store ID is available in the admin dashboard:
- Log in to portal.nanocart.io.
- Navigate to Settings in the sidebar.
- Select the API Keys section.
- Your store ID and live API key (
sc_live_...) are listed there.
Auto-Initialization
No additional JavaScript is required. Once the script tag is on the page, the widget initializes itself automatically. It scans the DOM for NanoCart button attributes and attaches the appropriate behavior to each element:
| Attribute | Behavior |
|---|---|
| data-nanocart-buy="slug" | Adds the product to the cart and opens the cart drawer immediately |
| data-nanocart-add="slug" | Adds the product to the cart and opens the cart drawer |
| data-nanocart-product="slug" | Opens a product detail modal without adding to cart |
The slug value corresponds to the product slug set in your admin dashboard under Products.
Minimal HTML Example
The following is a complete, self-contained HTML page demonstrating a working NanoCart integration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Shop</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<!-- View product details without adding to cart -->
<button data-nanocart-product="classic-tee">View Details</button>
<!-- Add to cart and open the drawer -->
<button data-nanocart-add="classic-tee">Add to Cart</button>
<!-- Add to cart and open the drawer immediately (Buy Now) -->
<button data-nanocart-buy="classic-tee">Buy Now</button>
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
</body>
</html>
Replace YOUR_STORE_ID with your actual store ID and classic-tee with a valid product slug from your catalog. The widget handles everything else — cart state, checkout, and order confirmation.
Button Types
The NanoCart widget activates on any HTML element that carries one of three data-nanocart-* attributes. These attributes tell the widget what action to perform when a visitor clicks that element — no JavaScript required on your part.
Product Slugs
Each attribute value is a product slug: the URL-friendly identifier for a product, set when you create or edit a product in the admin dashboard under Products. Slugs are lowercase, hyphen-separated strings such as classic-tee or surf-board-xl. You can find a product's slug in the admin by opening its edit page — it appears in the Slug field.
data-nanocart-buy — Buy Now
Adds the product to the cart and immediately opens the cart drawer in a single action. Use this for high-intent placements where you want to move the visitor directly toward checkout.
<button data-nanocart-buy="classic-tee">Buy Now</button>
The cart drawer slides open as soon as the item is added, prompting the visitor to review their cart and proceed to checkout.
data-nanocart-add — Add to Cart
Adds the product to the cart and opens the cart drawer. This behaves identically to Buy Now in practice — the distinction is semantic, letting you label the button appropriately for your storefront's tone.
<button data-nanocart-add="classic-tee">Add to Cart</button>
Use this label when you want to set the expectation that the visitor is building a cart rather than committing to an immediate purchase.
data-nanocart-product — View Details
Opens a product detail modal overlay without adding anything to the cart. The modal displays the product's images, full description, available variants (size, color, etc.), and an Add to Cart button.
<button data-nanocart-product="classic-tee">View Details</button>
This is the right choice for collection pages or anywhere you want visitors to explore a product before committing. The modal handles variant selection, so you can point multiple buttons at the same slug and let the visitor choose their options inline.
Any Element Works
These attributes work on any HTML element — not just <button> tags. You can apply them to links, divs, images, or any clickable element that fits your layout.
<!-- On an anchor tag -->
<a href="#" data-nanocart-buy="surf-board-xl">Buy Now</a>
<!-- On a div styled as a card -->
<div class="product-card" data-nanocart-product="classic-tee">
<img src="tee.jpg" alt="Classic Tee" />
<span>Classic Tee — $29</span>
</div>
<!-- On a custom styled button -->
<button class="btn-primary" data-nanocart-add="logo-hoodie">Add to Cart</button>
The widget scans the page on load and attaches click handlers to every matching element automatically. No additional JavaScript or initialization is needed beyond the single <script> tag in your page's <head>.
Cart & Checkout
NanoCart provides a streamlined cart and checkout experience that works consistently across the widget and hosted storefront. Buyers can browse products, manage their cart, and complete payment — all without leaving your site.
The Cart Drawer
When a buyer clicks a button tagged with data-nanocart-buy or data-nanocart-add, the cart drawer opens from the side of the page. The drawer displays:
- Each item in the cart with its name, variant (if applicable), quantity, and line-item subtotal
- Quantity controls to increase or decrease amounts, or remove items entirely
- A running cart subtotal updated in real time as quantities change
- A Checkout button to proceed when the buyer is ready
The cart persists across page navigation for the duration of the browser session. Buyers can close the drawer and continue browsing without losing their cart.
Checkout Flow
Clicking Checkout opens the checkout form within the same drawer interface. The checkout flow proceeds in a single screen:
- Contact information — The buyer enters their email address and full name.
- Shipping address — Street, city, state/province, ZIP/postal code, and country.
- Shipping method — Available shipping options configured for your store are displayed with their rates. The buyer selects one before proceeding.
- Coupon code — An optional field allows buyers to apply a discount code. If the code is valid and conditions are met (minimum order amount, category restrictions, usage limits), the discount is applied to the subtotal immediately.
- Tax — If Stripe Tax is enabled on your account, applicable tax is calculated based on the shipping address and displayed as a line item.
- Order summary — The buyer sees a final breakdown of subtotal, discount (if any), shipping, tax, and total before paying.
Payment Options
Payment buttons are displayed based on which payment providers you have connected in Settings:
- Stripe configured — A card payment button is shown. Buyers enter their card details via Stripe's secure hosted fields.
- PayPal configured — A PayPal button is shown. Buyers are taken through the PayPal authorization flow and returned to checkout on completion.
- Both configured — Both options appear, and the buyer can choose their preferred method.
NanoCart never stores card numbers or payment credentials. All payment data is handled directly by Stripe and PayPal.
After Payment
Once payment is confirmed:
- The buyer is redirected to an order success page showing their order summary and, for digital products, download links (valid for 72 hours, up to 5 downloads).
- An order confirmation email is sent to the buyer from
orders@nanocart.io, styled with your store name and brand color. - You receive an admin notification email at your store's contact address.
- The order appears in your Orders dashboard with a status of
paid, ready for fulfillment.
For Print-on-Demand products, fulfillment is dispatched to Printful or Printify automatically after payment confirmation.
Theming the Widget
The widget is fully themeable so the cart matches your website. There are three official ways to theme it — pick whichever fits how your site is built. You never need JavaScript, DOM inspection, or polling: the theming surface below is a stable, supported API.
Option 1: Portal Settings (no code)
In your admin at portal.nanocart.io, go to Settings > Widget Appearance. Pick a base theme (dark or light), your accent, background, surface, and text colors, and a corner radius, then save. Every page embedding your widget picks up the new look automatically within about 5 minutes — no site changes needed. If you set a base theme without an accent color, your store's Brand Color is used as the accent.
Option 2: Script-Tag Attributes
Two attributes on the embed tag control the most common choices, and they always win over portal settings:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js"
data-store-id="YOUR_STORE_ID"
data-theme="light"
data-accent-color="#EF3E32"></script>
data-theme—dark(default) orlight: switches the whole base palette.data-accent-color— any CSS color for buttons, prices, and highlights.
Option 3: CSS Variables (full control)
The widget renders inside a shadow DOM on a host element with the stable id nanocart-widget, and every visual token is a CSS custom property. Declaring the variables on the host from your own stylesheet overrides everything — this is the deepest level of control and always beats portal settings and attributes:
#nanocart-widget {
--nc-accent: #EF3E32;
--nc-bg: #1d2230;
--nc-radius: 12px;
--nc-font: "Inter", sans-serif;
}
The full variable list (stable public API — these names will not change):
| Variable | Controls | Dark default | Light default |
|---|---|---|---|
--nc-accent | Buttons, prices, highlights | #4292e7 | #4292e7 |
--nc-bg | Panel background | #1a1f2e | #ffffff |
--nc-surface | Cards, inputs, rows | #242938 | #f5f5f5 |
--nc-border | Borders and dividers | #2d3348 | #e2e2e2 |
--nc-text | Body text | #e2e8f0 | #1a1a1a |
--nc-text-muted | Secondary text | #94a3b8 | #555555 |
--nc-text-dim | Tertiary text | #64748b | #999999 |
--nc-text-strong | Headings, emphasis | #ffffff | #111111 |
--nc-danger | Errors, remove actions | #ef4444 | #ef4444 |
--nc-success | Success states | #22c55e | #22c55e |
--nc-radius | Corner rounding | 8px | 8px |
--nc-font | Font stack | system fonts | system fonts |
Precedence
When multiple layers set the same value, the order is (highest wins):
- Your page CSS on
#nanocart-widget - Script-tag attributes (
data-theme,data-accent-color) - Portal Widget Appearance settings
- Built-in theme defaults
Product Alerts (Email Signup)
Product Alerts lets your customers sign up for email updates — new product drops, restock alerts, hot items, or a general newsletter. Available on the Pro and Expert plans. You collect the emails now; automated alert emails (restock, new-product, hot-item triggers) are coming soon and will use the same list.
Set It Up (Portal)
- In your admin at portal.nanocart.io, open Subscribers (Insights section).
- Turn on Enable Product Alerts.
- Optionally add up to 6 signup options (e.g. "New drops", "Restock alerts", "Newsletter"). These become checkboxes your customers can pick from — they're labels for your own segmentation, nothing more.
- Optionally enable the "Agree to receive emails" checkbox — a separate, required consent box that stands apart from your options.
- Save. Signups appear on the same page, newest first, with whichever options each person checked.
Add It to Your Site (Widget)
Anywhere your widget script tag is installed, drop one line:
<!-- Email field + Sign Up button only -->
<nanocart-signup></nanocart-signup>
<!-- Also show your configured option checkboxes -->
<nanocart-signup show-options></nanocart-signup>
The element renders the bare essentials — an email field and a Sign Up button in your store's accent color (from Widget Appearance or your Brand Color). You provide the headings and framing around it, so it matches your site's design. The consent checkbox, when enabled, always renders and is required. If your store isn't on a Pro/Expert plan or Product Alerts is off, the element renders nothing at all.
Styling
Style every piece from your own CSS via shadow parts, plus the standard --nc-* variables:
nanocart-signup::part(input) { border-radius: 999px; }
nanocart-signup::part(button) { background: #EF3E32; font-weight: 800; }
nanocart-signup::part(consent){ border-color: #EF3E32; }
Parts: form, row, input, button, options, option, consent, message.
Customizing the Text
Every visible string on the element is overridable via attributes, so the form can match your site's voice exactly — no JavaScript required:
<nanocart-signup show-options
label="Sign me up"
placeholder="you@hotdog.lover"
success-message="You're on the list. Welcome to the club! 🌮"
error-message="Something fell off the grill. Try again."></nanocart-signup>
| Attribute | Controls | Default |
|---|---|---|
label | Button text | Sign Up |
placeholder | Email field placeholder | you@example.com |
success-message | Text shown after a successful signup | You're signed up! |
error-message | Generic failure text (server-provided validation messages still show as-is) | Something went wrong. Please try again. |
show-options | Render the configured option checkboxes | off |
The option labels and consent text come from your portal configuration (Subscribers page). The layout row (input + button) is exposed as ::part(row) for gap/alignment control, alongside the other parts.
Hosted Storefront
On a hosted storefront, enable the Signup section on the Storefront page instead — it adds a configurable band (heading, subtitle, colors) above the footer with the same form and checkboxes. No code needed.
Bot Protection
Signups are protected invisibly — a hidden honeypot field, a submit-speed check, and platform rate limiting. There's no captcha to configure and nothing for your customers to solve. You can also remove any subscriber manually from the Subscribers page.
Hosted Storefront Overview
A NanoCart hosted storefront is a complete, fully hosted online store served at {storeId}.nanocart.io or your own custom domain. Unlike the NanoCart widget — which embeds a shopping cart into an existing website — a hosted storefront provides every page your customers need to browse, shop, and check out, with no existing website required.
How It Differs from the Widget
The NanoCart widget is designed for sellers who already have a website and want to add e-commerce functionality to it. You drop in a script tag, add button attributes to your HTML, and a cart drawer handles the rest.
The hosted storefront is a standalone product. NanoCart hosts and serves every page of your store: the product listing page, individual product detail pages, the cart, the checkout flow, and the post-purchase order confirmation. You manage your store entirely from the NanoCart admin dashboard — no coding, no hosting setup, and no separate website needed.
Who Should Use a Hosted Storefront
A hosted storefront is the right choice if you are starting from scratch and do not have an existing website to embed a widget into. It is also a good fit if you want a simple, purpose-built store without managing a separate website platform alongside NanoCart.
If you already have a website and only need to add a cart and checkout, the widget is the simpler path. Both options share the same product catalog, orders, and admin dashboard.
What's Included
Every hosted storefront includes:
- Product listings — a browsable catalog with category filtering
- Product detail pages — images, descriptions, variants, and an Add to Cart button
- Cart — a persistent cart that follows customers through their session
- Checkout — Stripe and PayPal checkout, shipping selection, and coupon code support
- Order confirmation — a post-purchase page with order details and, for digital products, download links
Storefronts are built on templates. The Classic template is available on all hosted plans. Additional templates are available on Standard-tier hosting and above.
Plans and Bundle Pricing
Hosted storefront plans are all-in bundles that include both hosting and a corresponding widget tier:
| Plan | Price | Custom Domain | Branding | Included Widget Tier |
|------|-------|---------------|----------|----------------------|
| Starter | $7/mo | No | Shown | Free |
| Standard | $15/mo | No | Shown | Standard |
| Growth | $25/mo | Yes | Shown | Pro |
| Scale | $49/mo | Yes | Removable | Expert |
Annual billing is available at 10x the monthly rate. Because hosting plans already include a widget tier, you do not need a separate widget subscription. If you need more widget capacity than your hosting plan includes, you can upgrade the widget tier within your existing hosting plan.
Storefront Templates
Storefront templates are pre-designed layouts that control the look and structure of your hosted store at {storeId}.nanocart.io or your custom domain. Each template provides a fully responsive, ready-to-use design — no coding required. You customize the store's identity through your branding settings, while the template handles the layout.
The Classic Template
Classic is NanoCart's default template and is available on all hosted plans. It features a clean, minimal design built to keep the focus on your products.
Key features of the Classic template:
- Product grid — Products are displayed in a responsive grid that adapts from a single column on mobile to multiple columns on wider screens.
- Featured products — Highlight selected products at the top of your storefront to draw attention to bestsellers or new arrivals.
- Category navigation — A category bar lets shoppers filter products by category, making it easy to browse larger catalogs.
- Responsive mobile design — The layout is fully optimized for mobile devices, with touch-friendly navigation and appropriately sized tap targets throughout.
Selecting or Changing Your Template
To change your storefront template:
- Log in to the admin dashboard at portal.nanocart.io.
- Navigate to Settings and open the Storefront section.
- Under Template, select your preferred layout from the available options.
- Save your changes. The new template takes effect immediately.
Template Availability by Plan
| Template | Starter | Standard | Growth | Scale |
|----------|---------|----------|--------|-------|
| Classic | Yes | Yes | Yes | Yes |
| Additional templates | No | Yes | Yes | Yes |
Additional templates beyond Classic are available on Standard, Growth, and Scale hosted plans. New templates are added over time and become available to eligible plans automatically.
Customizing Your Template
Templates inherit your store's branding settings, so you do not need to modify the template itself to match your brand. In Settings > Store Info, you can configure:
- Store name — Displayed in the header and page title.
- Logo — Uploaded as a URL and shown in the storefront header.
- Brand color — A hex color value applied to buttons, accents, and key UI elements across the template.
These settings apply consistently across your storefront, the cart widget, and customer-facing order emails, giving your store a cohesive look everywhere shoppers interact with it.
Custom Domains
Custom domains let you serve your hosted storefront from your own URL (e.g., shop.yourbrand.com) instead of the default your-store.nanocart.io address. This feature is available on the Growth and Scale hosted storefront plans.
Requirements
- An active Growth ($25/mo) or Scale ($49/mo) hosted storefront plan
- Access to your domain registrar or DNS provider to create a CNAME record
Setting Up a Custom Domain
Step 1: Add a CNAME record in your DNS provider
Log in to your domain registrar or DNS provider and create a new CNAME record with the following values:
| Field | Value |
|---|---|
| Type | CNAME |
| Name / Host | The subdomain you want to use (e.g., shop) |
| Target / Value | your-store.nanocart.io |
| TTL | 3600 (or your provider's default) |
Replace your-store with your actual NanoCart store ID. If you want to use a root domain (e.g., yourbrand.com with no subdomain), check whether your DNS provider supports CNAME flattening or ALIAS records, as standard CNAME records cannot be set on a root domain.
Step 2: Verify your domain in the admin panel
- Go to your NanoCart admin panel at portal.nanocart.io.
- Navigate to Storefront > Custom Domain.
- Enter your full custom domain (e.g.,
shop.yourbrand.com) in the provided field. - Click Verify Domain.
NanoCart will check that your CNAME is pointing correctly. Once verified, your storefront will be accessible at your custom domain.
SSL Certificate
SSL is handled automatically by NanoCart. No certificate purchase or configuration is required on your end. Your custom domain will be secured via NanoCart's wildcard SSL certificate immediately upon successful verification.
DNS Propagation
DNS changes can take anywhere from a few minutes to 48 hours to fully propagate across the internet, depending on your DNS provider and the TTL of your records. During this window, your custom domain may not resolve consistently for all visitors. This is normal behavior and not an error.
Troubleshooting
Verification fails immediately after adding the CNAME
DNS propagation may not be complete yet. Wait at least 15-30 minutes and try verifying again. For changes made recently, propagation can take up to 48 hours.
CNAME not pointing correctly
Double-check that the target value in your DNS record matches your store's NanoCart subdomain exactly (e.g., your-store.nanocart.io). Typos or missing subdomains are the most common cause of verification failures. Use a tool such as dnschecker.org to confirm your CNAME is resolving correctly.
Domain still shows the NanoCart default URL
After verification, allow a few minutes for the routing update to take effect. Clear your browser cache and try again.
Removing a Custom Domain
To remove a custom domain, go to Storefront > Custom Domain in your admin panel and click Remove Domain. Your storefront will immediately revert to its default your-store.nanocart.io address. You can also delete the CNAME record from your DNS provider at that point, though leaving it in place will not cause any issues.
Managing Products
Products are the core of your NanoCart store. From the Products section of your admin dashboard, you can add, edit, and organize everything you sell — physical goods, digital downloads, or print-on-demand items.
The Product List
The product list displays all your products grouped into three tabs: Active, Draft, and Archived. Use the pagination control to choose how many products display per page (10, 25, 50, or 100). Each row shows the product name, price, category, and current status, with quick-access edit and delete actions.
Product Statuses
- Active — The product is live and available for purchase via the widget or your hosted storefront.
- Draft — The product is saved but not publicly visible. Use this while you are still setting up a product or temporarily hiding it without deleting it.
- Archived — The product is retired and hidden from customers, but its order history is preserved. Archived products do not count against your plan's product limit.
Adding a Product
To add a product, click Add Product from the product list. Fill in the following fields:
- Name (required) — The product title shown to customers.
- Slug (required) — A URL-safe identifier used in widget button attributes (e.g.,
data-nanocart-buy="my-product-slug") and in hosted storefront URLs. Slugs must be unique within your store and cannot contain spaces or special characters. NanoCart generates a slug from the product name automatically, but you can edit it before saving. - Description — A rich-text description displayed in product detail modals and on storefront product pages.
- Price (required) — The selling price in your store's currency.
- Compare-at Price — An optional original or crossed-out price shown alongside the selling price to indicate a discount.
- Images — Upload one or more product images. The first image is used as the primary thumbnail.
- Category — Assign the product to one of your store's categories. Categories are used for organization, coupon restrictions, and storefront navigation.
- Weight — Used for shipping calculations. Enter the product weight if you ship physical items.
- Digital Product — Toggle this on for downloadable goods. Digital products skip shipping at checkout; buyers receive download links via email and on the order confirmation page. Links expire after 72 hours and allow up to 5 downloads.
- Print-on-Demand (POD) — Available on Pro and Expert widget plans. Enable this to fulfill orders through Printful or Printify. Once enabled, assign the provider-specific sync variant ID to each product variant.
- Status — Set to Active to publish immediately, or Draft to save without publishing.
Editing Products
Click any product name or its edit icon to open the product editor. All fields are editable after creation, including the slug. Note that changing a slug will break any existing widget buttons that reference the old slug value — update your HTML accordingly.
Product Variants
Products can have multiple variants (such as size or color). Each variant has its own price, compare-at price, and POD sync ID. Variants are managed from within the product editor.
Product Variants
Variants let you offer a single product in multiple options — such as different sizes, colors, or materials — without creating separate product listings. Each variant is a distinct purchasable option with its own price, SKU, and inventory identity.
Common use cases:
- A t-shirt available in sizes S, M, L, and XL
- A art print offered in Black & White or Full Color
- A mug available in 11 oz or 15 oz
Adding Variants in the Product Editor
To add variants to a product, open the product editor from Products in your admin dashboard. Scroll to the Variants section and click Add Variant.
For each variant, you can configure:
- Name — The option label shown to shoppers (e.g., "Small", "Red", "11 oz")
- Price — Each variant can have its own price, which overrides the base product price at checkout
- SKU — A unique identifier for the variant, useful for inventory tracking and order management
- POD Sync ID — For Print-on-Demand products (Pro plan and above), each variant maps to a fulfillment provider's sync variant. Enter the
printfulSyncVariantIdfor Printful or theprintifySyncVariantIdfor Printify to ensure the correct item is dispatched when an order is placed
You can add as many variants as your plan allows and reorder them by dragging. To remove a variant, click the delete icon next to it.
> Note: If a product has variants, shoppers must select a variant before adding to cart. A product without variants uses a single price and SKU defined at the product level.
How Variants Appear to Shoppers
When a shopper interacts with a product that has variants, a dropdown selector appears automatically in both the cart drawer and the product detail modal. The selector lists each variant by name. Selecting a variant updates the displayed price in real time.
For the Buy Now and Add to Cart buttons on a product with variants, the widget automatically adds the first variant — shoppers are not prompted to choose. If your product has meaningful options (size, color), use data-nanocart-product instead: the View Details modal shows the variant selector alongside the product description and images before the add-to-cart action.
Example: T-Shirt with Size Variants
| Variant | Price | SKU |
|---------|-------|-----|
| Small | $24.99 | SHIRT-S |
| Medium | $24.99 | SHIRT-M |
| Large | $26.99 | SHIRT-L |
| XL | $26.99 | SHIRT-XL |
In this example, Large and XL are priced slightly higher. Each carries its own SKU for order tracking, and each can be mapped to a Printful sync variant ID if the product is fulfilled via Print-on-Demand.
Digital Downloads
NanoCart supports digital products — items delivered electronically rather than shipped physically. You can sell PDFs, ebooks, software licenses, music files, design assets, templates, and any other downloadable file through your store, on any plan.
What Are Digital Products?
Digital products are goods fulfilled automatically after purchase via a secure download link. Because nothing is shipped, buyers do not need to provide a shipping address at checkout, which creates a faster, lower-friction purchase experience. The order still goes through your connected payment processor (Stripe or PayPal) the same way a physical order does.
Setting Up a Digital Product
To mark a product as digital:
- Open the Products section in your admin dashboard and create a new product or edit an existing one.
- Check the Digital Product toggle in the product settings.
- Provide the file for delivery — either upload the file directly or enter a download URL pointing to a hosted file.
- Save the product. NanoCart will treat it as digital from that point forward.
Once a product is flagged as digital, the checkout form suppresses the shipping address fields for that item. If a cart contains only digital products, no shipping information is collected and no shipping cost is applied.
Buyer Experience
After a successful purchase:
- The buyer receives an order confirmation email immediately, which includes their secure download link alongside the order summary.
- The download link is also displayed on the order success page shown after checkout completes.
Buyers do not need an account or login to access their files — the link itself grants access.
Download Link Details
Each download link is:
- Valid for 72 hours from the time of purchase.
- Limited to 5 downloads per link.
These limits help protect your digital content from unauthorized redistribution. After the link expires or the download limit is reached, the buyer can no longer use it.
Regenerating Download Links
If a customer loses access to their download — for example, because their link expired or they exceeded the download limit — you can generate a fresh link from the order detail view:
- Go to Orders and open the relevant order.
- In the order detail modal, locate the digital download section.
- Click Regenerate Link. A new 72-hour, 5-download link is issued immediately.
The original link is invalidated when a new one is generated. You can share the new link with the customer directly, or the customer can access it on the original success page if they still have it open.
Print-on-Demand (POD) Overview
Print-on-Demand (POD) allows you to sell custom-printed products — such as apparel, accessories, and home goods — without holding any inventory. When a customer places an order, NanoCart automatically dispatches the order to your connected POD provider, who manufactures the item and ships it directly to the customer on your behalf. You only pay for production when a sale is made, eliminating upfront inventory costs and the logistics of fulfillment.
Supported Providers
NanoCart integrates with two leading POD platforms:
- Printful — Connect using your Printful API key. Assign a
printfulSyncVariantIdto each product variant in NanoCart to link it to the corresponding Printful product. - Printify — Connect using your Printify API key and Shop ID. Assign a
printifySyncVariantIdto each product variant to map it to your Printify catalog.
You can connect one or both providers simultaneously. Each product variant is linked to a specific provider's variant ID, and NanoCart dispatches orders to the correct provider automatically.
Plan Requirement
POD integration is available on the Pro ($10/mo) and Expert ($25/mo) widget plans. Hosted storefront plans at the Growth and Scale tiers include a Pro or Expert widget entitlement and also support POD.
How It Works
- A customer completes checkout through NanoCart (via Stripe or PayPal).
- NanoCart automatically dispatches the order to the appropriate POD provider.
- The provider manufactures and ships the item directly to the customer.
- The order detail in your admin dashboard shows the fulfillment status per provider, along with the provider's order ID (
podOrderId).
No manual action is required for successful dispatches. If a dispatch fails, a POD Error badge appears on the order in your Orders list. From the order detail modal, you can retry fulfillment per provider using the dedicated retry button.
Test Mode
Before going live, you can enable test mode in your POD provider settings. In test mode, orders are created in draft status on the provider's platform and are never manufactured or shipped. This lets you verify your product mappings and order flow end-to-end without incurring production costs.
Benefits
- No upfront inventory — Products are made on demand, so you never over-order or hold unsold stock.
- Drop-ship model — The provider handles manufacturing, packaging, and shipping directly to your customer.
- Automatic fulfillment — Orders are dispatched immediately after payment with no manual intervention required.
- Multi-provider support — Use Printful, Printify, or both within the same store.
Printful Integration
NanoCart integrates with Printful to automate print-on-demand (POD) fulfillment. Once connected, NanoCart automatically dispatches orders to Printful after payment — no manual intervention required.
Prerequisites
Before setting up the Printful integration, confirm the following:
- You have an active Printful account with at least one synced product in your Printful catalog.
- Your NanoCart plan is Pro ($10/mo) or Expert ($25/mo). Print-on-demand is not available on Free or Standard widget plans. Hosted storefront plans of Growth or Scale include the required widget tier.
Step 1: Get Your Printful API Key
- Log in to your Printful Dashboard.
- Navigate to Settings > API.
- Click Create Token (or copy your existing token if you have one).
- Give the token a descriptive name (e.g., "NanoCart") and save it.
- Copy the API key — you will need it in the next step.
Step 2: Connect Printful in NanoCart
- In your NanoCart admin panel, go to Settings > Print-on-Demand.
- Locate the Printful section and paste your API key into the provided field.
- Click Save. NanoCart will verify the connection and confirm your Printful account is linked.
Step 3: Link a Product Variant to Printful
Each product variant that ships via Printful must be mapped to a Printful Sync Variant ID.
To find your Sync Variant ID in Printful:
- In your Printful Dashboard, go to Products and open the synced product.
- Click on a specific variant (e.g., "Blue / Large").
- In the variant detail panel, locate the Sync Variant ID — it is a numeric identifier displayed in the variant information or accessible via the Printful API.
To link the variant in NanoCart:
- Go to Products in your NanoCart admin and open the product you want to configure.
- Expand the Variants section and select the variant to edit.
- Enable the Print-on-Demand toggle for that variant.
- Enter the Printful Sync Variant ID in the Printful Sync Variant ID field.
- Save the product.
Repeat for each variant that should be fulfilled by Printful.
Test Mode
Before going live, enable Test Mode in Settings > Print-on-Demand. In test mode, NanoCart sends orders to Printful as drafts — they appear in your Printful dashboard but are not submitted for production or charged. Use this to verify your variant mappings are correct before accepting real orders.
Disable test mode when you are ready to accept live orders.
How Fulfillment Works
After a customer completes checkout and payment is confirmed, NanoCart automatically dispatches the order to Printful. No manual action is needed. Printful then handles production and shipping directly to the customer.
Monitoring Fulfillment Status
Open any order in Orders > [Order Detail] to view real-time POD fulfillment status. The detail panel shows the Printful order ID (podOrderId) and the current fulfillment state per provider.
Error Handling
If dispatch to Printful fails for any reason, the order displays a POD Error badge in your orders list. To resolve:
- Open the order detail.
- Review any error information shown.
- Click the Retry (Printful) button to re-attempt dispatch.
Common causes include invalid Sync Variant IDs or temporary Printful API outages. Verify your variant mappings if errors persist after retrying.
Printify Integration
NanoCart integrates with Printify to automatically fulfill print-on-demand (POD) orders. Once connected, NanoCart dispatches orders to your Printify shop immediately after payment is confirmed — no manual steps required.
Prerequisites
Before connecting Printify, ensure you have:
- A Printify account with an active shop configured
- A NanoCart Pro plan or higher (POD fulfillment is not available on Free or Standard plans)
Setup
1. Get your Printify API key
Log in to your Printify account and navigate to My Account > Connections > API. Generate a new API key and copy it. Keep this key secure — treat it like a password.
2. Find your Shop ID
Your Shop ID appears in the URL when you are viewing your Printify shop dashboard (for example, https://printify.com/app/store/XXXXXXX/...). The numeric segment is your Shop ID. You can also find it listed under your store settings within Printify.
3. Connect in NanoCart
In your NanoCart admin, go to Settings > Print-on-Demand and locate the Printify section. Enter your API Key and Shop ID, then click Save. NanoCart will verify the credentials before saving.
Linking Products to Printify
Each product variant in NanoCart that Printify should fulfill requires a Printify Sync Variant ID. This ID links a NanoCart variant to the corresponding product variant in your Printify catalog.
To find the Sync Variant ID, open the product in your Printify dashboard and inspect the variant details. In NanoCart, open the product under Products, edit the relevant variant, and enter the Sync Variant ID in the Printify Sync Variant ID field. Save the product when finished.
Products with a Sync Variant ID assigned will be flagged as POD items. Shipping is handled by Printify based on the recipient's address — do not configure NanoCart shipping methods for POD-only products.
Test Mode
NanoCart supports a POD test mode. When test mode is enabled in Settings > Print-on-Demand, orders are submitted to Printify as drafts rather than live production orders. Use this to verify your integration end-to-end without incurring fulfillment costs. Disable test mode before going live.
Automatic Dispatch
After a successful payment (via Stripe or PayPal), NanoCart automatically dispatches the order to Printify. No action is required on your part. The order detail in NanoCart will display the Printify Order ID and current fulfillment status once dispatched.
Monitoring Fulfillment
Open any order in Orders to view its fulfillment status. The order detail modal shows the Printify fulfillment status and the associated podOrderId returned by Printify.
Error Handling and Retry
If dispatch fails, the order will display a POD Error badge in your Orders list. Open the order detail to see the error. A Retry (Printify) button is available directly on the order — click it to attempt dispatch again. Retries can be triggered as many times as needed. If errors persist, verify that your API key and Shop ID are correct and that the Sync Variant ID on the product is valid in your Printify shop.
Order Management
The Orders section in your NanoCart admin dashboard gives you full visibility into every transaction placed through your store, whether via the widget or your hosted storefront. From here you can view order details, update statuses, manage fulfillment, and handle customer communication.
Orders List View
The orders list displays all orders in reverse chronological order. Each row includes:
- Order Number — A unique identifier for the order (e.g.,
#1042) - Customer Name — The buyer's full name as entered at checkout
- Email — The buyer's email address
- Status — A color-coded badge reflecting the current order status (see Order Statuses below)
- Payment — A badge indicating the payment processor used (Stripe or PayPal)
- POD — A fulfillment badge for orders containing print-on-demand items; shows a "POD Error" badge if automatic dispatch failed
- Total — The final charged amount in your store's currency
- Date — The date and time the order was placed
Use the filter controls to narrow the list by status or date range. You can also select multiple orders using checkboxes to perform bulk status updates or export a CSV. CSV export is available for your entire order history or for a selected subset.
Order Detail Modal
Click any order row to open the order detail modal, which provides a complete view of the transaction.
Customer and Order Info
Displays the customer's name, email address, and the date the order was placed. The payment method (Stripe or PayPal) and any applied coupon code are also shown here.
Items Ordered
A line-item breakdown of everything in the order, including product names, variant details (size, color, etc.), quantity, and unit price.
Order Totals
A full cost breakdown including:
- Subtotal
- Discount (if a coupon was applied)
- Shipping
- Tax (if Stripe Tax is enabled)
- Total
Shipping Address
The buyer's full delivery address as entered at checkout. Digital-only orders will not display a shipping address.
POD Fulfillment Status
For orders containing print-on-demand products, the modal shows per-provider fulfillment status and the associated podOrderId from Printful or Printify. If dispatch failed, retry buttons appear for each provider.
Order Statuses
| Status | Meaning |
|---|---|
| Pending | Order received but payment not yet confirmed |
| Processing | Payment confirmed; order is being prepared |
| Paid | Payment captured; awaiting fulfillment |
| Shipped | Order has been dispatched; tracking may be available |
| Delivered | Order confirmed as delivered |
| Refunded | A full or partial refund has been issued |
| Cancelled | Order was cancelled before fulfillment |
Updating an Order
From the order detail modal you can make the following updates:
- Status — Select a new status from the dropdown and save. Use this to manually advance an order through the fulfillment lifecycle.
- Tracking Number — Enter a carrier tracking number once the order ships. This is stored on the order record.
- Admin Notes — Add internal notes visible only to you in the dashboard. These are not shared with the customer.
After saving changes, you can also resend the order confirmation email to the buyer directly from the modal, or navigate to the refund flow to issue a full or partial refund.
Filtering & Searching Orders
The Orders section provides filter controls and flexible pagination to help you locate and review specific orders quickly, whether you manage a handful of transactions or a high-volume store.
Available Filters
Status Filter
Use the status dropdown to narrow orders to a specific stage in the fulfillment lifecycle. Available options are:
- Any — Shows all orders regardless of status (default view)
- Pending — Orders received but not yet processed
- Processing — Orders being prepared for fulfillment
- Paid — Payment confirmed, awaiting fulfillment action
- Shipped — Orders with tracking information added and marked as shipped
- Delivered — Orders confirmed as delivered to the buyer
- Refunded — Orders that have been partially or fully refunded
- Cancelled — Orders that were cancelled before fulfillment
Date Range Filter
The date range control lets you scope results to a specific time window. Select a start date using the From date picker and an end date using the To date picker. Both fields are optional — you can set only a start date to see all orders from that date forward, or only an end date to see all orders up to that point.
Applying Filters
Filters take effect immediately when you interact with any filter control. Selecting a status from the dropdown or choosing dates from either picker triggers an instant reload of the orders list — there is no separate "Apply" button to click. To clear a filter, reset the dropdown to Any or clear the date fields. Filters can be combined freely; for example, you can view all Shipped orders placed within a specific two-week window.
Pagination
The orders list supports four page-size options: 10, 25, 50, or 100 orders per page. Select your preferred size from the per-page control above or below the list. The current range is displayed as a label (for example, 1–25) so you always know your position within the full result set.
Use the Previous and Next buttons to move between pages. NanoCart uses cursor-based pagination internally, which means navigation remains stable and performant even across very large order histories. Unlike offset-based pagination, cursor-based navigation does not skip or repeat records if new orders arrive while you are browsing.
Combining Filters with Bulk Actions
Any filter combination you apply also scopes checkbox selection and bulk operations. When you select orders using the header checkbox, only the orders visible under your current filters are selected, making it straightforward to, for example, export a CSV of all Paid orders from last month.
Bulk Order Actions
The Orders section supports bulk status updates, allowing you to update multiple orders at once without opening each one individually. This is especially useful when processing a batch of new orders or marking a group of fulfilled shipments as shipped.
Selecting Orders
Each row in the orders list includes a checkbox on the left side. Click a checkbox to select that order. Selected rows are visually highlighted so you can easily track your selection.
To select all orders on the current page at once, click the checkbox in the table header row. Clicking it again deselects all currently selected orders.
Note: Selection applies to the current page only. If you navigate to another page, your selection is cleared.
The Bulk Action Bar
Once one or more orders are selected, a bulk action bar appears above the orders table. The bar displays the number of currently selected orders (for example, "5 orders selected") and provides controls for the available bulk actions.
To deselect all orders and dismiss the bulk action bar, click Deselect All in the bar or uncheck the header checkbox.
Updating Status in Bulk
To change the status of multiple orders at once:
- Select the orders you want to update using the row checkboxes or the select-all checkbox.
- In the bulk action bar, open the Status dropdown and choose the target status (for example,
shipped,processing,delivered, orcancelled). - Click Update Status.
NanoCart applies the selected status to all chosen orders immediately. The table refreshes to reflect the updated statuses.
Valid order statuses are: pending, processing, paid, shipped, delivered, refunded, and cancelled.
Example Use Cases
Marking a batch of orders as shipped: After fulfilling a group of orders through your shipping provider, select all the relevant rows, choose shipped from the status dropdown, and click Update Status. All selected orders are updated in a single action.
Moving new orders into processing: At the start of your fulfillment workflow, select all pending orders for the day, set the status to processing, and click Update Status to signal that fulfillment has begun.
Combining with Filters
Use the status and date range filters at the top of the Orders page to narrow the list before making a selection. For example, filter by pending to show only new orders, then use the select-all checkbox to choose the entire filtered set before applying a bulk update.
Exporting Orders to CSV
The Orders section includes a built-in CSV export feature that lets you download order data for accounting, fulfillment, or analysis. The exported file is compatible with any spreadsheet application, including Excel and Google Sheets.
Accessing the Export Button
The Export CSV button appears in the orders filter bar, alongside the status filter and date range controls. Apply any combination of filters before exporting — the export respects whatever filters are currently active.
Export Modes
There are two ways to export orders, depending on whether you have selected individual orders using the checkbox column.
Export all matching orders
If no checkboxes are selected, clicking Export CSV exports every order that matches your current filters — across all pages, not just the orders visible on screen. This is useful for generating a complete monthly report or downloading your full order history. NanoCart fetches all matching pages automatically before generating the file.
Export selected orders
To export a specific subset, check the box next to each order you want to include, then click Export CSV. Only the checked orders are included in the file, regardless of the active filters. This is useful when you need to pull a handful of orders for a specific customer or fulfillment batch.
CSV File Contents
Each row in the exported file represents one order and includes the following fields:
| Field | Description |
|---|---|
| Order Number | Unique order identifier |
| Date | Order creation date and time |
| Status | Current order status (e.g., paid, shipped, refunded) |
| Customer Name | Full name from the shipping address |
| Customer Email | Buyer's email address |
| Payment Processor | Stripe or PayPal |
| Coupon Code | Discount code applied, if any |
| Items | Line items with product names, quantities, and unit prices |
| POD | Whether any item is a Print-on-Demand product (Yes/No) |
| Subtotal | Item total before discounts, shipping, and tax |
| Discount | Coupon discount amount |
| Shipping | Shipping charge |
| Tax | Tax collected |
| Total | Final amount charged |
| Currency | Three-letter currency code (e.g., USD) |
| Shipping Method | Selected shipping method (e.g., flat_rate, local_pickup) |
| Shipping Address | Full address including street, city, state, postal code, and country |
Downloaded File Name
The file downloads with the naming format orders-{store}-{date}.csv, where {store} is your store ID and {date} is the current date. This makes it easy to keep exports organized across multiple downloads or stores.
Issuing Refunds
NanoCart supports full and partial refunds for orders processed through either Stripe or PayPal. Refunds are initiated directly from the order detail view and are processed automatically through the original payment provider — no need to log in to Stripe or PayPal separately.
Accessing the Refund Option
- Navigate to Orders in the admin dashboard.
- Click any order row to open the order detail modal.
- Click the Issue Refund button in the modal header.
The refund dialog will display the order total and the remaining refundable balance for that order.
Refund Types
Full Refund
Select Full Refund to refund the entire remaining balance on the order. This is the appropriate choice when the order has not been partially refunded previously, or when you want to refund all remaining funds in a single action.
Partial Refund
Select Partial Refund and enter a specific dollar amount to refund less than the full balance. This is useful for scenarios such as refunding a single item from a multi-item order, issuing a courtesy discount, or handling a return of part of the order.
The system validates the entered amount against the remaining refundable balance and will not allow you to issue a refund that exceeds what is still refundable. An error will be shown if the amount entered is invalid.
Confirmation and Processing
After selecting the refund type (and entering an amount for partial refunds), confirm the action when prompted. NanoCart will immediately submit the refund request to the original payment provider:
- Stripe orders: The refund is issued via the Stripe API against the original charge.
- PayPal orders: The refund is issued via the PayPal API against the original capture.
No additional configuration is required. The payment provider used for the order is detected automatically.
> Note: Refunds typically take 5–10 business days to appear on the customer's bank or card statement, depending on their financial institution.
Order Status and Refund Tracking
After a refund is processed:
- The order's refundedAmount is updated to reflect the cumulative amount refunded.
- If the total refunded equals the full order amount, the order status is automatically set to Refunded.
- An amber "X refunded" badge appears on the order in the Orders list, where X is the refunded dollar amount. This badge is visible for both fully and partially refunded orders, providing an at-a-glance indicator without opening the order detail.
For partially refunded orders, the status remains unchanged until the full balance has been refunded.
Resending Order Confirmation
If a customer requires updated order information after a refund, you can resend the order confirmation email using the Resend Confirmation button, also available in the order detail modal header.
Resending Order Confirmation Emails
Order confirmation emails are sent automatically to the customer immediately after a successful purchase. In some cases, you may need to resend this email manually.
When to Resend
There are several common situations where resending a confirmation is appropriate:
- The customer never received the email. Confirmation emails occasionally end up in spam or junk folders, or are filtered by aggressive corporate email systems. Resending gives the customer another opportunity to find it.
- The email was delayed. Temporary mail server issues can cause delivery delays. If the customer reaches out shortly after purchase, a resend can resolve the problem.
- Digital download links are needed again. If a customer purchased a digital product and the original email was lost, resending it restores access to their download links. Note that the same expiration window applies — links expire 72 hours from when they were originally generated. If the links have already expired, regenerate them from the order detail page before resending.
How to Resend
- Navigate to Orders in your admin dashboard.
- Locate the order and click on it to open the order detail panel.
- Click the Resend Confirmation button.
The email is sent immediately. No confirmation dialog is shown — the action takes effect as soon as you click the button.
What the Customer Receives
The resent email is identical to the original order confirmation. It is sent from orders@nanocart.io with your store name and brand color applied, and includes:
- Order number, date, and status
- Itemized list of products purchased, including variants
- Order totals and shipping information
- Download links, if the order contains digital products
Limitations
The confirmation email is always sent to the email address the customer entered at checkout. You cannot change or override the destination address from the admin panel. If the customer used an incorrect email address, they will not be able to receive the resent confirmation, and you would need to assist them through an alternate channel.
Stripe Setup
NanoCart integrates directly with your Stripe account to process payments. You retain full control of your funds — NanoCart never holds or routes payments on your behalf.
What You Need
Before connecting Stripe, make sure you have:
- A Stripe account (stripe.com). If you don't have one, create a free account. New accounts start in a sandbox (you'll see a banner: "You're testing in a sandbox") — that's fine for setup and testing; completing Stripe's business verification unlocks the live account for real payments.
Answering Stripe's Setup Questions
When you create a new Stripe account, Stripe asks a few onboarding questions. Here's how to answer them for NanoCart:
- "How do you want to get started?" — choose Accept payments (sell products or services directly to your customers), then Continue.
- "How do you want to accept payments?" — choose Prebuilt checkout form. NanoCart redirects your buyers to a Stripe-hosted checkout page, which is exactly what this option describes.
Don't worry about getting these "wrong" — they only tailor Stripe's own setup guide and recommendations. Nothing is locked in, and NanoCart works the same regardless. If Stripe shows a question not listed here, choosing Skip is always safe.
Do I Need to Add My Products to Stripe?
No. NanoCart is your product catalog — you never create products in Stripe. At checkout, NanoCart sends Stripe each line item (name, price, quantity) on the fly, and Stripe simply processes the payment. Your Stripe transactions will still show the product names on every charge.
Stripe's own onboarding and setup guide may prompt you to "add a product" or set up its Product catalog — skip those steps. That catalog is only for merchants selling through Stripe's own tools (payment links, invoices, subscriptions). Managing products in two places would just create conflicting prices; everything about a product lives in NanoCart only.
Step-by-Step Setup
1. Log into your Stripe Dashboard
Go to dashboard.stripe.com and sign in to the account you want to connect to your NanoCart store.
2. Copy your API keys — they're right on the Home page
- On the dashboard Home page, look for the API keys panel on the right side. It shows your Secret key and Publishable key with copy buttons. (If you don't see the panel, click Go to API keys or open dashboard.stripe.com/apikeys.)
- Copy the Publishable key (begins with
pk_test_in a sandbox,pk_live_in the live account). - Copy the Secret key (begins with
sk_test_orsk_live_).
If you're in a sandbox you'll get pk_test_/sk_test_ keys. For real payments, click Switch to live account (top-right of the sandbox banner) and copy the pk_live_/sk_live_ keys from there.
Keep your Secret key private. Never share it publicly or commit it to source control.
3. Create a webhook endpoint
NanoCart requires a webhook so Stripe can confirm successful payments back to your store.
- Click Developers in the bottom-left corner of the Stripe Dashboard (it's a small button at the very bottom of the sidebar, not a sidebar menu item), then choose Webhooks.
- Click + Add destination.
- Keep Your account selected. In the events search box, type
checkout, expand Checkout, and check checkout.session.completed. Click Continue. - Choose Webhook endpoint as the destination type and click Continue.
- Enter the following Endpoint URL (give the destination any name you like, e.g. "NanoCart Checkout"):
https://api.nanocart.io/shop/webhooks/stripe
- Click Create destination.
- On the destination's detail page, reveal and copy the Signing secret (begins with
whsec_).
Note: a sandbox and the live account each have their own webhooks. Create the webhook in the live account for real payments (and optionally one in the sandbox for testing — each has its own signing secret).
4. Enter your credentials in NanoCart
- Open your NanoCart admin at portal.nanocart.io.
- Navigate to Settings > Store Configuration.
- Paste your Publishable key, Secret key, and Webhook signing secret into the Stripe fields.
- Click Save.
Your store is now connected to Stripe and ready to accept payments.
Live Mode vs. Test Mode
NanoCart supports both Stripe environments. Toggle between them in Settings > Store Configuration using the Stripe Test Mode switch — test keys and live keys have their own separate fields.
- Test mode: Use the sandbox keys (
pk_test_/sk_test_) to place orders without real charges. Stripe provides test card numbers for simulating successful payments and declines. - Live mode: Use live keys (
pk_live_/sk_live_) to process real transactions. Your Stripe account must have completed business verification before live payments work — until then only the sandbox is available.
Make sure you copy keys from the matching place in Stripe — sandbox keys come from the sandbox, live keys from the live account (Switch to live account in the top-right).
What Stripe Handles
Once connected, Stripe manages the following on your behalf:
- Payment processing: Credit and debit cards, with support for additional payment methods based on your Stripe account settings.
- Tax calculation: If you have Stripe Tax enabled on your Stripe account, NanoCart will automatically apply tax at checkout based on the buyer's location.
Buyer Experience
When a customer clicks a checkout button on your site or storefront, they are redirected to a Stripe-hosted Checkout page. Stripe handles all payment details, card validation, and 3D Secure authentication. After a successful payment, the buyer is returned to your store's order confirmation page.
PayPal Setup
NanoCart supports PayPal as a checkout payment method alongside Stripe. When both are active, buyers see both options at checkout and can choose whichever they prefer. NanoCart does not hold funds — payments go directly into your PayPal account.
What You Need
- A PayPal Business account
- Access to the PayPal Developer Dashboard (log in with your PayPal credentials)
Step-by-Step Setup
1. Log into the PayPal Developer Dashboard
Go to developer.paypal.com and sign in with your PayPal Business account credentials.
2. Create an App
Navigate to Apps & Credentials in the top menu. Under the REST API apps section, click Create App. Give your app a name (e.g., "NanoCart"), select Merchant as the app type, and click Create App.
3. Copy Your Client ID and Secret
Once the app is created, you will land on the app detail page. Copy the Client ID shown at the top. To reveal your Secret, click Show beneath the Client ID field and copy that value as well. Keep these credentials secure — treat them like passwords.
4. Add a Webhook
Scroll down to the Webhooks section on the same app detail page and click Add Webhook. Enter the following URL as the webhook endpoint:
https://api.nanocart.io/shop/webhooks/paypal
Under Event types, select PAYMENT.CAPTURE.COMPLETED. Click Save. After saving, PayPal will display a Webhook ID — copy this value.
5. Enter Credentials in NanoCart
In your NanoCart admin panel, go to Settings > Payments > PayPal. Paste the three values you copied:
- Client ID
- Secret
- Webhook ID
Click Save to apply your changes.
6. Choose Sandbox or Live Mode
Toggle the mode to match the credentials you entered:
- Sandbox — Use test credentials from the PayPal Developer Dashboard for testing. No real money moves. Ideal for verifying your setup before going live.
- Live — Use your live app credentials. Real PayPal transactions will be processed and funds deposited into your account.
To switch between modes, update the toggle in Settings > Payments > PayPal and ensure the credentials entered match the selected mode. Sandbox and live apps have separate Client IDs and Secrets.
Sandbox vs. Live Mode
In sandbox mode, PayPal provides test buyer accounts you can use to simulate purchases end-to-end without any real charges. Use the PayPal Developer Dashboard to manage sandbox accounts and view test transactions. Once you are ready to accept real payments, switch to live mode with your production credentials.
Buyer Experience
When a buyer selects PayPal at checkout, they are redirected to the PayPal approval page where they can log in and confirm the payment. After completing the payment, PayPal redirects them back to your store's order confirmation page. The entire redirect flow is handled automatically — no additional configuration is required on your end.
Running PayPal and Stripe Together
PayPal and Stripe can be active at the same time. When both are connected, buyers see both payment options displayed at checkout and can select their preferred method. Enabling one does not affect the other, and you can disconnect either at any time from Settings > Payments.
Shipping Methods
NanoCart supports five shipping methods to fit a range of fulfillment workflows. You configure shipping in Settings > Shipping from your admin dashboard. Available methods depend on your plan — the Free plan supports Flat Rate and Free Shipping only. Standard plans and above unlock all methods.
Flat Rate
Charge a single, fixed shipping fee on every order, regardless of subtotal or item count.
Available on: All plans
Configuration:
- Go to Settings > Shipping and select Flat Rate.
- Enter the shipping cost (e.g.,
5.99). - Save your settings.
Every order will be charged exactly this amount at checkout. Flat Rate is the simplest option and works well when your average order size and weight are consistent.
Free Shipping
Offer free shipping on all orders with no conditions.
Available on: All plans
Configuration:
- Go to Settings > Shipping and select Free Shipping.
- Save your settings.
No shipping cost is displayed or charged at checkout. Use this method if shipping is built into your product pricing or if you run a digital-only store.
Tiered Shipping
Set different shipping rates based on the order subtotal. As a customer's cart grows, the shipping cost can decrease — incentivizing larger purchases.
Available on: Standard, Pro, and Expert plans
Configuration:
- Go to Settings > Shipping and select Tiered.
- Add subtotal brackets and assign a shipping cost to each. For example:
- $0.00 – $24.99 → $5.99
- $25.00 – $49.99 → $3.99
- $50.00 and above → $0.00
- Save your settings.
Brackets are evaluated against the order subtotal at checkout, and the matching rate is applied. Ensure your brackets are contiguous and cover all possible subtotal values.
Free Shipping Threshold
Offer free shipping once an order exceeds a set subtotal. Orders below the threshold are charged a flat rate.
Available on: Standard, Pro, and Expert plans
Configuration:
- Go to Settings > Shipping and select Free Shipping Threshold.
- Enter the minimum subtotal required for free shipping (e.g.,
50.00). - Enter the flat rate to charge on orders below the threshold (e.g.,
5.99). - Save your settings.
This method is effective for increasing average order value. Customers will see the free shipping threshold displayed in the cart, encouraging them to add more items to qualify.
Local Pickup
Allow customers to pick up their order in person at no shipping cost. No address or carrier is required for fulfillment.
Available on: Standard, Pro, and Expert plans
Configuration:
- Go to Settings > Shipping and select Local Pickup.
- Optionally add pickup instructions (e.g., address, hours, contact information) to display to the customer at checkout.
- Save your settings.
When a customer selects Local Pickup, the shipping cost is $0.00 and no shipping address is collected. Orders placed with Local Pickup will appear in your Orders list and can be updated to Delivered once the customer collects their items.
Plan Restrictions
| Method | Free | Standard | Pro | Expert |
|---|---|---|---|---|
| Flat Rate | Yes | Yes | Yes | Yes |
| Free Shipping | Yes | Yes | Yes | Yes |
| Tiered | No | Yes | Yes | Yes |
| Free Shipping Threshold | No | Yes | Yes | Yes |
| Local Pickup | No | Yes | Yes | Yes |
To access Tiered, Free Shipping Threshold, or Local Pickup, upgrade to a Standard plan or above from Settings > Billing.
Coupons & Discount Codes
Coupons let you offer discounts to your customers through unique promo codes. You can control the discount type, value, eligibility requirements, and usage limits — all from the Coupons section of your admin dashboard.
Creating a Coupon
To create a new coupon, navigate to Admin > Coupons and click Create Coupon. Fill in the following fields:
- Code — The promo code customers will enter at checkout (e.g.,
SUMMER20). Codes are case-insensitive. - Type — Choose Percentage or Fixed Amount (see below).
- Value — The discount amount. For percentage discounts, enter a number between 1 and 100. For fixed discounts, enter a dollar amount.
- Status — Set to Active to make the coupon usable immediately, or Inactive to save it for later.
Discount Types
Percentage
Deducts a percentage from the order subtotal. For example, a coupon with a value of 20 gives the customer 20% off their order. Useful for promotions like seasonal sales or loyalty rewards.
Fixed Amount
Deducts a flat dollar amount from the order subtotal. For example, a value of 10 gives the customer $10 off. If the coupon value exceeds the order subtotal, the discount is capped at the subtotal — the customer will not receive a negative total.
Optional Restrictions
All restrictions are optional. Leave them blank to create an unrestricted coupon.
- Minimum Order Amount — The cart subtotal must meet or exceed this value before the coupon can be applied. For example, setting this to
$50means the code only works on orders of $50 or more. - Maximum Uses — Limits how many times the coupon can be redeemed across all customers. Once the limit is reached, the coupon is automatically invalidated.
- Expiration Date — Sets a date after which the coupon can no longer be applied. Expired coupons remain visible in your dashboard but will be rejected at checkout.
- Category Restrictions — Limits the discount to products in one or more specific categories. If the cart contains items from multiple categories, only the eligible items count toward the discount calculation.
How Customers Apply Coupons
During checkout, customers will see a Promo Code field in the cart drawer. They enter the code and click Apply. If the code is valid and all restrictions are met, the discount appears as a line item in the cart summary — showing the code used and the amount deducted — before the customer completes payment via Stripe or PayPal.
If the code is invalid, expired, or the cart does not meet the minimum order requirement, an error message is shown and no discount is applied.
Managing Coupons
The Coupons list view displays all coupons with their code, type, value, usage count, status, and expiration date. You can:
- Deactivate a coupon at any time by editing it and setting its status to Inactive. Inactive coupons are rejected at checkout immediately.
- Reactivate a coupon by setting it back to Active, provided it has not expired or exhausted its maximum uses.
- Delete coupons that are no longer needed.
Coupons that have reached their usage limit or passed their expiration date are not automatically removed — they remain in the list so you retain a history of past promotions.
Analytics & Reports
NanoCart gives you visibility into how shoppers interact with your store and how your orders are trending over time. Access all analytics from the Analytics tab in your admin dashboard at portal.nanocart.io.
Cart Analytics
Cart Analytics shows you a session-based funnel that tracks shoppers from their first page interaction through to a completed purchase. Data is collected automatically — no additional setup is required. The NanoCart widget and hosted storefront both instrument events silently in the background.
What is a session?
A session begins when a visitor loads a page where the NanoCart widget is active or visits your hosted storefront. Sessions are tracked at the browser level and are independent of whether the shopper is logged in or has an account.
Funnel metrics
The funnel displays four sequential steps and the conversion rate between each:
| Metric | Description |
|---|---|
| Sessions | Total unique sessions in the selected period |
| Add to Cart | Sessions where at least one item was added to the cart |
| Checkout Starts | Sessions where the shopper opened the checkout flow |
| Purchases | Sessions that resulted in a completed order |
Below each step, NanoCart shows the step conversion rate — the percentage of the prior step that advanced to the next. For example, if 200 sessions had an add-to-cart event and 50 of those reached checkout, the add-to-cart → checkout rate is 25%.
Date range filtering
Use the date range selector at the top of the Analytics page to filter funnel data by a custom period. All four metrics and their conversion rates update to reflect only sessions within the selected window.
Order Reports
The Orders section of your admin dashboard doubles as your primary order report. It provides a full history of every transaction placed through your store, with flexible filtering to zero in on the data you need.
Filtering options
- Status: Filter by any order status — pending, processing, paid, shipped, delivered, refunded, or cancelled.
- Date range: Narrow results to a specific time window to analyze revenue or order volume for a given period.
Exporting order data
You can export order records to CSV directly from the Orders list. Use the checkbox column to select specific orders, or export all orders matching your current filters. The CSV includes order details, line items, totals, and shipping information, making it straightforward to analyze revenue trends in a spreadsheet or import into external tools.
Revenue tracking
While NanoCart does not currently provide a dedicated revenue chart, the CSV export combined with date and status filters gives you a reliable way to calculate revenue for any period — for example, exporting all orders with status paid or delivered within a given month.
Store Settings
Store Settings is the central configuration panel for your NanoCart store. Access it from the Settings tab in your admin dashboard at portal.nanocart.io.
Changes saved here propagate across your storefront, widget cart, order emails, and admin panel — so keep this information accurate and up to date.
Store Name
Your store's display name. This appears in:
- The widget cart drawer header
- Order confirmation emails sent to buyers
- Admin notification emails sent to you
- Your hosted storefront (if applicable)
Choose a name that matches your brand exactly as you want customers to see it.
Contact Email
The email address associated with your store for administrative purposes. Admin order notifications are delivered here. This is not the sender address for buyer-facing emails — NanoCart sends those from orders@nanocart.io on your behalf, styled with your store name and brand color.
Logo URL
A publicly accessible URL pointing to your store's logo image. The logo appears in:
- Order confirmation emails sent to buyers
- Your hosted storefront header (if you are on a hosted plan)
Use a direct image URL (PNG or SVG recommended). Ensure the image is hosted on a reliable, publicly accessible server. For best results, use a logo with a transparent background and a minimum width of 200px.
Brand Color
A hex color code (e.g., #3B82F6) that defines your store's primary color. This color is applied to:
- The widget cart drawer header and accent elements
- Order confirmation emails (header background and call-to-action buttons)
Enter the value as a valid six-character hex code, with or without the leading #. If left blank, NanoCart falls back to a default color.
Currency
The currency used for all product prices, order totals, and refunds in your store. NanoCart supports a wide range of currencies including USD, EUR, GBP, CAD, AUD, and more.
Important: Currency affects how prices are displayed and how payments are processed through Stripe or PayPal. Changing your currency after you have active products or orders is not recommended, as existing prices are stored in the original currency.
Store Description
A brief description of your store. This is used in your hosted storefront's metadata and may appear on certain storefront templates to give visitors context about what you sell.
Keep it concise — one to three sentences describing your store's focus and what makes it distinctive.
After making any changes, click Save Settings to apply them. Some updates (such as brand color or logo) may take a few minutes to reflect in cached email templates.
Email Configuration
NanoCart sends transactional emails automatically on your behalf — no third-party email service setup required. The Email Configuration section in your store settings controls the sender name and reply-to address that appear on those emails.
From Name
The From Name is the sender name customers see in their inbox (for example, "Cheeky Surf Shop"). Set this to your store name or brand name so buyers immediately recognize where the email is coming from. If left blank, your store name from the Store Info settings is used as the default.
Reply-To Email
The Reply-To Email is the address customers reach when they hit "Reply" on an order email. Set this to your store's contact email so replies come directly to you, not to an unmonitored inbox. This is separate from the sending address (see below) and is where all customer responses will be delivered.
How NanoCart Sends Email
All emails from NanoCart are sent from orders@nanocart.io regardless of your From Name or Reply-To settings. This is intentional: nanocart.io is a DKIM-authenticated domain registered with Amazon SES, which means emails reliably reach inboxes rather than spam folders. Your From Name and Reply-To are surfaced to customers, but the technical sending infrastructure stays on NanoCart's authenticated domain.
Automatic Emails
NanoCart sends two emails automatically for every completed order:
- Order confirmation (to buyer): Sent immediately after a successful payment. Includes the order summary, line items, totals, shipping address, and — for digital products — download links that expire after 72 hours. If the buyer needs a copy resent, you can trigger it from the order detail view in your dashboard.
- Order notification (to store owner): Sent to your store's contact email whenever a new order is placed, so you're notified right away without having to check the dashboard.
Branding in Emails
Your store name and brand color (set in Store Info) are applied to all outgoing emails automatically. The order confirmation email displays your store name in the header and uses your brand color for accents, giving customers a consistent branded experience from checkout through fulfillment.
Where to Configure
Go to Settings > Email in your admin dashboard to update your From Name and Reply-To Email. Changes take effect immediately on the next outgoing email.
Tax Configuration
NanoCart supports two ways to collect sales tax, controlled from Settings > Sales Tax: automatic calculation with Stripe Tax, or a flat tax rate you set yourself. A master toggle turns collection off entirely.
The Master Toggle
Collect sales tax controls everything. When it is off, no tax is calculated or charged on any order — Stripe or PayPal. This is appropriate for sellers who have not reached economic-nexus thresholds and are not yet required to collect. NanoCart does not enforce tax compliance — determining your obligations is your responsibility.
Option 1: Stripe Tax (automatic, Stripe checkouts)
Enable Use Stripe Tax for Stripe checkouts and Stripe calculates the exact tax for each order from the buyer's address, your registered jurisdictions, and the product type — including state, county, city, and special-district stacking.
- Activate Stripe Tax in your Stripe Dashboard > Tax and register the states where you have nexus (Tax > Registrations). Stripe charges 0.5% per taxed transaction.
- In NanoCart, turn on Collect sales tax and Use Stripe Tax, then save.
If Stripe Tax is not activated on your Stripe account, checkout returns a clear error telling you to activate it or switch modes. Stripe Tax users get filing-grade reports in the Stripe Dashboard.
Option 2: Flat Tax Rate
The Flat tax rate (%) applies a single percentage to the post-discount subtotal. It is used for:
- All PayPal orders — PayPal cannot compute destination-based tax, so PayPal checkouts always use the flat rate when collection is on.
- Stripe orders when Stripe Tax is off — a simple option if you only have nexus in your home state.
Set it to your home-state rate (for example 6 for 6%), or 0 to skip flat-rate collection. Behind the scenes, Stripe flat-rate orders use a Stripe Tax Rate object so coupons and discounts interact correctly.
Reporting
Every order stores the tax collected. Reports in your dashboard show total tax collected for any date range, broken down by state (orders without a shipping address appear as "Other / no address"). These are collected amounts — remitting and filing are up to you; Stripe Tax merchants should use Stripe's filing reports.
Buyer Experience
When tax applies, the amount appears as a separate line in the checkout summary before the buyer pays, clearly separated from the subtotal and shipping.
API Keys & Webhooks
API Keys
Every NanoCart store has a unique live API key in the format sc_live_.... This key authenticates your store across all NanoCart surfaces — it is embedded in your widget script tag and is used automatically by hosted storefronts to load your products and configuration.
Where to find your API key
Navigate to Settings > API Keys in your admin dashboard. Your live key is displayed there and can be copied at any time.
How the API key is used
Your API key is not used by the widget. The widget script tag takes your public Store ID via data-store-id:
<script src="https://cdn.nanocart.io/v1/nanocart.min.js" data-store-id="YOUR_STORE_ID"></script>
The API key (sc_live_...) is only for the Admin API — server-side calls that manage products, orders, and settings. Keep it secret: use it from a server or CLI, never in website code that visitors can see.
If you are on a hosted storefront plan, your key is configured automatically — no additional setup is needed.
Regenerating your API key
You can regenerate your API key at any time from Settings > API Keys. Be aware of the following before doing so:
- The old key is invalidated immediately upon regeneration.
- Any widget installations using the old key will stop functioning until updated.
- After regenerating, update the
data-storeattribute in every page where the widget script tag appears.
Keeping your key secure
Your API key grants access to your store's data. Treat it like a password:
- Do not commit it to public source code repositories.
- Do not share it in support tickets or public forums.
- If you suspect your key has been compromised, regenerate it immediately.
Webhooks
Webhooks allow you to receive real-time HTTP notifications when activity occurs in your store. When a subscribed event fires, NanoCart sends a POST request with a JSON payload to the URL you configure.
Adding a webhook endpoint
- Go to Settings > Webhooks in your admin dashboard.
- Enter the URL of your endpoint (must be publicly reachable over HTTPS).
- Save. NanoCart will begin delivering events to that URL immediately.
Available events
| Event | Description |
|---|---|
| order.created | Fires when a new order is placed and payment is confirmed. |
| order.updated | Fires when an order's status, tracking number, or notes are changed. |
Webhook payload
Each request body contains the full order object as JSON, including order ID, line items, totals, shipping address, customer details, payment method, and current status. The event field at the top level identifies which event triggered the delivery.
Webhook signing
NanoCart signs every outgoing webhook request with an X-NanoCart-Signature header. You should verify this signature on your server before processing the payload to confirm the request originated from NanoCart and was not tampered with in transit. The signing secret is available in Settings > Webhooks.
Delivery history
Every webhook delivery attempt is logged in the admin dashboard under Settings > Webhooks. The log shows the event type, timestamp, HTTP response code returned by your endpoint, and whether delivery succeeded or failed. Failed deliveries can be retried manually from the delivery history view.
NanoCart considers a delivery successful when your endpoint returns a 2xx HTTP status code. Endpoints that time out or return non-2xx responses are marked as failed in the log.
Billing & Subscription
NanoCart subscriptions are billed through Stripe. A valid credit or debit card is required to activate any paid plan. Your card is stored securely by Stripe — NanoCart does not store payment card data.
Billing Cycles
Plans are available on a monthly or annual basis. Annual plans are priced at 10× the monthly rate, which is equivalent to roughly two months free compared to paying month-to-month. You choose your billing interval when subscribing and can switch between intervals when changing plans.
Viewing Your Current Plan
Your active plan and next billing date are visible in two places:
- Dashboard — A summary card shows your current plan tier and renewal date.
- Settings → Billing — The full billing view includes your plan details, billing interval, and options to upgrade, downgrade, or cancel.
Upgrading a Plan
Upgrades take effect immediately. As soon as you confirm an upgrade, your account is provisioned to the new tier and any newly unlocked features — such as additional products, shipping methods, or POD integrations — become available right away. The charge is prorated: you are billed only for the remaining days in your current billing period at the higher plan rate.
Downgrading a Plan
Downgrades take effect at the end of your current billing period. You retain access to your current plan's features until that date. At renewal, your account transitions to the lower tier. If your store data (such as product count) exceeds the limits of the new plan, you will be prompted to make adjustments before the downgrade takes effect.
Canceling
You can cancel at any time from Settings → Billing. Cancellation stops future charges, but your access continues through the end of the period you have already paid for. After that date, your account reverts to the Free tier (for widget plans) or becomes inactive (for hosted storefront plans).
Widget Plans vs. Hosted Storefront Plans
Widget plans and hosted storefront plans are independent subscription tracks:
- Widget-only subscribers (Standard, Pro, Expert) pay for the JavaScript cart widget and manage products through the admin dashboard. Hosting is not included.
- Hosted storefront subscribers (Starter, Standard, Growth, Scale) receive an all-in bundle that includes a hosted store at
{storeId}.nanocart.ioplus a bundled widget tier. These plans cannot be mixed with standalone widget plans.
If you are on a hosted plan, your widget tier is determined by your hosting plan level. You may upgrade the widget component of a hosted plan independently, with the cost prorated and applied immediately.
Changing Payment Method
To update your card on file, go to Settings → Billing and select Update Payment Method. You will be redirected to a secure Stripe-hosted page to add or replace your card.
Build with AI
NanoCart ships an official skill for AI coding agents — Claude Code, Codex, Cursor, and friends. Install it once and your agent knows exactly how to embed the cart widget, wire buy buttons, match your site’s design, add an email-signup form, and even build your product catalog from a folder of images.
What You Can Say
- “Add NanoCart to my site and put Buy Now buttons on my product cards”
- “Theme the cart to match my site’s colors”
- “Create products in my NanoCart store from the images in
./products” - “Add a newsletter signup above the footer”
Install — Claude Code
From the official marketplace:
/plugin marketplace add ByteBunny-io/nanocart-skill
/plugin install nanocart@nanocart-skill
Or manually: download cdn.nanocart.io/ai/nanocart-skill.zip and copy the skills/nanocart/ folder into your project’s .claude/skills/ (or ~/.claude/skills/ to enable it everywhere). Then ask for what you want, or invoke /nanocart directly.
Install — Codex, Cursor, and Other Agents
The download includes AGENTS.md — a condensed single-file version of the same knowledge. Copy it into your project root (or merge it into your existing AGENTS.md / rules file) and any agent that reads project instructions gains NanoCart expertise.
Keys & Safety
The package includes an .env.example. Two rules the skill enforces:
- Your Store ID is public — it goes in the widget script tag (
data-store-id). - Your API key (
sc_live_...) is secret — the agent uses it only for server-side Admin API calls from.env, never in website code.
AI-Readable Docs
Every AI tool (with or without the skill) can read these docs directly:
- docs.nanocart.io/llms.txt — index of all topics
- docs.nanocart.io/llms-full.txt — the full documentation corpus in one file
The MCP Server — Run Your Store From an Agent
nanocart-mcp gives your agent live tools (24 of them): list and update products with variants and images, manage orders and coupons, edit settings, and pull sales reports — by asking. Reads are marked read-only; destructive tools are flagged so well-behaved agents ask before acting. Refunds, billing, and API-key management are deliberately excluded (use your dashboard).
Local (recommended):
claude mcp add nanocart \
--env NANOCART_API_KEY=sc_live_... \
--env NANOCART_STORE_ID=your-store-id \
-- npx -y nanocart-mcp
Hosted (no install): point any Streamable-HTTP MCP client at
https://mcp.nanocart.io/mcp?store=your-store-id
Authorization: Bearer sc_live_...
Your API key is in Settings > API Keys; your store ID is in Settings > Store Information. The key grants full admin access — keep it out of website code and git.
Try: “List my draft products and publish the ones with images” · “Create a SUMMER20 coupon, 20% off, expires end of August” · “What did I sell last week?”