如何建立線上商店：商品、購物車、結帳與庫存

要建立線上商店，你需要商品目錄、購物車、可透過 Stripe 等金流服務付款的結帳流程、記錄訂單並扣減庫存的方式，以及讓你出貨的後台介面。AI 應用程式建構工具可以根據你清楚的描述把這些全部組合起來。真正值得多花心思的，不是前台的外觀，而是和金錢有關的環節：什麼時候訂單才算已付款、庫存如何保留，以及稅金、運費和退款要怎麼處理。

自訂商店還是 Shopify？先決定這件事

動手之前，先誠實地想清楚這一點。

如果符合以下情況，通常選擇託管式電商平台（Shopify、Squarespace Commerce、WooCommerce 等）會更好：

• 你賣的是實體商品，需要運費計算、出貨標籤與退貨處理
• 你需要處理多個地區的稅金計算
• 每天需要由不懂技術的團隊新增商品、處理訂單
• 你希望有外掛商店可以選用，例如評價、電子郵件行銷、會員點數
• 你在多個通路銷售，需要一份統一的庫存數

Shopify 的方案是按月訂閱，預付年費有折扣，而信用卡交易還要另外支付手續費。實際價格因地區而異，請查看該平台在你所在國家的定價頁面。

如果符合以下情況，自訂商店通常更划算：

• 商品很特殊，例如可客製化的訂製商品、預約加商品、附授權的數位下載，或是依客戶設定價格的 B2B 報價
• 商店只是更大型應用程式的一部分（例如課程平台、會員網站或市集）
• 你的商品數量不多，希望完全掌控設計與結帳流程
• 你想擁有程式碼，避免被特定平台綁住

很多小型賣家其實用平台就很合適。如果你的需求很普通，那就是好事，直接走捷徑就好。

線上商店需要哪些東西

資料

請在每筆訂單明細上記下購買當下的價格。如果下個月你改了價格，舊訂單仍然必須顯示顧客當初付的金額。

頁面

• **前台：**首頁、分類或系列頁、商品頁、購物車、結帳跳轉頁、訂單完成頁。
• **後台：**商品與庫存、訂單（含狀態：已付款、已打包、已出貨、已退款）、顧客、簡單的銷售數字。
• **法律與政策：**運送、退貨、隱私權與服務條款。買家在購買前會先找這些頁面，而且許多地區的法規要求必須提供其中部分內容。

權限

讓買家不必註冊帳號就能購買。訪客結帳可以少一個步驟，帳號功能之後再加即可。只有管理員可以查看訂單、編輯商品。後台必須用真正的登入機制與伺服器端的權限檢查來保護。

結帳流程應該怎麼做

自訂商店最安全的做法是使用託管式結帳頁。以 Stripe 為例：

1. 買家按下結帳，你的伺服器從資料庫重新檢查價格與庫存，而不是相信瀏覽器傳來的數字，接著建立一個 Stripe Checkout 工作階段。
2. 買家在 Stripe 的頁面上付款，信用卡資料完全不會進到你的伺服器。
3. Stripe 會呼叫你應用程式的 webhook 端點，告訴你付款成功。只有到這一步，你才把訂單標記為已付款並扣減庫存。
4. 買家被導向你的完成頁，你再寄出確認 Email。

有兩個常見錯誤要避開：一是從成功頁的跳轉來建立「已付款」訂單（使用者可能直接關掉分頁，而且跳轉網址也可能被偽造）；二是在瀏覽器裡計算總金額。如果你沒有特別交代，AI 很容易在這兩點上出錯。

Stripe 的標準費率是每筆成功的信用卡交易收取一個百分比加一個固定金額，沒有開通費或月費（截至 2026 年 9 月）；實際費率取決於你所在的國家與卡別。請先在 Stripe 的測試模式下，用它提供的測試卡號把所有功能跑一遍。我們的為應用程式加上付款功能指南涵蓋了金鑰、測試模式與 webhook。

稅金、運費與庫存的決策

以下這些是 AI 無法替你做的商業決定：

• **稅金。**你是否必須收取營業稅或加值稅（VAT），以及稅率多少，取決於你與顧客所在的地點。Stripe 有提供相關產品（Stripe Tax），如果你的情況很單純，也可以直接設定固定稅率。如果不確定，請諮詢會計師。
• **運費。**先從幾種固定運費開始，例如國內、國際，以及滿額免運。即時運費查詢與列印託運標籤是 Shopify 這類平台能省下大量工作的地方。
• **庫存。**決定庫存是在結帳開始時就保留，還是等付款成功才扣。對小型商店來說，付款後扣庫存、結帳前再檢查一次，會比較單純；但這樣偶爾還是可能出現超賣最後一件商品的情況，所以要事先想好怎麼處理。如果需要超出商店本身的庫存追蹤，請參考如何建立庫存管理應用程式。

一個有效的第一則提示詞

幫 Loam & Clay 建立一個線上商店，這是一間小型陶藝工作室，販售馬克杯、碗和花瓶。前台：首頁顯示精選商品；商品頁提供分類篩選；商品頁有圖片輪播、顏色規格與庫存狀態；另有滑出式購物車。商品、規格、訂單與訂單明細都存進資料庫，並預先建立 10 件真實感的商品資料。後台（需登入）可以新增與編輯商品、上傳圖片、調整庫存，並查看訂單狀態：已付款／已打包／已出貨。結帳按鈕先用佔位符，我們之後再加 Stripe Checkout。設計溫暖、簡潔，優先考慮手機版。不要放假評價，也不要寫「全球免運」之類的說法。

一開始就用佔位的結帳按鈕是刻意的：先把商品目錄和後台做好，再把金流當成獨立的步驟，好好測試。

建置步驟

1. 商品目錄與商品頁，使用真實的商品名稱、價格與照片。
2. 購物車，重新整理頁面後內容仍然保留。
3. 後台：商品、規格、庫存、圖片上傳。用登入機制保護。
4. Stripe Checkout，先在測試模式下完成，並由伺服器重新檢查價格與庫存。
5. Webhook，用來把訂單標記為已付款並扣減庫存。用測試卡完整跑一次。
6. 訂單 Email，寄給顧客，也寄給你自己。
7. 政策與 SEO：運送與退貨頁面、商品標題與描述、分享用的圖片。請參考AI 建立網站的 SEO。
8. 正式上線：切換成正式的 Stripe 金鑰，自己下一筆小額真實訂單，然後再退款。

常見錯誤

• **相信瀏覽器傳來的價格。**一定要在伺服器重新計算。
• 在成功頁標記訂單已付款，而不是透過 webhook 處理。
• 直接覆蓋庫存數字，而不是記錄異動。這樣你就失去了庫存為什麼改變的歷史紀錄。
• 沒有運送與退貨頁面就上線。
• **商品圖片太大。**請先壓縮，並從檔案儲存空間提供，不要直接放在程式碼裡。
• 第一筆銷售之前就做願望清單、評價和點數功能。

營運成本

需要預估的項目包括：主機與資料庫、每筆交易的金流手續費、網域、寄送訂單確認信的 Email 服務，以及可能需要的稅務服務。自訂商店不必支付平台月費與外掛費用，但你要自己負責維護：結帳出問題時，修復工作就是你的。

如果你要的是多位賣家、各自分潤，那就是市集，付款規則也不同。請參考如何建立市集。

用 Mythex 建立

在 Mythex 上，你描述想要的商店，代理程式就會在即時預覽中建立商品目錄、購物車與後台，商品和訂單存在 Postgres 資料庫，商品圖片則存在檔案儲存空間。Mythex 文件中的商店使用案例正是建議上面這個順序：先做商品目錄，之後再做結帳。

付款使用你自己的 Stripe 帳號：把 Stripe 金鑰加到專案的秘密設定中，然後請代理程式加入 Checkout，接著用 Stripe 的測試卡在預覽中測試（Stripe 教學）。Webhook 需要公開的網址，所以要先發布，再把 Stripe 指向它（webhook 教學）。稅金、運費與庫存同步不是 Mythex 內建的功能，而且也沒有原生的 Shopify 整合。如果你需要的是現成完整的產品，Shopify 是比較好的選擇。想要起步的話，可以參考商店範本，例如電子商務商店。

常見問題