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 資料夾

然後解壓縮

opencart 安裝檔案上傳到虛擬主機

打開網址進入安裝畫面

cpanel 主畫面右側有 primary domain

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

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

打開網址進入 OpenCart 安裝畫面
opencart 安裝步驟一,軟體授權

新增資料庫

cpanel > mysql database > create new

opencart 安裝, cpanel 新增資料庫

設定資料庫帳號密碼

root 改成資料庫使用者名稱

database 改成資料庫名稱

password 改成資料庫密碼

opencart 安裝步驟三, 設定資料庫帳號密碼

設定資料庫權限

cpanel > mysql > user privileges

all privileges 所有權限打勾

opencart 安裝, 設定 mysql 資料庫權限

設定商店的帳號密碼

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

username 是帳號

password 是密碼

opencart 安裝步驟三, 設定商店帳號密碼

移除安裝目錄

cpanel > file manager > public_html > install

刪除 install 資料夾

移除 opencart 安裝資料夾

登入商店後台

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

opencart 安裝完成, 登入商店後台

畫面改成中文

extensions > extension installer

將中文化模組上傳

中文化 opencart
擴充 > 代碼替換 > 更新

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

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

12345 改成粉絲團短網址

系統 > 商店 > 電話 > 粉絲團連結
電話改成粉絲團連結

更換商店 Logo 圖

系統 > 商店 > 圖片 > logo

更換商店 logo 圖檔

調整商品分類

商品管理 > 商品分類

打勾的商品可以刪除

勾選多個商品分類
刪除已勾選的商品分類

商品分類改成中文

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

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

商品分類改中文
商品 > 分類 > 分類名稱

首頁橫幅圖片更換

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

擴充 > 版面 > 橫幅圖片
設定橫幅圖片標題, 連結網址

調整橫幅圖片尺寸

擴充 > 模組 > 幻燈片輪播

修改幻燈片輪播圖的尺寸
滑鼠右鍵, 重新載入畫面

商品圖片更換

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

商品管理, 商品, 編輯
商品管理, 商品, 圖片設定

cpanel 批次大量上傳商品圖檔

cpanel > file manager > public_html > image

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

cpanel 大量上傳商品圖檔

調整商品圖片尺寸

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

擴充 > 模組 > 特色商品 > 尺寸
滑鼠右鍵 > 檢查圖片尺寸
圖片比例試算
擴充 > 模組 > 特色商品 > 尺寸設定
特色商品尺寸修改後,滿版不留白邊

隱藏商品描述

擴充 > 修改 > 更新

安裝模組 > 隱藏商品描述 > 代碼更新
隱藏商品描述效果呈現

首頁新增最新商品

擴充 > 模組 > 最新商品

版面 > home > 新增模組

擴充 > 模組 > 最新商品 > 新增
設定最新商品的圖片尺寸
版面 > home > 最新商品
首頁最新商品效果呈現

移除 3C 品牌圖輪播

版面 > 首頁 > 移除模組

移除 3C 品牌 logo 圖檔輪播

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

擴充 > 模組 > html

新增 html 模組
html 內容填入臉書粉絲團程式碼
臉書粉絲團程式碼預覽
版面 > Home > 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

調整手機 css 樣式
自訂 css
手機商品分類 css 樣式修正完成

購物車置頂

擴充 > 安裝 > 購物車置頂

購物車置頂

新增底部按鈕

擴充 > 安裝 > 底部按鈕

新增底部按鈕

新增一頁結帳模組

擴充 > 安裝 > ajax quick checkout

新增一頁結帳
一頁結帳效果呈現

新增超商取貨付款

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

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

擴充 > 支付 > 速買配
設定超商取貨付款參數值
啟用超商取貨模組
設定超商取貨運費
超商取貨結帳效果呈現

安裝臉書像素

擴充 > 安裝 > facebook pixel

擴充 > 安裝 > facebook event

安裝臉書像素
結帳成功回傳像素事件