架購物車網站做網拍賺錢,不用再當上班族多好, 外面一個購物車系統至少7、8萬, 那不如自己免費做一個Wordpress購物車網站? 但如何架設購物網站賣東西?以現年2023年購物網站建置的難度,在目前Wordpress+woocommerce金流串接的支援下, 基本的購物網站架設,是難度低、速度快、價格費用也低,極適合個人玩票性質。
但若是創業開公司、企業的電商網站,還是建議找專業的網站架設公司建置購物網站。因為網站的精緻美醜,還是只有專業設計師的美感才有辦法設計。那自己架設購物網站呢?請跟我這樣做, 基本購物網站架設包含以下步驟。

購物網站架設步驟

  1. 買網址+DNS設定+HTTPS加密
  2. 買網站主機+安裝Wordpress
  3. Wordpress網頁設計與安裝佈景主題
  4. 購物車外掛-WooCommerce
  5. 線上刷卡-以藍新金流為例
  6. Google網站登錄
所以透過本文 Wordpress購物車網站架設大解析。跟你分享購物網站設計教學從買網址、主機到Wordpress網頁設計、串接購物車模組, 即可建置一個可線上刷卡的電商購物網站。Let's Go!

架設購物網站的10種平台或工具介紹

找網路商店架設,市面上有很多的選擇,這種網路商店架設的模組工具,早就一大堆,差異在於功能完整性、價錢高低、需求如何,今天就讓貴設計為您介紹幾個,再選擇適合自己的網路商店架設工具吧

  1. Shopify: Shopify 提供了簡單易用的介面和完整的電子商務功能,支援繁體中文,並提供繁體中文客戶支援。它也可以整合台灣各大物流公司,讓您更輕鬆地處理訂單和配送。
  2. WooCommerce: WooCommerce 是 WordPress 的一個購物車插件,易於安裝和使用,支援繁體中文。它可以與許多台灣的付款閘道和物流公司整合,讓您更輕鬆地處理訂單和配送。
  3. Magento: Magento 是一個開源的電子商務平台,支援繁體中文,並可以整合台灣各大物流公司和付款閘道。它還提供了完整的電子商務功能,可以滿足不同的需求。
  4. ECShop: ECShop 是一個開源的電子商務平台,支援繁體中文,並提供了完整的電子商務功能。它可以整合台灣各大物流公司和付款閘道,並支援多種支付方式。
  5. PChome商店街: PChome商店街是台灣知名的購物平台之一,提供簡單易用的介面和完整的電子商務功能。它可以讓您快速建立一個線上商店,並在平台上販售您的產品。
  6. Shopee: Shopee 是一個知名的購物平台,提供了簡單易用的介面和完整的電子商務功能。它可以讓您快速建立一個線上商店,並在平台上販售您的產品。
  7. PChome 24h購物: PChome 24h購物是台灣知名的購物平台之一,提供了簡單易用的介面和完整的電子商務功能。它可以讓您快速建立一個線上商店,並在平台上販售您的產品。
  8. Momo購物網: Momo購物網是一個知名的購物平台,提供了簡單易用的介面和完整的電子商務功能。它可以讓您快速建立一個線上商店,並在平台上販售您的產品。
  9. Buy123: Buy123 是一個台灣本地的購物平台,提供了完整的電子商務功能和多種支付方式。它可以讓您快速建立一個線上商店,並在平台上販售您的產品。
  10. PChome Global購物中心: PChome Global購物中心是 PChome 的國際購物平台,支援多種語言和貨幣,可以擴大您的銷售市場。它提供了完整的電子商務功能,並可以整合多種物流和付款閘道,讓您更輕鬆地處理訂單和配送。
  11. 91APP: 91APP 是一個全方位的電子商務平台,提供了完整的電子商務解決方案,包括網站建立、賣場管理、行銷工具、客戶關係管理和物流整合等。它支援多種付款方式和物流公司,並可以整合各大社交媒體平台,讓您更輕鬆地拓展銷售渠道。
  12. Easystore: Easystore 是一個建立和管理網上商店的平台,提供了簡單易用的介面和完整的電子商務功能。它提供多種付款方式和物流整合選擇,並可以整合各大社交媒體平台,讓您更輕鬆地拓展銷售渠道。

以上屬於購物型網站套裝軟體,如wordpress、91APP、Easystore。 購物型網站平台就像是momo、pchome、蝦皮都算,這類型的與其說是網站,倒是比較像是銷售頁,但這類型的網站的好處就是momo、pchome會帶流量。
本文章則是以Wordpress架設購物網站為主軸。

Step1: 買網址+DNS設定+HTTPS加密

貴設計都在Godaddy買網址,優點如下。

  1. 網站介面簡單乾淨:相對中華電信很OLD FASHION的介面,Godaddy你定會覺的非常好用。
  2. 購買程序簡單快速:中華電信買個網址需要輸入多個欄位,Godaddy直接刷卡帶走。
  3. 網址買錯退費好人性:上次買錯一個網址,當下找客服處理,10分後就馬上退費。
  4. 線上售後服務好:中華電信的客服電話告訴你,非常難找,一直在電話中。
  5. DNS生效好快速:DNS,(用過中華電信你就知道慢)
  6. 多樣化網址選擇好方便:直接參考下圖吧。.com是台灣最愛的,但隨著網址也跟著進步,不用再死守.com的網址囉。

    Godaddy買網址

那如何購買網址?請參考上圖,只要在搜尋框輸入你喜歡的網址名稱,再點下右側放大鏡,就會自動跳出一堆不同結尾的網址。 如何選擇網址呢?

  1. 美國網址、國際性、網址大氣的請選擇your-domain.com。但網址會被google歸類為美國網址,會不利於台灣的SEO排名。
  2. 台灣本土、台灣品牌的可選擇 your-domain.com.tw,但需注意網址有無商標問題。例如你的網址your-domain,是不是有被別的企業註冊商標。
  3. your-domain.cc or your-domain.shop就看個人所好
  4. 千萬不要中文網址,中文網址是弊大於利。
點下右側放大鏡後,上方紅框的部份,你看到的費用部份只有首年,在價錢的下面有一排灰色字"適用於第一年",你下次購買網址使用權就會恢復成原價。 創業第一年失敗的機率極高,可以先買第一年,若企業經營穩定可以一次購買多年。
購買網址需註冊Godaddy(需綁定信用卡),購買網址後去"帳戶 ==> 我的產品",就會看見剛購買的網址。 若網址買錯可以5天內申請退款(參考Godaddy退款策略)。
godaddy

DNS設定(如下圖) ,何謂DNS設定呢? 簡單講,你買了一個網址,你要將網址指去某個主機的IP。

DNS設定

進入畫面之後,你會看見類似如下的畫面,尋找一個叫做類型為A,再將值輸入你的主機IP即可(我知道還沒有租主機,所以沒有IP,後續會說明),這個動作稱之為DNS設定

DNS設定

HTTPS加密,貴設計為了能夠使用免費HTTPS的服務,我們會選擇將DNS交給Cloudflare代管 ,因為Cloudflare有免費的https服務,這樣子我們就不用額外一年花個好幾千買https。 如何將Godaddy的DNS交給Cloudflare代管呢?方式如下

  1. 註冊Cloudflare:https://www.cloudflare.com/zh-tw/,並新增網站將網址填入 註冊Cloudflare
  2. 完成後,你就會看見你的網址,接著點擊進去(貴設計是網頁設計公司就有很多網址要設定)Cloudflare
  3. 將畫面拉到下方Cloudflare名稱伺服器(在Cloudflare的網站),接著將紅色部份回填到Godaddy名稱伺服器(在Godaddy的網站)即可。 Cloudflare名稱伺服器
  4. 再回到Cloudflare DNS設定,將IP填入以下紅色區塊就大功能告成。 Cloudflare DNS設定
影片解說: 延伸閱讀 【網站架設流程 】:買網址、租主機、準備素材、網站設計、Google收錄

Step2:買網站主機+安裝Wordpress

買網站主機 ,貴設計推薦SiteGround,SiteGround成立於2004年主機商公司,擁有400多名員工。SiteGround提供虛擬主機、雲託管主機、網域等等。 SiteGround運作時間保證是99.99%,所以他們的伺服器不會有當機或連不上的問題。(但很遺憾,Sitegound於2022年已不再出售給台灣)

為何選擇SiteGround?

  1. 免費SSL加密憑證
  2. 每天自動備份,自動備份前30天資料
  3. 免費 CDN
  4. 24/7客服服務,線上即時聊天,回覆速度快
  5. SG介面乾淨,好上手
  6. 主機穩定性優
  7. Wordpress一鍵安裝,5分鐘搞定
  8. Wordpress自動更新
  9. Wordpress免費輕鬆搬家,SG提供免費外掛

如何在SiteGround建立Wordpress?

  1. 註冊登入後,到Home 就會看到 Set Up Site,點進去。
    Siteground建立Wordpress
  2. 選擇Start a New Website。 ps.如果你現有Wordpress網站才選擇Migrate Website。
    Siteground建立Wordpress
  3. 選擇Wordpress。 ps.如有需要WooCommerce可以點選Wordpress+WooCommerce。
    Siteground建立Wordpress
  4. 設定登入資訊,之後登入都以這帳密登入。
    Siteground建立Wordpress
  5. SiteGround有提供加購網站掃毒的工具,看需不需要加購,不需要直接按Finish,Wordpress網站就完成了!
    Siteground建立Wordpress
  6. 直接登入網站。
    Siteground建立Wordpress

在完成Siteground主機之後,將Siteground取得的IP至Cloudflare DNS設定即可(如下)。
Cloudflare DNS設定

Step3:Wordpress佈景安裝與內頁設計

安裝好Wordrpess後,請輸入 https://購買的網址/wp-admin。再輸入帳密即可登入。 Wordpress登入畫面
登入之後,就會看見如下的後台。就代表你已經成功至少50%了。 Wordpress後台

接著要安裝 WordPress佈景主題, Wordpress佈景主題佔了8成的比例決定網站的精美程度,其中又首重網站的首頁要精美、漂亮又吸睛。 所以你說WordPress佈景主題是不是非常重要。而使用WP佈景主題有以下的四個優點

  • 📌 使用網站模板,網站架設費用現省10萬
  • 📌 官方網站精緻又漂亮
  • 📌 千種、萬種佈景主題任君挑選
  • 📌 不用擔心跨瀏覽器、RWD設計問題
幾個步驟:

  1. 外觀->佈景主題
  2. 選擇想要的佈景主題:
    • 如已購買佈景主題:請先下載主題後,至安裝佈景主題進行安裝。
    • 也可以使用Wordpress提供免費版型,付費版請至Themeforest購買。
  3. 選好後只需要在下方按「啟用」,即可蓋掉現有的佈景主題。
  4. 佈景主題就安裝好了!

在佈景主題安裝完成後,貴設計推薦您使用 Elementor編輯器去設計你的網頁,貴設計用過許多網頁編輯器後 ,深覺的Elementor的好用,所見即所得的模式,讓你在修改、新增頁面能夠馬上見到效果。
再加上提供許多好用的元件,直接拖拉並修改文字及設計,就能做到網頁的設計。以下的影片為您示範如何透過Elementor修改網頁及新增區塊。

Wordpress的內頁設計,非常的考驗網站架設者的美感與經驗。有架站經驗、有美感,在這關便能設計出精緻美觀的網站,就如同請專業室內裝潢設計師設計房間一樣,當然你也可以去IKEA自行買買湊湊。但容易變成下圖倒是,所以中小企業仍是建議請專業的來設計。 專業設計師 更多Wordpress網頁設計文章,請參考
  1. 【Wordpress是什麼?】Wordpress形像網站有什麼優勢?
  2. 【Wordpress網站前後台】教學
  3. 【Wordpress版型推薦】佈景主題下載秘技
  4. 【WordPress 媒體庫】教學
  5. 【Wordpress 選單教學 (Menu)】教學
  6. 【Wordpress頁面新增、刪除、修改 】教學
  7. 【Wordpress文章新增、刪除、修改、列表、分類】教學
  8. 【Wordpress外掛】教學及推薦
  9. 【All in one Migration 】Wordpress網站備份外掛
  10. Wordpress網頁設計教學
到這個步驟結束之後,其實你已經完成了一個 Wordpress形象網站。剩的就是安裝購物車模組-WooCommerce。

Step4:購物車外掛-WooCommerce

你想網路銷售嗎? 選擇Wordpress建置購物網站最推崇的購物車模組 WooComerce就對了,市面有一些其他的電商開源架構 (如Opencart),都不如WooComerce值得被推薦。最大的好處莫過於WooComerce 在Wordpress的廣泛應用,使得任何疑難雜症、功能開始相較於其他套件都容易google到方案。而無需再花上萬元,找外包工程師開發。所以想要建置購物網站, WooCommerce是一個正確的選擇。WooCommerce
WooCommerce購物車模組的功能涵蓋了以下幾個重要功能

  1. 商品管理:對商品圖文影介紹、商品上下架、定價、折扣、庫存管理、運送方式....。
    WooCommerce商品管理
    WooCommerce商品管理
  2. 訂單管理:訂單清單、訂單資訊、訂單狀態調整 WooCommerce訂單管理
  3. 銷售報表:依年、月、過去七日統計銷售總額、曲線報表 WooCommerce銷售報表
  4. 折價券:折價券類型、折扣種類、金額、描述、到期日、使用限制等。 WooCommerce折價券
    其他還有顧客管理、分析各式資料。上述功能對於一個需要電商購物網站的客戶是已經非常足夠的,而部份的網站會特別安裝一些組合優惠的外掛。 這也只需要網站搜尋Wordpress外掛即可。EX:Advanced Dynamic Pricing for WooCommerce、WPC Product Bundles for WooCommerce、YITH WooCommerce Product Add-Ons。

    如何安裝WooCommerce,請參考以下影片。安裝完成後在你的左選單會看見WooCommerce的項目,就代表安裝成功了,接著就要開始串金流囉!

Step5:線上刷卡-以藍新金流串接為例

申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的藍新金流手續費(100元收2.8元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 此外請先準備銀行帳號及個人or企業的基本資訊(身份證、統編、地址),申請時均需要輸入。
藍新金流個人會員可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 點擊註冊個人會員
企業會員則可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 註冊企業會員
了解更多藍新金流可參考企業會員常見問題。 接著回到主題,要能夠申請線上刷卡會分為三個步驟

  1. 註冊藍新金流:註冊後需輸入銀行帳號(需要等1~2個星期驗證銀行帳號),提款時錢才能夠轉進你的戶頭內,另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。
  2. 安裝藍新金流Wordpress外掛:記得先下載WooCommerce線上刷卡外掛。下載後解壓縮,內有一個zip檔,再使用手動上傳外掛即可安裝(可參考以下影片)。
  3. 設定藍新金流外掛:請務必設定三個值
    1)藍新金流商店 Merchant ID(即商店代號)
    2)藍新金流商店 Hash Key 。
    3)藍新金流商店 Hash IV
    如何設定請參考影片。 設定完成請把啟動測試模組取消,接著在商品新增一個1元的商品,再拿自已的信用卡刷卡試用即可。若刷卡有誤請檢查剛設定的3個值。若仍是不行請洽藍新金流的客服部門。他們回話速度還滿快的。

Step6:Google網站登錄

Google無法搜尋到你的網站嗎?甚至連品牌字關鍵字在搜尋結果也沒有看見!OMG到底要如何讓Google搜尋到我的網頁呢? 【網站登錄】就好比新生兒出生報戶口的動作,同樣你的新網站也要跟Google報戶口。
時代的演進,全球主要的搜尋行為高達93%都在Google搜尋引擎上發生(參考下圖), 所以網站架設完成後,請務必至Google搜尋引擎登錄網站。不然花了5、6萬打造一個蚊子館實為浪費,。 請參考 網站架設完成後,Google卻搜尋不到? 3種【網站登錄】的方式?最快只要1秒鐘!

購物網站架設費用

架設購物網站的費用與Wordpress形象網頁設計 差異最大的部份在於購物車網站的功能,例如商品上下架管理、訂單管理、銷售報表、折價券之類的。 但上一章節有提到這些功能已包括在WooCommerce的外掛內,無需額外付費。但需額外費用會在於"WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤、WooCommerce基本教學、藍新金流申請溝通與協調"

購物網站架設費用
項目費用說明
Wordpress網頁設計49,800
  1. 首年免主機費 (價值5,000元)
  2. 精美付費版型 (價值1,500元)
  3. 1首頁+5內頁半客製化設計
  4. RWD 響應式網站設計
  5. Wordpress完整前後台
  6. Wordpress預錄影片教學1.5小時
  7. SEO搜尋行銷線上課
  8. 網站免費推廣
    請參考完整Wordpress網頁設計方案
WooCommerce外掛與設定18,000如WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤
藍新金流5,000透過線上信用卡支付減少使用者付費障礙、加快支付流程。藍新金流是目前最推薦的線上支付方式。透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。 此外還提供超商店到店寄/取件,涵蓋全台5,000+ 便利商店,免簽約、免設定費、立即啟用。
線上刷卡(超商取貨)費用2.8%手續費申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的手續費(ATM轉帳1%、超商代碼繳費28元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 貴設計的客戶只需最低只要2.4%線上刷卡手續費,快點找貴設計做購物車吧!)
所以貴設計電商網站製作價格為76,800(首年總費用、隔年主機費6,000起),就可以擁有一個RWD的電商購物網站。快點與貴設計聯絡吧。

Wordpress購物網站範例

請參考以下貴設計的Wordpress購物網站範例 專一茶鋪拜了吧JBW

wordpress購物車版型

Wordpress購物車版型可至Themeforest購買,Themeforest共提供了3,152種Wordpress的版型,單價從600~3,000NT都有。 挑選版型建議注意購買人數、最後更新日期、評論、Wordpress版本及可相容的瀏覽器。在試用Live Preview時請務必看一下手機版的排版。 wordpress購物車版型

自己架設購物網站

自架購物網站的確能省不少錢,但貴設計會老實的跟您講,我們是來勸退的,至少5個理由如下

  1. 電商網站價錢都不便宜。以貴設計舉例,購物車網站76,800元,比這個價錢貴的相信比比皆是,尤其許多網站架設公司是不寫價錢的。 那即然都不便宜,代表有一定的技術在,自己架設購物網站成功的機率低。
  2. 電商網站主機費也高,從網站架設公司的角度來看, 因為電商產品多,佔用的記憶體容量大,主機年費自然也高。所以對於主機的挑選又是一門學問了。 要高容量、高運算能力、主機位置在哪、共享主機、虛擬主機?相信頭痛開始痛了吧!
  3. 精實創業很重要,應以小成本的方式測試市場,了解市場,進入電商領域、學習domain knowledge。自己架設購物網站,就算專家也要7日的時間,何況自己學習從無到有架設購物網站。
  4. 滿額免運、滿額折扣、滿額贈品、滿額積點換紅利一堆活動,月月都要做新Banner,光Banner設計就好燒錢,何況還有一堆別的。 自己架設購物網站這些錢相信你也省不了。
  5. 電商網站流量那裡來?沒有流量誰來買單。商業市場,濫東西有行銷也有人買單,好產品沒有行銷也沒搞頭。所以你有過想行銷怎麼做嗎?
但也不是叫你不要做電商,電商其實貴設計也想做,何況我們懂架網站、又懂行銷。只是我們會建議你低成本進入電商市場、測試市場,這才是正確的創業方式。 而不是一開始就大把花錢架設網站做電商,而後續還有一堆的主機費、網址費..要付。

電商經營較建議的方式會以品牌官網+小型電商平台如(WACA、EasyStore、露天拍賣、蝦皮),理由如下
  1. 低成本測試市場、了解市場比購物網站架設還來的重要。
  2. 學習電商是如何運作,及可以怎麼操作。如剛提的"滿額免運、滿額折扣、滿額贈品"
  3. 小型電商因為功能較少、費用較低、甚至不綁約、月費制,相較於大型電商一年動輒上萬,買一堆功能不會使用,殺雞焉用牛刀。
  4. 網站有流量、有營收、穩定客群,再討論架購物網站。
貴設計算過以小型電商+品牌網站的組合方式,3年只需8萬有找的預算,若架設購物網站則需12、13萬,大概節省5~6萬。 若這種組合方式逐漸拓展知名度累積了穩定客群後,可以再擴充購物車的功能進入網站,這就是最完美的解決方案了。 但要這樣子做,請先確定二件事情。
  1. 請選擇Wordpress網頁設計,將來才可以用疊加的方式將購物車功能擴充至品牌官網。
  2. 網站版型請選擇有購物車的模版,將來品牌網站擴充後,網站才會比較美觀。

若你沒有流量的煩惱、也沒有預算有限的問題,歡迎您馬上諮詢貴設計購物車網站76,800元的服務。若您即不會操作流量、預算又有限,也歡迎您向透過畫面上的Line向我們諮詢 形象網站架設 49,800的方案。

免費購物網站架設

購物網站一個都不少錢,不管你是走任何的平台、方案。要嘛是網站架設費用高、不然就是成交抽成高15~25%、再不然就是年費高,總之不會是便宜的。但貴設計的新平台熱搜情報網,跟你講做電商真的。很。便。宜。 以下是在熱搜情報網刊登的商家及產品。

  1. 商家:專一茶鋪
  2. 商品:笠間焼 | 古谷萌仁香 古典蕾絲飯碗美濃燒|ROKURO富士山茶碗五月人型 | 日本兒童節和紙鯉魚掛飾
熱搜情報網的方案可以讓一個帳號開設許多不同的商家(不限商家數)及多種的商品,而付款連結請直接置入支付平台的付款連結,信用卡線上刷卡大約為2.8%。 熱搜情報網年約費用只要2400元。
熱搜情報網VIP商家熱搜情報網商家註冊