馬姐魚鋪使用 OpenCart 很多年 (比我出來教 OpenCart 還早個幾年) 我跟她借了產品資料和廣告圖來錄製教學影片,直接蓋一個購物網站給你看,沒套版型主題,使用 OpenCart 預設的版型。
這支影片是 2017 年錄製的,新的教學影片請看 https://opencart.cc/new
因為我現在的教學影片都是全客製化錄影的,課後有操作問題,我都是直接用學生的 OpenCart 錄製教學影片,這樣就可以保證教學影片不再是 “有看沒法懂” 的垃圾。
也有學生笑說這根本是在耍任性,因為我教完也作完了。但我還是希望大家學起來,學起來就是自己的,就算自己部當老闆,幫老闆蓋個購物官網也很棒。
🎬 OpenCart 教學影片
影片共 26 分鐘,從安裝到產品上架,最後調整首頁,更換商標圖檔,連結臉書即時通,設定商品分類 … 總共 36 項,一刀未剪,一鏡到底,不敢說是最完整的教學影片,但已經能讓你快速進入狀況。影片網址 https://youtu.be/5WfNYIC_xvE
.
- 安裝檔案上傳到虛擬主機
- 打開網址進入安裝畫面
- 新增資料庫
- 安裝畫面設定資料庫帳號密碼
- 設定資料庫權限
- 設定商店帳號密碼
- 刪除 install 安裝目錄
- 將 OpenCart 改成中文
- 電話號碼改成臉書即時通
- 更換商標 Logo 圖檔
- 移除不要的商品分類
- 按照分類順序改成中文名稱
- 首頁橫幅圖片更換/新增
- 調整橫幅圖片尺寸
- 商品圖片更換
- cpanel 批次大量上傳商品圖檔
- 調整商品圖片尺寸
- 商品描述移除
- 新增最新商品到首頁
- 移除不要的商品
- 移除 3C 品牌圖輪播
- 新增 HTML 模組 (臉書粉絲團)
- 新增 HTML 模組到首頁
- 商店資訊改成中文
- 頁面底部增加社群按鈕
- 移除特色商品和最新商品的模組名稱
- 改網站配色
- 測試手機瀏覽
- 購物車置頂
- 新增手機底部按鈕
- 測試結帳
- 六個步驟結帳改成一頁式結帳
- 新增超商取貨付款
- 測試結帳選超商取貨付款
- 訂單管理
- 安裝臉書像素程式碼
安裝檔案上傳到虛擬主機
從 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

