OpenCart 教學影片

馬姐魚鋪使用 OpenCart 很多年 (比我出來教 OpenCart 還早個幾年) 我跟她借了產品資料和廣告圖來錄製教學影片，直接蓋一個購物網站給你看，沒套版型主題，使用 OpenCart 預設的版型。

這支影片是 2017 年錄製的，新的教學影片請看 https://opencart.cc/new

因為我現在的教學影片都是全客製化錄影的，課後有操作問題，我都是直接用學生的 OpenCart 錄製教學影片，這樣就可以保證教學影片不再是 “有看沒法懂” 的垃圾。

也有學生笑說這根本是在耍任性，因為我教完也作完了。但我還是希望大家學起來，學起來就是自己的，就算自己部當老闆，幫老闆蓋個購物官網也很棒。

🎬 OpenCart 教學影片

影片共 26 分鐘，從安裝到產品上架，最後調整首頁，更換商標圖檔，連結臉書即時通，設定商品分類 … 總共 36 項，一刀未剪，一鏡到底，不敢說是最完整的教學影片，但已經能讓你快速進入狀況。影片網址 https://youtu.be/5WfNYIC_xvE

.

1. 安裝檔案上傳到虛擬主機
2. 打開網址進入安裝畫面
3. 新增資料庫
4. 安裝畫面設定資料庫帳號密碼
5. 設定資料庫權限
6. 設定商店帳號密碼
7. 刪除 install 安裝目錄
8. 將 OpenCart 改成中文
9. 電話號碼改成臉書即時通
10. 更換商標 Logo 圖檔
11. 移除不要的商品分類
12. 按照分類順序改成中文名稱
13. 首頁橫幅圖片更換/新增
14. 調整橫幅圖片尺寸
15. 商品圖片更換
16. cpanel 批次大量上傳商品圖檔
17. 調整商品圖片尺寸
18. 商品描述移除
19. 新增最新商品到首頁
20. 移除不要的商品
21. 移除 3C 品牌圖輪播
22. 新增 HTML 模組 (臉書粉絲團)
23. 新增 HTML 模組到首頁
24. 商店資訊改成中文
25. 頁面底部增加社群按鈕
26. 移除特色商品和最新商品的模組名稱
27. 改網站配色
28. 測試手機瀏覽
29. 購物車置頂
30. 新增手機底部按鈕
31. 測試結帳
32. 六個步驟結帳改成一頁式結帳
33. 新增超商取貨付款
34. 測試結帳選超商取貨付款
35. 訂單管理
36. 安裝臉書像素程式碼

安裝檔案上傳到虛擬主機

從 opencart.com 下載 zip 安裝檔案

打開 cpanel 的 file manager (檔案管理員)

zip 檔案上傳到 public_html 資料夾

然後解壓縮

打開網址進入安裝畫面

cpanel 主畫面右側有 primary domain

完整網址選起來，右鍵開到新分頁

就會看到 1/4 license agreement 安裝畫面

新增資料庫

cpanel > mysql database > create new

設定資料庫帳號密碼

root 改成資料庫使用者名稱

database 改成資料庫名稱

password 改成資料庫密碼

設定資料庫權限

cpanel > mysql > user privileges

all privileges 所有權限打勾

設定商店的帳號密碼

opencart 安裝畫面第三步驟最下面

username 是帳號

password 是密碼

移除安裝目錄

cpanel > file manager > public_html > install

刪除 install 資料夾

登入商店後台

你的網址後面加上 /admin 就是商店後台

畫面改成中文

extensions > extension installer

將中文化模組上傳

手機號碼移除，改臉書即時通訊

系統 > 商店 > 商店設定 > 連絡電話

12345 改成粉絲團短網址

更換商店 Logo 圖

系統 > 商店 > 圖片 > logo

調整商品分類

商品管理 > 商品分類

打勾的商品可以刪除

商品分類改成中文

按照分類順序修改中文分類名稱

點藍色 (鉛筆) 的按鈕進行修改

首頁橫幅圖片更換

擴充 > 版面 > 廣告圖片 > 首頁橫幅

調整橫幅圖片尺寸

擴充 > 模組 > 幻燈片輪播

商品圖片更換

商品管理 > 商品 > 圖片設定

cpanel 批次大量上傳商品圖檔

cpanel > file manager > public_html > image

多個圖檔壓縮成一個 zip 上傳比較快

調整商品圖片尺寸

擴充 > 模組 > 特色商品 > 尺寸

隱藏商品描述

擴充 > 修改 > 更新

首頁新增最新商品

擴充 > 模組 > 最新商品

版面 > home > 新增模組

移除 3C 品牌圖輪播

版面 > 首頁 > 移除模組

新增 HTML 模組 (臉書粉絲團)

擴充 > 模組 > html

商店資訊修改

商品管理 > 頁面管理

新增底部社群的模組

擴充 > 模組 > 安裝

系統 > 商店 > 底部社群連結

移除模組名稱

擴充 > 安裝 > 隱藏模組標題

改配色

擴充 > 安裝 > super custom theme

擴充 > 模組 > super custom theme > top menu

加入購物車的按鈕改顏色

擴充 > 模組 > super custom theme > add to cart

字體改成微軟正黑體

super custom theme > custom css

調整手機 CSS 樣式

super custom theme > custom css

購物車置頂

擴充 > 安裝 > 購物車置頂

新增底部按鈕

擴充 > 安裝 > 底部按鈕

新增一頁結帳模組

擴充 > 安裝 > ajax quick checkout

新增超商取貨付款

擴充 > 模組 > 支付 > 速買配

擴充 > 模組 > 運送 > 速買配

安裝臉書像素

擴充 > 安裝 > facebook pixel

擴充 > 安裝 > facebook event