Guides → Build an ecommerce site on SGEN in 30 minutes

Build an ecommerce site on SGEN in 30 minutes

A 30-minute walkthrough for small-batch makers, handmade goods sellers, and specialty food brands â€" products, cart, checkout, orders, published.

This tutorial takes a small-business owner from a fresh SGEN account to a live store in about half an hour. The build covers seven visible surfaces: a homepage that reads like a brand entry rather than a generic shop, a product catalog with eight to twelve items, individual product pages with photos and option pickers, a working cart and checkout, an order-confirmation page, a basic order-management view for the owner, and a simple About page that earns trust. Every step lists the click path, the expected screen, and the time budget.

What you'll have at the end: a live store at a *.sgen.com preview URL (or your own domain, if you have one), seven surfaces published, an eight-to-twelve product catalog with real photos and real prices, a working cart and checkout wired to your payment processor in test mode, an order-confirmation email going to both customer and owner, an order-management view showing every order, basic inventory tracking on each product, and shipping plus tax rules configured for your region. The store is responsive, accessible, and ready to take its first paid order.

What is this for?

This page is for small-business owners selling a finite product line â€" apparel small-batch, handmade goods, specialty foods, candles, ceramics, prints, zines, sauces, jams, product beans. The thirty-minute target assumes you already know what you sell and roughly what it costs; the build is the publish step, not the catalog-design step.

The structure is opinionated. A small ecommerce store needs six things working together: a homepage that explains the brand to a first-time visitor, a catalog that surfaces products without overwhelming, product pages that show enough to earn a click on Add to Cart, a cart-and-checkout that does not lose the sale in the last minute, an order workflow that confirms to both sides, and inventory plus shipping rules that keep promises honest. The template covers all six out of the box.

This is a tutorial in the strict sense â€" you build the example, then keep it. Unlike the five-minute quickstart, the store you publish here is meant to take real orders. The sample data slots are placeholders for your actual products, prices, and copy; swap them inline as you go.

If you have shipped a store on Shopify, Squarespace Commerce, BigCommerce, or WooCommerce, the SGEN path will feel familiar in structure. The hosting and admin characteristics differ; the authoring flow is recognizable.

Good use cases

Reach for this tutorial when:

You are a small-batch apparel maker shipping a fixed seasonal collection and you want one place to sell, take orders, and track stock without a per-product app stack.
You are a handmade goods seller (ceramics, candles, prints, jewelry) with a catalog under fifty items and you want a clean store that does not look like every other template.
You are a specialty goods producer (ceramics, candles, handmade jewelry) selling direct-to-consumer with simple shipping and a small SKU count.
You are a maker offering paid pre-orders for a small production run, with a clear "ships in N weeks" expectation on each product page.
You are an author or musician selling signed physical copies of a book or vinyl alongside merch.
You are a service-business owner adding a small physical-goods line (workout app selling branded resistance bands; design studio selling a print run) to an existing site.

What NOT to use this for

This tutorial does not cover:

High-volume drop-shipping stores with hundreds of SKUs and live supplier inventory. SGEN handles the catalog shape but the supplier integration is out of scope for this thirty-minute build.
Marketplace-style multi-vendor stores where many sellers list their own products under one storefront. That is a different module set and a different tutorial.
Pure digital-product sales (ebooks, downloadable templates, audio packs). Use the digital-product variation in the membership tutorial â€" the gating and delivery flow there is the cleaner fit.
Subscription-box ecommerce with recurring shipments. That combines this tutorial with the membership tutorial and runs longer than thirty minutes.
Auction-style or bid-driven sales. Not supported in the core store module.

How this connects to other features

The ecommerce build touches six surfaces. Each is named here so you know where to come back when you extend the store later.

SG-Builder â€" the visual editor where the homepage, product pages, and About page get arranged. About half the thirty minutes is spent here.
SG-Modules â†' Store â€" the product catalog, inventory, shipping, tax, and order management. Pre-built product presets cover common shapes; you swap in real photos and real prices.
SG-Modules â†' Forms â€" the form module powering the contact form and the optional order-question form on each product page.
SG-Core â†' Media â€" the image library where product photos live. Drag-and-drop upload; the catalog auto-resizes for thumbnails, gallery, and zoom.
SG-Core â†' Orders â€" the order list with status filters (new, paid, shipped, refunded). Skip on first pass; revisit when you have your first order.
SG-Dashboard â†' Analytics â€" the conversion-rate-on-product-pages dashboard. Available once the store has visitors; not relevant during the build itself.

For the build steps alone, the only three surfaces you actively work in are SG-Builder, SG-Modules â†' Store, and SG-Core â†' Media. The others are flagged so you know they exist when you need them.

See also the SGEN quickstart for the foundational five-minute account-creation flow, and the membership tutorial, artist tutorial, and restaurant tutorial for adjacent vertical builds.

Before you start

You need five things gathered before you begin. Each is a one-time collection; once you have them in a folder or a doc, the build is mechanical.

An SGEN account with at least the Launch tier active. The free trial covers the thirty-minute build; real payment processing connects once you upgrade.
A connected payment processor. Stripe is the default; the test-mode toggle lets you build and verify with test cards before opening real billing. Connect it under SG-Dashboard â†' Billing â†' Payment Processor before step 4.
Eight to twelve products with photos and prices. For each: product name, one-line description, price, photo (one minimum, three preferred), available options if any (size, flavor, color), and starting inventory count. Write these in a notes doc or a spreadsheet before the build session.
Shipping basics. The flat-rate or weight-based shipping cost you want to charge for your region, plus any free-shipping threshold. If you ship internationally, the rate for the next-most-common country.
Tax basics. Your local sales-tax rate if you are required to collect it. SGEN supports automatic tax calculation through the integrated tax module for most regions; the manual override is available for edge cases.

You do not need:

A logo. A typeset wordmark in your brand name is a strong default for a small store and the template includes one.
A separate merchant account from Stripe. The Stripe integration handles cards, Apple Pay, Google Pay, and most regional payment methods out of the box.
A custom domain on day one. The *.sgen.com preview URL is shareable and takes real orders from the moment step 7 finishes.

Where to find it

Every step in the build starts from one of these three URLs:

Step	URL	What lives here
1 (template)	`https://dashboard.sgen.com`	New-site flow, Ecommerce Starter pick
2-6 (build)	`https://.sgen.com/sg-admin`	Per-site editor, pages, store, media
7 (view)	`https://.sgen.com`	The live public store

Steps

Seven steps. The first six are the build. Step seven is the publish-and-view. Time budgets are per step; the total runs about thirty minutes for a first-time SGEN user with products and photos ready.

1. Pick the Ecommerce Starter template (â‰¤ 3 minutes)

From SG-Dashboard, click Create New Site. The starter grid shows six templates; pick Ecommerce Starter. The thumbnail shows a homepage with a brand-led hero, a featured-products strip, a category grid, and an About teaser â€" that is the shape you will publish.

Name the site with your store brand (for example, "Smallhill Ceramics" or "Field Notes Studio"). Accept the suggested preview subdomain or pick a shorter version. Click Create Site. SGEN provisions in about five seconds.

What you'll see at the end of step 1: SG-Admin loaded with the Ecommerce Starter pages already in place â€" Home, Shop (catalog), Product Page Template, Cart, Checkout, Order Confirmation, and About.

2. Load your eight-to-twelve product catalog (â‰¤ 8 minutes)

Click SG-Modules â†' Store â†' Products in the left sidebar. The product panel opens with three placeholder products to show the shape. Click Add Product at the top right.

The product form opens with fields for name, slug, short description, long description, price, compare-at price (optional, for crossed-out original price), photos (drag-and-drop), options (size, color, flavor â€" add only what you need), inventory count, weight (for shipping calculation), and tags (for category grouping).

Fill the form for your first product. The minimum to publish a product is name + price + one photo + inventory count; the rest is optional. The short description is what appears in the catalog grid; the long description is what appears on the product page. Aim for one or two clean sentences per field rather than a wall of copy.

Click Save Product. Repeat for the next seven to eleven products. The first product is the slow one â€" about a minute; subsequent products run thirty to forty seconds each as the form pattern becomes familiar.

Delete the three placeholder products from the top of the list using Bulk Actions â†' Delete Selected. Your real catalog now stands alone.

What you'll see at the end of step 2: the Products panel showing your eight to twelve real products with real photos, real prices, and accurate inventory counts. The three placeholders are gone. The catalog grid on the public Shop page will populate from this list automatically.

3. Customize the homepage and featured-products strip (â‰¤ 5 minutes)

Click Pages â†' Home in the left sidebar. The Home page loads in SG-Builder with the four-block ecommerce shape: brand-led hero, featured-products strip, category grid, and About teaser.

Click the hero headline and replace the placeholder with your one-line brand statement (for example, "Small-batch ceramics, roasted on Sunday, shipped on Monday."). Click the sub-headline and replace it with your one-sentence elaboration. Click the primary CTA button and confirm it points to /shop â€" the catalog page.

In the featured-products strip, the right rail shows a Featured Products picker. Pick four of your real products to feature on the homepage. The featured strip pulls photos, names, and prices automatically from the product records you set up in step 2.

In the category grid, replace the three placeholder category cards with your real categories. For a small catalog, common groupings are by product type (apparel / accessories / home), by collection (Spring 2026 / Holiday 2025), or by use case (everyday / gift / specialty). Each category card links to a filtered Shop view.

In the About teaser, write two to three sentences that explain who makes the products and where. This is the trust-building block; specifics earn more clicks than generic words ("Roasted by Maya in a small space in Brooklyn since 2022" beats "Premium quality product").

What you'll see at the end of step 3: the Home page reading like a finished brand entry â€" your real headline, your real featured products, your real categories, your real About teaser, and zero placeholder text remaining.

4. Configure shipping, tax, and the checkout (â‰¤ 5 minutes)

Click SG-Modules â†' Store â†' Shipping. The shipping panel opens with one default zone (your country) at a placeholder flat rate.

Edit the default zone. Set the flat rate to match your real shipping cost. Add a free-shipping threshold if you have one (commonly fifty or seventy-five). Save the zone. If you ship internationally, click Add Zone, pick the next-most-common country (or region), and set the rate for that zone. Save.

Click SG-Modules â†' Store â†' Tax. The tax panel opens with automatic tax calculation enabled for your region by default. Confirm the rate looks right for your area. If your jurisdiction requires manual override (some craft and food sellers have specific exemptions), toggle Manual Tax Rate and enter the percentage.

Click SG-Modules â†' Store â†' Checkout. The checkout panel shows the checkout fields in order: contact email, shipping address, shipping method, payment, optional order notes. Confirm each section is enabled. The defaults match what most small stores need; the customization most often added is the optional order-notes field at the bottom (commonly used for gift messages or dietary preferences in food stores).

Click SG-Modules â†' Store â†' Order Emails. The order-emails panel shows two emails: the customer order confirmation and the owner order notification. Open the customer email and confirm the sender name reads in your brand voice rather than the generic default. Open the owner email and confirm the recipient is the email on your account.

What you'll see at the end of step 4: the Shipping panel showing your real rates, the Tax panel showing the correct percentage for your region, the Checkout fields confirmed in order, and the order emails pointing to the right inboxes with the right sender name.

5. Verify a product page renders correctly (â‰¤ 4 minutes)

Click Pages â†' Product Page Template. The product page template loads in SG-Builder with the product-page shape: photo gallery on the left, product name and price on the right, short description, options picker (size, color, flavor), Add to Cart button, long description below, and a "You may also like" four-item strip at the bottom.

The template is a layout shell â€" it does not get edited per product. The per-product content (name, price, photos, options, descriptions) flows in automatically from the product records in step 2. What you edit here is the layout shell once, for every product.

Confirm the photo gallery shows the Multi-photo with thumbnails layout in the right rail (versus single-photo or carousel). Confirm the options picker shows Size dropdown + Color swatches if you have those option types in your catalog; otherwise the picker hides automatically per product.

Click Preview Product at the top right of SG-Builder. A modal asks which product to preview with. Pick your first real product from step 2. The preview opens with the real photos, real name, real price, real options, and real descriptions in the template shell. Click Add to Cart in the preview to verify the cart works.

If the photo gallery layout looks wrong (photos too small, thumbnails missing, zoom broken), adjust in the right rail. The most common adjustment is Gallery Aspect Ratio â€" set to Square for product shots, 4:3 for lifestyle photos, Tall for apparel on a model.

What you'll see at the end of step 5: the Product Page Template confirmed with the right gallery layout, the right options picker, and a working Add to Cart confirmed by preview against one real product.

6. Write the About page (â‰¤ 3 minutes)

Click Pages â†' About. The About page loads in SG-Builder with three blocks: a portrait or workspace photo, a three-paragraph story, and a small "What we make" repeater linking back to the catalog.

Replace the placeholder photo with a real photo of you, your workspace, or your product in progress. Real photography (even from a phone) beats stock â€" the story block exists to earn trust, and specific imagery earns more trust than polished generics.

Write the story in three short paragraphs. First paragraph: who you are and what you make in one sentence. Second paragraph: why you started â€" the specific reason, not a general "passion for quality" line. Third paragraph: what makes this batch or this season different. Keep it short; the About page that converts is the one that respects the reader's time.

In the "What we make" repeater, pick three to five products that best represent the catalog. Each card links to the product page. The repeater pulls photos and names automatically from the product records.

Click Save at the top of SG-Builder. The About page autosaves every two seconds; the manual save commits to the publish queue.

What you'll see at the end of step 6: the About page reading in your voice with your real photo, your real story, and your real product picks, ready to publish.

7. Publish and test the order flow (â‰¤ 2 minutes)

Return to Pages. The page list shows every page in the site with a status column reading Draft for each. Click Publish All at the top right. SGEN publishes the pages in sequence; the status column flips to Published in green within about five seconds per page.

Click View Site in the top right of SG-Admin. The live store opens in a new browser tab. Click through Home â†' Shop â†' one product page â†' Add to Cart â†' Cart â†' Checkout. Stop before completing payment; the test-mode banner at the top of the checkout confirms you are in test mode.

Open the site in an incognito window. Add one product to cart. Complete checkout with a Stripe test card (4242 4242 4242 4242, any future expiry, any CVC). The order-confirmation page should appear within two seconds. Check your email â€" both the customer-confirmation and the owner-notification emails should arrive within thirty seconds.

In SG-Admin, click SG-Core â†' Orders. The test order from your incognito session should appear at the top of the list with status Paid (test mode). Click into the order to see the full detail view â€" customer info, items, shipping address, payment status. This is the view you will use to fulfill real orders once you switch to live mode.

To switch billing to live mode, go to SG-Modules â†' Store â†' Payment and click Switch to Live Mode. A confirmation modal verifies Stripe is connected with a real account.

What you'll see at the end of step 7: a live store at your *.sgen.com preview URL, seven published surfaces, a working checkout verified end-to-end with a test order, the test order visible in the order-management view, and the path to live-mode billing clearly marked.

What success looks like

You finish the build with seven concrete artifacts:

A live store at https://.sgen.com, publicly accessible
Eight to twelve real products with real photos, real prices, and accurate inventory
A homepage that reads like a brand entry rather than a generic shop template
A working cart-and-checkout in test mode, verified end-to-end with a Stripe test card
An order-confirmation email going to both customer and owner inboxes
An order-management view showing every order with status filters
An About page that earns trust with real photography and a specific story

If you can add one product to cart in an incognito window, complete checkout with a test card, see the order in the order-management view, and receive both confirmation emails â€" and have that whole loop complete in under three minutes â€" the build worked. That is the verification.

Variations

Six adaptations of the base build, each suited to a specific small-store shape.

Pre-order or made-to-order workflow. In step 2, for products that ship after a production batch rather than from stock, set the Inventory Mode to Pre-order and add a "Ships in N weeks" line to the product page. Customers can pay now; the order shows in the order-management view with a Pre-order badge so you do not ship before the batch is ready.

Local pickup as an alternative to shipping. In step 4, add a Local Pickup shipping zone with a zero rate and a pickup-location address. The checkout shows pickup as a shipping method; customers picking up skip the shipping address field and instead pick a pickup time slot. Common for food sellers near a single market or studio.

Wholesale tier with negotiated pricing. Enable Wholesale Mode under SG-Modules â†' Store â†' Settings. Wholesale customers register with a separate account type and see wholesale prices (configured per-product). The retail catalog and retail prices remain visible to public visitors; the wholesale view is private behind login. Use this when a portion of your orders comes from small shops or restaurants reselling.

Bundles and gift sets. In step 2, create a bundle product that includes three to five existing products at a combined price. The bundle is itself a product with its own photo, page, and inventory; the included items decrement individually from their own stock when a bundle sells. Common for holiday gift sets in food stores.

Drop-style limited release. Use the Release Date field on a product to schedule when it becomes available. Before the release time the product page shows a countdown and a notify-me signup; at release time it switches to a normal product page with the Add to Cart button live. Common for small-batch apparel and limited-run prints.

Recipe or use-care page tied to each product. Specialty food sellers benefit from a recipe or pairing page linked from the product page. Create a separate Recipes or Care content type and link relevant entries from each product page's right rail. The recipe page is content marketing that lives on the same site as the store; the integration is automatic once the link is set.

Common pitfalls

Four things go wrong most often during an ecommerce build. Each has a one-step fix.

The product page shows the wrong photo aspect ratio after step 5. This means the gallery layout default does not match your photo set. Open the Product Page Template in SG-Builder, check the right rail under Gallery Aspect Ratio, set it to Square for product shots, 4:3 for lifestyle, or Tall for apparel. The change applies to every product page at once.

The order-confirmation email did not arrive in step 7. This means the owner-notification recipient is wrong or the customer email was caught by spam. Confirm the recipient in SG-Modules â†' Store â†' Order Emails matches the email on your account. Check the spam folder for the customer copy. If consistently going to spam, configure the sender domain SPF and DKIM records under SG-Dashboard â†' Settings â†' Email â€" the panel walks you through the two DNS lines.

Shipping calculation shows zero on the checkout. This means the product weight is blank in the product record and the shipping zone uses weight-based pricing. Open each product, set a real weight in the Weight field, save. The checkout recalculates within five seconds. Alternatively, switch the shipping zone to flat-rate pricing, which does not need product weights.

Inventory count went negative after a test order. This means real inventory tracking is enabled but a test order decremented stock. Open the affected product and add the test quantity back in the Inventory Count field. Future tests can be run with Test Orders Do Not Affect Inventory toggled on under SG-Modules â†' Store â†' Settings.

Examples

Three real-shape ecommerce builds, one per primary use case.

Example A â€" Apparel small-batch (Smallhill Workwear)

Naomi runs a one-person workwear brand with a seasonal collection of ten items â€" work shirts, aprons, canvas bags. She picks the Ecommerce Starter, loads ten products with real studio photos and three size options each (S/M/L), sets free shipping over seventy-five dollars within her country, configures the order-question field for "Hem length preference?" on trouser orders, ships in twenty-eight minutes. First order arrives within forty-eight hours of her launch newsletter.

Example B â€" Handmade ceramics (Field Studio Clay)

David is a potter selling mugs, bowls, and small vases. He picks the Ecommerce Starter, loads twelve products with three photos each (overhead, side, in-use), sets each piece as a one-of-one with inventory count of one and the Inventory Mode set to Pre-order for items still on the wheel, configures a flat-rate shipping calculation that accounts for fragile packaging, ships in thirty-two minutes. The one-of-one badge on each product becomes the differentiator on the catalog page.

Example C â€" Specialty food (Northcoast Sauce Co.)

Maya sells three hot sauces and two small-batch jams. She picks the Ecommerce Starter, loads five products with photos of the bottles and the ingredients side-by-side, builds a bundle product called the "Sample Five" that includes one of each at a combined price, configures local pickup at her weekly farmers-market location plus shipping for everyone else, links a recipe page from each sauce product, ships in twenty-nine minutes. The bundle product becomes the top-converting item in week one.

Why the thirty-minute target works

The thirty-minute target is honest, not marketing. Internal timing runs on an ecommerce build with prepared product photos and prices consistently land between twenty-six and thirty-five minutes for a first-time SGEN user and between twenty and twenty-five minutes for an operator who has shipped one store already. The variance lives in three steps.

Step 2 (product catalog load) varies the most when product photos are not prepared. The build assumes you have photos for each product â€" at least one minimum, three preferred. If you take photos during the build, plan a separate session. Photography under build-session time pressure produces worse photos.

Step 3 (homepage customization) varies when brand voice is not settled. The build assumes you know your one-line brand statement and your one-line elaboration. If you write copy during the build, plan a separate session. Copy under build-session time pressure produces worse copy.

Step 4 (shipping and tax) is the most-skipped step on first builds. Skipping it does not break the store, but defaults rarely match your actual costs. The free-shipping threshold in particular is a margin question worth thirty seconds of math before the build.

If any single step runs longer than its target by more than fifty percent, stop and check: you are usually solving a different problem than the build (taking photos, writing copy, deciding pricing). Pause the build, finish the off-build task, and return.

After the build â€" second and third passes

The thirty-minute build is the publish step. Second and third passes are where the store sharpens.

Second pass (recommended: same week, 30-60 minutes):

Write longer product descriptions on the top three sellers. Short descriptions converted the first order; longer ones convert the second.
Set up the abandoned-cart email under SG-Modules â†' Store â†' Email Automation. The default copy is functional; rewrite it in your voice for higher recovery.
Add a small FAQ section under About â€" questions about shipping time, returns, and how products are made are the three most-asked.
Photograph one product in use (in a kitchen, on a person, in a workspace) and add it to the product gallery. Lifestyle shots increase add-to-cart rate.

Third pass (recommended: when you have your first twenty orders, 30-60 minutes):

Point your custom domain at the site. SG-Admin â†' Settings â†' Domains. Add the domain, copy the two DNS records, paste them at your registrar.
Review the order-management view for fulfillment patterns. The top two questions customers ask in order notes are the two FAQs to add to the product page.
Set up the post-purchase email under SG-Modules â†' Store â†' Email Automation. A two-paragraph note thanking the buyer and asking for a photo with the product builds a small library of social proof.
Configure low-stock alerts under SG-Modules â†' Store â†' Inventory. Email yourself when any product drops below five in stock.

What to do if it does not work

The test purchase fails at checkout. Confirm your payment processor (Stripe) is connected and in test mode under SG-Dashboard → Payment Settings. Use Stripe test card numbers — a real card in a test environment will not work.
Products do not appear on the public catalog page. Check that each product's status is Published (not Draft). Also confirm the catalog page is Published and any product-type filter on the page matches the products you added.
Order confirmation emails are not sending. SMTP must be configured under Site Settings → Email for transactional email (confirmations, receipts, shipping notifications) to fire.
A customer reports they cannot add an item to cart. Open the product record and confirm stock management is enabled and the current stock level is greater than zero. Zero-stock products display as out-of-stock on the public site.
The checkout page shows an error on the payment step. Confirm your Stripe keys (both public and secret) are correctly pasted under SG-Dashboard → Payment Settings. A single miscopied character causes all payment attempts to fail.

What's next â€" pick your second read

The store is shipped. Pick one of three second reads depending on what comes next:

You want to add a paid newsletter or membership tier alongside the store. Read the membership tutorial for the subscription and gating flow.
You want to add a small physical retail location with hours and a map. Read the restaurant tutorial for the hours, location, and reservation pattern (the same pattern works for retail shops).
You want richer store analytics â€" top sellers by month, conversion rate, average order value. Read the Store module reference for the analytics surfaces and the order export endpoints.

Guides

Reference

Changelog

Roadmap