![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/ad-affiliate-1.jpg)
你還在找 架設購物網站 的建置教學嗎? 網路 開店平台 這麼多,又該怎麼挑選呢?
找網站公司建置一個 購物車網站,基本報價就要10萬起跳,對於剛開始創業的個人或是中小企業來說都是一筆不小的開銷,如果一開始就能節省一些費用,也可以增加創業成功的機會,還可以把省下來的費用拿去做行銷,是不是比較划算
這篇教學要教你如何自己 購物網站架設,不用被工程師或網站公司綁架,快速建立自己的網路商店,網路發達時代,在網路開店已經不是一項困難的事情,只要你會基本電腦操作,都可以透過 WordPress、WooCommerce 組合開始販售你的商品
如果想完整學習 WooCommerce 架設到經營的話,歡迎查看 電商小教室 專欄
本篇文章大綱
架設購物網站教學影片
架設購物網站費用及工具解析
一個完整的購物網站是由 網址、主機 及 購物網站 這三樣組合而成,缺少任何一個項目都會導致網站無法運作,所以只要搞定這三項就可以在網路上開始販售你的商品、課程、服務囉~
為了方便之後的教學可以同步進行,也可以先購買 Cloudways主機 及 WordPress佈景主題(Astra),就不需要操作到一半還要再跳出去購買
搞不清楚這三個是什麼?讓大新哥來稍微介紹一下這些是什麼東西,只要瞭解之後,就會發現架設一個購物網站已經愈來愈簡單了
網域名稱
網域名稱(Domain Name) 又稱為 「網址」,可以想像成我們的住家地址, 使用者需要輸入你的地址才能進到你的網站,也是常見的 sample.com 或 sameple.com.tw 這類型,如果沒有網域名稱的解譯,網址通常會是使用主機 IP來做連結,會像是 「192.168.66.12 」這樣的數字方式呈現,是不是非常不容易記憶,所以後來才統一修改為由 英文 + 頂級網域的方式來命名,像是 sample.com
有意義的英文名稱畢竟還是比數字好記,對吧
<div class=”ml-embedded” data-form=”bkvLE4″>
網站主機
主機又可以分為 實體主機 及 虛擬主機 兩種,概念像是網站的土地,可以在這塊土地上建立任何網站
實體主機就像是你所使用的桌上型電腦,只是專門放置網站的電腦稱之為「伺服器」,硬體等級更高,因為維護一個實體主機費用比較高,最低至少也要幾十到幾百萬起跳,對於一般使用者來說無法負擔,所以就延伸出 虛擬主機 的服務出來
而虛擬主機就是從實體主機中切出來的數千、數萬個空間,有點像是二房東的概念,大家共用同一個空間,也一起分擔主機費用,所以價格比較能接受,通常每年價格會落在1000-4000左右,相較實體主機之下是不是便宜很多,也是多數人選擇的架站方式
WordPress網站
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Wordpress.com 網站平台](/wp-content/uploads/wordpress-com-platform.jpg)
重頭戲來了,網站就像是建立在土地上的住家或店面,網站的規模大小會隨著你選擇的主機等級而定,空間愈大,速度愈快,你可以架設的網站規模就愈高,可以承載的人數也可以愈多,功能也能愈複雜
既然我們要在網路創業,想要在網路開店販售商品,要建立一個購物車網站,一定要考慮到成本,那究竟自架網站費用的成本會是多少呢?
從上面三個組合來說,我們需要網址+主機+購物網站 這三個東西
網址費用 每年大約是 NT$300元左右,使用 NameCheap網域服務商申請最便宜
主機費用 依照主機等級而有所不同,大約是台幣 NT$$1000 到 NT$$10,000的等級都有,方案分別如下,提供給你依照需求做選擇
最便宜主機方案:
每年大約是NT$1000元左右,適用於剛起步創業的朋友想試市場水溫,希望初期費用可以便宜一點,那可以使用A2 Hosting 來建置,主機還有針對WordPress做優化,非常的快速
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/sidebar-a2hosting.jpg)
速度快主機方案:
每年大約是NT$4000元,適用於對網站速度品質有要求,或者網站已經經營一段時間,想要做主機升級的朋友,可以使用 Cloudways 來架設,也是本篇教學使用的主機
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) cloudways主機](/wp-content/uploads/logo_cloudways.jpg)
延伸閱讀:
5個步驟教你使用 Cloudways 快速架設 WordPress網站
極速主機方案:
每年大約是 NT$9000元左右,適用於大流量網站,或是網站規模、功能已經增加,而網站已經開始出現慢的狀況時,就建議升級主機等級,才能讓網站的速度正常運作,未來還可以依需求隨著升級,可以使用 Kinsta主機來架設,非常適合用來做長期經營,速度夠快,SEO排名才會高,流量高,才能成交更多訂單
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Kinsta主機](/wp-content/uploads/tool-kinsta.jpg)
網站主機推薦及選購
這裡以 Cloudways主機 來做為範例 ,因為主機速度快且穩定,加上費用不貴(1個月330元左右),按月付款,隨時可以停止,對於剛要架設購物網站 的新手站長比較合適,未來還能隨著購物網站架構逐漸升級,長期經營也沒有問題
使用Cloudways的優點是主機是獨立的資源,完全享有流量掌控權,網站速度比較穩定,有自己獨立主機資源使用,不需要跟其他網站共用資源,所以不會有忽快忽慢的問題,也算是虛擬主機的進階版本
還有下方其他的優點
- 24/7 即時英文客服支援
- 3 天時間免費試用,不滿意隨時換家
- 7天網站 自動備份功能
- 網站備份一鍵還原功能
- VPS 主機,主機規格清楚又明瞭
- 基本方案價格大約為 $10 USD/月,相當於台幣 $ 280/月,超便宜又划算
- 以小時為單位做收費,不需綁年約,隨時可升級或停止
- 官方提供搬家外掛,讓網站搬家更容易
延伸閱讀:
Cloudways評價 -高效能的VPS主機優缺點完整分析,讓你的WordPress網站更飛快
A2 Hosting申請主機網址及安裝教學
還記得上面說到的三大架站重點嗎? A2 Hosting主機就能解決前面2個,每月主機費用不到90元,還有100GB超大儲存空間,及官方的Email信箱可以使用,是不是超划算
那要怎麼做呢?讓我們繼續看下去
申請A2 Hosting 流程
要申請A2主機流程也非常簡單,照著步驟流程操作就可以了,註冊的時間大約是5分鐘左右
step 1
首先,進入到 A2 Hosting首頁之後,點選主選單中的 「Hosting」,接著再點擊 「Web Hosting」,進入到主機的購買頁面
不選擇「WordPress Hosting」的原因是因為他的價格比較貴,選擇Web Hosting主機價格便宜之外,不論你要架設部落格、形象網站、購物網站等等,一樣都可以用這個方案建立
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply01.jpg)
step 2
接下來會看到A2主機的價格方案,總共有4個方案價格可以選擇,分別是 Startup方案、Drive方案、Turbo Boost方案 及 Turbo Max方案
你可以針對網站需求及預算來選擇對應的價格方案,基本就有100GB超大儲存空間,比起 Bluehost足足大了一倍
另外,通常一次買多年的價格也會比較便宜,續約時價格會再更多一些
Startup方案:提供1個網站、5個資料庫、100GB儲存空間,免費網站搬家(適合剛開始經營的網站)
Drive方案:提供無限個網站、無限個資料庫、無限儲存空間,免費網站搬家、免費自動備份(如果要架設多個網站的話就選這一個)
Turbo Boost方案:提供無限個網站、無限個資料庫、無限儲存空間,免費網站搬家、免費自動備份、網站加速到20倍(想要網站快一點就選這個)
Startup方案:跟 Turbo Boost 方案差不多,記憶體等級比較高,所以速度會再快一點
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply02.jpg)
step 3
接下來就要開始設定網址囉~
Use my domain:是使用現有網址註冊,然後再另外設定DNS連結到主機 (例如 Namecheap)
Transfer your domain to A2 Hosting …. 這是把現有網址轉到A2主機一起做管理
Register a new domain:註冊一個新的網址,如果你是第一次使用的話,可以幫你網站想個名稱,建議使用好用的英文組合,然後選 .com 就可以了
Use a temporary domain from a2 hosting :如果你暫時都還不想把主機跟網址綁在一起的話,可以選擇這個選項
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply03.jpg)
step 4
如果輸入的網址沒有人註冊過的話,那就會顯示綠色的恭喜字樣,表示這組網址可以使用
下方 suggested domain的地方會顯示網址名稱加上頂級域名不同的組合,也可以一起挑選
沒問題的話就按下「Continue」繼續下一步
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply04.jpg)
step 5
再來是選擇主機方案的細節,以及選擇你要購買主機的時間長度
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply05.jpg)
step 6
在 Upgrade Your Hosting區塊中可以看到SSL加購的內容,在這裡我們都不選擇加購
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply06.jpg)
step 7
接下來這個步驟很重要,要選擇主機的位置,主機位置近網站速度才會快
如果你的目標客戶是在台灣的話,選擇 Singapore(Asia / Iindia) 最合適
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply07.jpg)
step 8
在這個步驟會在你的主機上安裝 WordPress,讓你可以進入網站後台管理,選擇 WordPress -A2 Optimized,安裝WordPress網站及A2加速
再來黃色區塊會顯示你的網站登入資訊,這個很重要,記得要先另外存檔
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply08.jpg)
step 9
帳密都存好之後,確認一下金額對不對,就可以按下「Continue」繼續下一步
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply09.jpg)
step 10
再來會列出網址附加的服務內容,勾選 DNS Management 及 Email Forwardng ,是免費的,想瞭解內容的話也可以看一下說明,沒問題的話點選「 Continue」繼續下一步
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply10.jpg)
step 11
因為購買了主機及網址,確認一下方案的內容及網址金額是否正確,也可以選擇網址要購買的時間,建議跟主機的時間一樣比較好管理,例如主機買3年,網址就買3年
注意:如果有透過 本站連結購買的話,在這個步驟應該會有優惠卷折扣,記得確認一下唷
沒問題的話點選「Checkout」按鈕進行結帳
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply11.jpg)
step 12
結帳要輸入的欄位比較多,都需要輸入英文,地址的話可以到 中華郵政-中文地址英譯 輸入中文地址翻譯
其他欄位就依續填寫就可以了,在國家的地方記得選擇「Taiwan」唷
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply12.jpg)
step 13
這裡要設定你要登入 A2 Hosting主機的密碼及忘記密碼的安全提示,未來如果忘記密碼的話,只要輸入提示密碼就可以找回
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply13.jpg)
step 14
最後,就要開始付款囉~
A2主機提供多種的金流付款方式,常見的有信用卡跟 Paypal,選擇一個你要付款的金流後,再輸入欄位內容,再勾選隱私權同意,就可以進行下一步
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/a2hosting-apply14.jpg)
延伸閱讀
需要更完整的操作教學,可以查看這篇【A2 Hosting評價】主機方案、評價及WordPress 安裝教學,每月只要台幣83元超便宜
WordPress是什麼?
如果你還沒聽過或使用過 WordPress 這個架站軟體的話,這裡簡單的介紹一下
目前全世界超過有42%以上的網站都是使用 WordPress 建立,在所有的 CMS 系統中,WordPress網站就佔了約60%,例如 美國白宮 、微軟官方部落格等等,都是使用 WordPress建置,連國內許多中小企業的網站也有很多使用WordPress建立,主要是因為主題及外掛資源多,網站製作的彈性也大,非常容易上手,只要稍微學習一下就可以輕易上手
WordPress又有分為2種,分別是 .com 及 .org ,先搞清楚差別
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Wordpress.com 網站平台](/wp-content/uploads/wordpress-com-platform.jpg)
WordPress.com 像是一個網站平台經營的方式,也就是付費給平台就可以立即使用,費用每個月大約是 240元到 1500左右,優點是架站速度快,只要付費申請帳號就能使用
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WordPress.org官方網站](/wp-content/uploads/wordpress_org_.jpg)
WordPress.org 像是樂高積木的方式,由 網址、主機、網址都要自己組合而成,優點是可以依照自身網站需求做不同組合,比如架站要便宜,就選擇A2Hosting主機,想要網站更快速,就選Cloudways來搭配,想要網站可以秒開的話,就選擇 Kinsata
自架站的優點是可以控制預算,費用也比平台的便宜很多,缺點是需要自己搭配組合
延伸閱讀:
WordPress 是什麼?5分鐘快速帶你瞭解 WordPress 的好用之處
為什麼推薦 WooCommerce來架站?
因為 WooCommerce 易於初學者使用,設定也很簡單,並且有非常強大的功能,想完整瞭解的話可以參考這篇 WooCommerce教學
大新哥歸類出以下七項重點:
- 操作介面非常簡單。只要會操作電腦,不需要有任何程式基礎都可以建立自己的購物車網站。
- 有非常多的佈景主題開發商,讓你可以不寫程式就可以設計出一流電子商務(購物車)樣式。
- 有非常多可擴充的外掛程式,不需要編寫任何程式,就可以增加想要電子商務網站功能。
- 支援RWD,可以在電腦、平板、手機等任何的裝置上瀏覽,就算使用手機購買商品也很輕鬆下單。
- 是免費的外掛,使用的核心系統 WordPress也是免費的。
- WooCommerce是開源的外掛程式,每個人都可以修改或客製程式,針對你的網站需求來做調整。
- 除了是開源外掛之外,WooCommerce 來自於 Automatic 公司(WordPress.com)開發,因為系統不斷的在更新及修復Bug問題,所以安全性是足夠的。
你可以使用WooCommerce 來賣什麼商品?
WooCommerce 可以讓你販賣要透過網站來轉單的任何東西!
除了實體商品之外,例如常見的男裝、女裝服飾、 家具購物網站、食品類、生活用品等等之外
還可以使用WooCommerce 來販售各式各樣的數位商品,例如電子書、線上教學課程、預約服務、網路訂房等等
神奇吧,從實體商品到虛擬服務,販售的領域不限制,什麼都賣,什麼都不奇怪~
基本上,只要任何你想在網路上販賣的東西,使用 WordPres + WooCommerce 就可以快速達成!而且費用還超級低
延伸閱讀:
完整的架設與經營心法可參考 WooCommerce 電商小教室
WordPress購物網站設定
要架設購物網站推薦使用 Thrive 主題,這是對於新手最友善且最容易設定的佈景主題,除了常見的頁面設計功能外,還結合多種行銷工具模組,讓你做一個會賺錢的網站
剛安裝好的網站非常的陽春簡單,所以我們需要加工一下,幫網站套用 佈景主題模板(剛買的Astra),然後安裝外掛功能,才能打造出我們的想要的購物網站風格及電商功能,才可以在網路上販售東西並且收款,讓我們繼續看下去
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WordPress部落格預設首頁](/wp-content/uploads/wordpress-blog-index.jpg)
安裝佈景主題及設定
Astra主題是一個非常輕量的模板,程式簡潔乾淨,所以不會拖累網站速度,要做形象網站、電商購物網站、課程網站等,甚至客製化網站都可以,如果還沒購買Astra主題的話,可以先點選下方按鈕購買
如果你想要兼具美美視覺及行銷轉換效果的話,可以改為使用 Thrive Themes 這一個主題,只要一鍵安裝,就幫你把行銷功能模組整合好,還可以做到AB測試、名單磁鐵、線上課程、測驗等功能
有興趣的話可以到這篇文章查看
【網路創業必備】自動化銷售漏斗、架站、Email名單、AB測試、測驗、線上課程,一個工具通通搞定,輕鬆幫你網站帶來高收入轉換 Thrive Theme
step 1
登入WordPress官網後台,輸入帳號及密碼
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WordPress主機推薦-Cloudways主機的 WordPress](/wp-content/uploads/cloudways-hosting08.jpg)
step 2
進到網站之後,點選左方選單的「外觀」 ,再點選「佈景主題」,安裝Astra主題
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) wordpress外觀→佈景主題](/wp-content/uploads/wordpress-blog-index2.jpg)
step 3
然後點選「安裝佈景主題」
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) wordpress安裝部落格主題](/wp-content/uploads/wordpress-blog-index3.jpg)
step 4
在搜尋欄位中 搜尋 Astra 關鍵字,點選 「安裝」,然後再點選「上傳佈景主題」,把剛購買的 Astra檔案也一起上傳,如果還沒購買的話,可以點選下面按鈕前往購買
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/astra_them01.jpg)
step 5
Astra主題都上傳完之後,就會看到下方的訊息,匯入網站版型需要使用 Starter Templates 才能匯入官方模板,所以按下橘色按鈕 Get Startered之後,就會開始進行網站安裝引導流程
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/astra_them02.jpg)
step 6
再來會詢問使用的頁面編輯器,我們點選已經有百萬下載量的「Elementor」頁面編輯器
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/astra_them03.jpg)
step 7
這裡會列出所有的版型,Premium是付費版才有的版型,如果你剛有購買 Astra Pro的話,全部的版型模都都可以使用
接著要將上方的下拉選單切換成 eCommerce 篩選 購物網站的模版清單,然後再選擇一個跟你購物網站主題風格或是網站排版比較接近,網站安裝完都可以再做修改
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Astra購物網站版型](/wp-content/uploads/astra-woocommerce-theme.jpg)
再來會出現所選擇版型會安裝的頁面,可以點選 Preview Site 預覽網站實際操作看看
都確認沒問題之後,點選「Import Complete Site」匯入全部的範例資料
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Astra購物網站版型](/wp-content/uploads/astra-woocommerce-theme-sample.jpg)
step 8
接下來就會進到匯入版型資料的流程,會匯入網站設定、網站樣式、小工具、必裝外掛、網站內容,這裡點選「Import」開始匯入
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/astra_them07.jpg)
step 9
匯入完成!
成功就會看到像是下方的內容,點選「View Site」就可以到網站前台查看匯入的網站是不是跟選擇的版型一樣,是不是非常的快速就完成一個購物網站
想瞭解Astra主題完整介紹,可以看這篇 Astra主題教學
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 這張圖片的 alt 屬性值為空,它的檔案名稱為 astra_them08.jpg](/wp-content/uploads/astra_them08.jpg)
修改 網站設計 樣式
網站安裝好之後,我們需要進行一些網站設定的才能完全符合自己的網站風格及內容
因為WordPress的設定項目比較細,而且每個網站設定的地方不太一樣,所以接下來會針對幾個主要功能做介紹
修改 網站外觀及主色系
先點選左方選單的 外觀 => 自訂,進入網站全站的全站設定,這裡可以設定網站的顏色、文字大小、文字粗細、顏色及頁首頁尾樣式,也就是整個網站的主色系風格
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Astra主題自訂樣式](/wp-content/uploads/Astra-theme-custom.jpg)
接下來左方會看到設定項的選單,Astra 的設定項目非常的簡潔明瞭,把每個網站設定項目都分的很乾淨,設定的地方很容易就可以找的到
在這裡可以將網站的主色系及排版樣式都設定好,就可以打造獨一無二的網站形象
再來針對這幾個網站功能做說明
Global (全站設定):
主要設定全站標題及內容文字的字型、大小、粗細及行高
Header Builder(頁首設定):
設定最上方選單的那一塊內容,包含 LOGO、選單,Astra有提供內建工具可以做排版設定
Breadcrumb(麵包屑設定):
用來設定麵包屑(導覽路徑) 的位置
Blog(部落格設定):
設定部落格分類 及 單篇文章的排版樣式
Sidebar(側邊欄設定):
設定全站頁面、文章及文章分類是否要顯示側邊欄
Footer Builder(頁尾設定):
網頁最下方頁尾的樣式設定,有提供排版工具可以做編排
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Astra主題自訂樣式2](/wp-content/uploads/Astra-theme-custom2.jpg)
設定 頁面排版
如果要修改網頁內容的話,可以點選「頁面」,再點選右方的頁面標題,有寫著「靜態首頁」的地方就是目前網站的首頁
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/Astra-page-editor.jpg)
從標題點進來之後,因為頁面是使用 Elementor 編輯器,要修改網頁的話我們點選「使用Elementor」進入網頁編輯
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/Astra-page-editor2.jpg)
再來就會看到網頁的Elementor 編輯畫面,左方是網站工具,右邊是目前的網頁內容,修改的時候也會同步顯示,很清楚就可以知道網站的修改狀況
修改完成後再按下儲存就可以囉
因為 Astra是使用 免費版的 Elmentor,所以部份工具無法使用,建議可以加購 Elementor Pro外掛,開通全部功能,還可以製作 WooCommerce 購物網站的內容
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Astra 購物網站前台編輯](/wp-content/uploads/shop-sample.jpg)
設定網站選單
管理選單可以從 外觀 => 選單,進入修改
當所有的頁面、文章都設定好之後,最後要記得把他新增到「選單」內,訪客才可以從選單中連結到頁面觀看
只要從左方勾選要新增的頁面或文章,再點選「新增至選單」按鈕就可以,到這裡就已經完成整個 購物網站的架設
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 網站選單管理](/wp-content/uploads/shopweb-menu.jpg)
商品新增及管理
WooCommerce新增商品的方式也很簡單,輸入「商品標題」、「商品說明」,設定「商品價格」及「簡短說明」這4個欄位之後,輕鬆就可以完成商品的新增
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce新增商品01](/wp-content/uploads/woocommerce-plugin12.jpg)
如果沒有特殊的商品需求,只要輸入商品價格就好,如果需要比較特殊商品價格變化,例如顯示商品尺寸、顏色屬性之類,那就需要瞭解一下「商品資料類型」的部份
商品資料類型分為以下四種,可以設定的商品也有些不一樣,想完整瞭解的話可以點擊標題查看完整的說明介紹
- 簡單商品 – 最基本的商品,填寫內容發佈就可以簡單做販售
- 組合商品 – 用來做為商品的組合販售,例如手機及耳機的組合價
- 外部/加盟商品 – 連結外部商品的方式來販售,最常被用來做為聯盟行銷使用
- 可變商品 – 商品有不同規格(例如衣服尺寸、顏色等等)的話就可以用這個來達成,最常被用來做有不同商品規格的電商網站
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce新增商品02](/wp-content/uploads/woocommerce-plugin13.jpg)
到這個步驟,基本上已經完成一個基本購物車的架構,自己架站的好處,除了可以以自身需求來管理 「商品資料」及「會員資料」以外,未來都可以自由營運,不需受到平台商的限制,也能累積自己的網站流量及SEO排名,增添更多彈性
新增完的商品會長什麼樣式呢?讓我們到網站前台看一下
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce商品範例](/wp-content/uploads/woo-products.jpg)
商店網站設定
設定完 商品資料之後,我們要來設定WooCommerce商店的其他設定
因為WooCommerce本身是國外開發的程式,所以在流程上比較不符合台灣使用,所以我們要設定一下,才不會讓客戶覺得怪怪的
商店基本設定
step 1
首先從WooCommerce → 設定的地方,依序輸入地址、城市、國家及郵遞區號 這些欄位資訊
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/woocommerce-plugin07.jpg)
step 2
為了符合台灣的銷售方式,在設定的這個頁面需要修改「貨幣選項」,才不會讓購買的客戶覺得怪怪的
「設定」→「一般」: 要修改最下方的「貨幣選項」, 貨幣為 NT$,小數位數設定為 0
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce貨幣設定](/wp-content/uploads/woocommerce-plugin08.jpg)
因為這套電商系統是國外團隊開發,要符合國內使用,需要先做好網站設定,才不會上線之後有無法收款或是奇怪的地方發生,可以參考大新哥這篇完整的 WooCommerce電商網站完整基本設定
金流設定
WooCommerce安裝好之後,預設會有四種的付款方式,分別是 銀行轉帳、支票付款、貨到付款、PayPal,可以依照需求選擇開啟金流的服務
信用卡的部份,目前台灣第三方支付的國內信用卡金流平台常用的有3家,分別是
這三家金流廠商都有提供外掛可以做安裝設定,可以先到官方平台申請及開啟信用卡服務
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce金流設定](/wp-content/uploads/woocommerce-plugin09.jpg)
商店物流設定
商店運送方式主要分為 單一費率、免費運送、自行取貨 這三種
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce物流設定](/wp-content/uploads/Woocommerce-shipping.jpg)
單一費率:
讓你可以設定固定收取運送費用,例如固定收取 65元,可以依照你合作的物流公司設定金額
免費運送:
設定物流為免運費,最常見的範例是滿千免運費,可以搭配優惠卷或最低金額來使用,設定不同的免運條件式,例如有效的免運費折扣碼、最小訂購金額、每筆訂單的最小金額或折扣碼等等
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) WooCommerce免運費條件式](/wp-content/uploads/woo-free-shipping.jpg)
如果有安裝金流公司(如綠界 及 藍新的話) ,在這邊可能會增加超商取貨的選項可以挑選
自行取貨
允許客戶自行挑選訂單,使用當地取貨時,無論客戶地址為何,都會套用基本稅金
架設WooCommerce 常用推薦外掛
要加強購物網站的功能,也有非常多的外掛可以使用,在這裡站長分享常用的外掛資源,讓你可以更快速的依照需求選擇使用
YITH WooCommerce
更多電商會用到的相關功能外掛市集,如分享折扣、點數機制、願望清單、會員等級、禮物卡、定時發送優惠卷、自訂結帳頁面、商品動態價格等功能(推薦必買) ,在這個網站都可以找的到,堪稱電商網站大補包,比WooCommerce原官方賣的更便宜
網站Logo設計
Canva – 萬用型設計工具
有了購物網站之後,你還會需要一個萬用的設計工具,例如要設計一個LOGO、部落格文章封面、Facebook封面圖、Instagram封面圖、Landing Page,甚至還有做影片動畫等等
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Canva - Logo設計畫面](/wp-content/uploads/canva-logo.jpg)
這時候就需要一個萬用工具來幫你完成這些項目,必推使用 Canva 來做為你的設計小秘書,上面的功能都有了,還有內建多種樣式的範本可以使用,資源超級豐富,超過1億個付費版圖庫照片、影片、音訊及圖像,還可以設定排程上傳到 8種社交媒體平台,是一款必買的設計工具,才能幫你省時又省力
Pro方案的話最多可以5個人共用,每年費用為 US$119.99元,大約是台幣3,360元,每個月大約是台幣280元
Designevo – 高質感的Logo設計
有支持中文字體超級棒!!
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) Designevo平台設計LOGO畫面](/wp-content/uploads/designevo-logo-edit.jpg)
如果 Canva 工具的設計樣式沒有你想要的風格,也可以試試 Designevo 這一個Logo設計工具,平台介面是中文,超過 10000+ 以上的Logo樣式,只要簡單的三個步驟,就可以設計有質感的Logo
如果想要Logo原檔的話,可以付費購買,只要約台幣1300元左右,就可以擁有高達5000像素的PNG圖檔 及 矢量圖文件 (PDF, SVG) ,還有字型檔案,未來還可以再作編輯
幫購物網站申請專屬網址及設定
操作到這個步驟,相信你的購物網站應該都完成囉~
因為目前網站使用的還是的 Cloudways 暫時性網址,所以我們要幫網站套上正式網址
進入到 NameCheap官網之後,先點選 「Domains」之後,再點選「Domain Name Search」來尋找想要的網址
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) NameCheap申請網址](/wp-content/uploads/namecheap02.jpg)
幫你的網址取一個名字
接著在中間的搜尋欄中輸入你想要申請的網址名稱,如果之前你已經先思考網址名稱,在這個步驟都可以輸入試試,看看比較喜歡哪一個網址
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) NameCheap申請網址](/wp-content/uploads/namecheap03.jpg)
接下來完整的申請教學請查看 5個步驟完整教你使用NameCheap購買超便宜的專屬網址
網路行銷推廣
到這個階段,已經完成 架設購物網站 的所有操作及設定,就可以開始販售商品及行銷囉~
那要怎麼行銷才會有效果呢?這裡推薦幾篇電商教學給你,讓你在經營購物網站時可以更有成效,相關文章都收錄在 電商小教室專欄
行銷方式主要會分為 SEO、Youtube影音導流、Email電子報行銷,這2個都是國內最大的流量來源
要做好SEO的話,除了要做好關鍵字研究之外,透過SEO工具的分析可以幫你的排名更有效果,可以使用 Jaaxy 這一個線上SEO工具,費用也不貴,是個值得的投資
國外行銷技術比較成熟,建議可以參考國外 WealthyAffiliate平台 的教學,從網站到SEO、電子報行銷多元化行銷都有完整的說明,甚至會教你如何將網站變現
付費方案每月49美元,方案內容有SEO工具、關鍵字研究每週直播課程,300 小時的專家教育、附屬訓練營培訓(70堂課)等等
另外,因為國外資訊通常是第一手,而且比較完整實用,乾貨非常多,工具也整合好,不需要自己摸索,省去非常多試錯時間,也是大新哥進修網路行銷知識的平台之一
除了文字可以做SEO引流之外,影片也是比較能吸引目光的方式,絕對不能錯過第二大搜尋流量來源 Youtube平台
如果剛開始自己經營一定會遇到很多挫折,建議透過YT剪輯及經營課程來建立 Youtube頻道,課程中還會分享如何經營YT,快速取得客戶注意力,使用影片推廣商品更能提高轉換率,課程中也會教你如何做好 Youtube SEO,吸引更多網站流量
其他經營電商相關文章分享
9個Email名單收集小技巧,MailerLite 電郵行銷工具教學
WordPress SEO 教學 – 12招教你寫出排名高的文章,取得Google第一排名
5個Landing Page銷售頁設計重點讓你得到更高轉換率
如何建立 一頁式網頁?教你使用 Elementor 快速建立專業網站及一頁式電商銷售頁
文章自動排程發佈到 FB、IG、Twitter 社群平台-部落客及個人品牌經營必備工具
網路開店平台有哪些
整理一些常見的電商平台,多管道的經營販賣商品,才能把商品更快銷售一空,轉換率效果更加倍增,可以先瞭解一下,再來思考怎麼打開通路推廣
Shopify
Shopify 是一個國外知名的電商平台,想要把東西賣到其他國家首選的跨境電商平台,於2006年創立,成立於加拿大,平台成立的原因是因為三位創辦人想經營滑雪設備,但覺得市面上的電商平台都不好用,其中一位剛好是工程師,所以就索性自己開發一個(是不是很任性XD)
Shopify平台操作也很簡單,對新手業者相當友善,還有提供90天的免費試用期,提供多元的付款方式,內建商品庫存管理、物流與價格設定、支付整合、銷售數據追蹤等功能,如果你要建立的購物網站需要外銷到國外的話,就很適合使用Shopify來做為電商網站
Easystore
Easystore 從東南亞開始發跡,2013年創立,平台語言為中文,因為平台的後台設定功能簡單方便又明瞭,一下子就可以上快速上手,不用摸索太久時間,超級好操作
提供14天的免費試用,只要套上平台模板再搭配內建的主題編輯器客製一下,就可以開始線上販售商品,還有提供多元管道販售功能,例如FB、IG、Wechat、Line、蝦皮購物、Google購物等等,非常的方便,多通路販售才能擴大商品的銷售率,還能幫助賣家拓展東南亞市場,重點交易免手續費很親民
其他常見國內電商平台
如果要線上建立課程的話,也可以使用 Teachable平台 來開課,有現成的線上課程的功能可以使用,例如課程管理、測驗功能等等
延伸閱讀:
還在使用Teachable做線上課程嗎?來試試最新的線上開課系統MA-Course
常見問與答
架設購物網站多少費用?
一個完整的購物網站是由 網址、主機 及 購物網站 這三樣組合而成,缺少任何一個項目都會導致網站無法運作,所以只要搞定這三項就可以在網路上開始販售你的商品、課程、服務,整體來說大約4500元左右就有了
架設購物車網站推薦什麼主機
主機的部份可以分為三種方案來使用
如果剛開始經營想要便宜的話,可以考慮使用 Bluehost主機,每個月不到80元
要速度好一點、空間大一點,可以使用 A2 Hosting主機,每個月約90元
想要最快的主機,未來可以升級的話,可以選擇Cloudways,每個月約330元
我想要註冊網址要在哪申請
如果要申請網址的話,可以使用 NameCheap 網域商來註冊,費用為便宜
支援的信用卡金流有哪些
一般常見的有 綠界科技、藍新科技、紅陽科技,都有提供第三方的金流API 串接,只要跟網站串在一起就可以使用,還有支援超商取貨的物流功能
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/ad-affiliate-1.jpg)
想更完成學習WordPress架站技術,歡迎加入全方位架站課程
如果這些文章對你有幫助的話,也歡迎請大新哥喝杯咖啡 <<我要前往請喝咖啡>>
想要最便宜的金流手續費優惠?
→【電商網站必備】藍新科技金流申請,享2.4%最低手續費(透過專屬表單)
更多網站教學影片都在Youtube頻道,歡迎按讚、訂閱、分享
若是有網頁設計的需求或是合作邀約,也可以透過「聯絡表單」或是「線上客服」的方式與我們聯絡
如果想要學習架設網站,或是架站遇到問題的話,也有提供 1對1線上教學 ,使用遠端電腦連線+語音的方式教學,讓你不需出門就能在家學習,歡迎設計師或工程師帶案合作
覺得網站太慢或常當機的話,歡迎參考 WordPress網站搬家服務
另外也有 網站顧問服務 及 網站健檢 服務,如果覺得網站速度太慢或是經營上的問題不知如何解決,歡迎預約時間幫你做網站健檢
推出「線上課程網站方案」,是獨立架設的網站,如果你想建立自己的線上課程網站,而不想跟課程平台分潤且受限平台規則的話,歡迎參考 MA-Course線上課程網站方案
想要經營個人品牌的話,可以先從 個人部落格 的話,不用怕平台演算法及倒閉問題,本站也有提供 部落格網站方案 ,大新哥也能提供一些網站的經營建議給你,歡迎來聊聊
想要在網路販售商品的話,我們也有提供 電商購物網站方案,費用便宜快速上線,降低剛開始微創業的經濟負擔,還能擁有網站管理自主權,不用受限於平台限制
如果對 WordPress架站、網站經營 及 網路行銷 有興趣的朋友,可以訂閱電子報或是按讚追蹤Facebook粉絲頁,我們將不定時發佈 WordPress網站 及 網頁設計、及個人品牌相關文章。
歡迎加入FB社團 「WordPres網站架設 / 網頁設計接案 / 部落格經營 / 網路行銷 /個人品牌」,主題是討論網站架設、部落格經營、網路行銷,有興趣的朋友也歡迎加入社團一同交流
網站經營需要費用,本站所提供的商品連結或廣告,透過連結購買的話,我可以獲得一點點微薄佣金,讓我們可以持續創作更好的內容,但這不會影響到你的使用權益,詳情可查看 FTC免責聲明
![架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學) 架設購物網站建置教學,想要網路開店省成本就看這篇,立即幫你省下10萬元(附加影片教學)](/wp-content/uploads/ad-affiliate-1.jpg)