OpenCart 安裝教學

林立興


最完整的 OpenCart 教學,從 cpanel 虛擬主機開始教學,接著中文化教學,超商取貨付款教學,一頁結帳教學,模擬客戶下單,測試店到店出貨

這份文件適合新手入門 (有 Y 拍, 蝦皮, 商店街經驗更好)

看完別忘了按讚並分享給需要的人

虛擬主機的意思,就是廠商把自己的主機,分割成好幾台小主機,然後分租出去,賺點租金收入。但這種房東不好當,要懂很多電腦網路相關技術,而且競爭者非常多 ...

 

免費的虛擬主機

 

收費的虛擬主機

 

教練機

有影片可以看 opencart 安裝

接下來的章節,我也會截圖說明,建議你兩邊搭配著看,相信你很快就會擁有一個可以收單出貨的線上購物網站

opencart.com 官網的版本很多 (所有版本) 教練選擇的是 2.2.0.0 (以下簡稱 2200)

 

準備工作

  1. 下載 install-2200.zip
  2. 上傳到 cpanel 檔案管理員 
  3. 目錄 /public_html 
  4. 解壓縮 
  5. 打開你的主要網域 (你的網址) 
  6. 進入 install 安裝畫面

 

第一步驟是 open source 授權 

opencart 是開放原始碼的產品,如果你需要修改程式碼,可以自己改,或者找人改。所有你看到的都可以改,有些高手會寫 vqmod, ocmod 讓你直接安裝,套用修改,這種模式就是連寫程式都不用,就改好了

 

第二步驟是主機環境檢查 

你應該要看到全部綠色勾勾,如果有紅色,表示主機有問題,請聯絡主機商,請廠商幫你處理

 

第三步驟是設定 

要設定資料庫帳號密碼,還有商店管理員的帳號密碼

 

第四步驟是完成 

完成也可以是一個步驟 (我醉了) 認真算起來 opencart 安裝也才兩個步驟,跟 wordpress 安裝一樣簡單

由上而下,依序是 

 

cpanel 如何新增 opencart 資料庫

  1. 進入 mysql 資料庫 
  2. 建立資料庫 
  3. 密碼產生器 
  4. 建立使用者 (可以跟資料庫名稱相同) 
  5. 新增使用者到資料庫 
  6. 所有權限 (執行變更) 

 

由上而下,依序是 

 

請勿使用簡單的密碼

 

請使用安全的密碼 

 

OpenCart 後台 

你的網址後面加上 admin

例如 opencart.cc/admin

 

OpenCart 安裝 常見問題

access denied for user @localhost to database 

資料庫密碼錯誤,或者是沒有權限,也可能是你輸入帳號的時候,前後多了空白

don't forget to delete your installation directory 

回到 cpanel 檔案管理員,把 public_html/install 資料夾刪除

 

extension > install > upload > taiwan-en-gb-2200.ocmod.zip > continue > dashboard 

購買教練的 zip 檔案 網路開店 OpenCart 林立興

 

這是中文化,不是中文語系檔

所以你會發現地區設定還是顯示 english 但內容卻是中文

 

為什麼要中文化,為什麼不裝中文版

因為很多套版和擴充的範例資料都是寫在英文語系裡面,這也是為什麼很多人套版會失敗的點

 

OpenCart 支援多國語系

你可以一個網站同時擁有多國語言,缺點是,每次商品上架的時候,你要同時完成多國語言資料,不然會無法存檔

購買教練的 zip 檔 網路開店 OpenCart 林立興

擴充 > 安裝 > 上傳 > phone-2-fb.ocmod.zip > 代碼替換 > 更新 

你要有臉書粉絲團,才有辦法設定這個

如果你沒有臉書粉絲團,請跳過

 

設定方式

系統 > 商店 > 設定 > 連絡電話 > 把 123456789 改成你的粉絲團網址名稱 

舉例來說,粉絲團網址 facebook.com/opencart.cc 那麼我只需要輸入 opencart.cc 就可以,不需要整行網址都輸入進去

設定 > 商店 > 設定 > 圖片 > logo 

網址旁的小圖 favicon 也可以改

 

預設的 logo 尺寸是 293x50 

寬度不要超過 293

高度可以超過 50

logo 上傳請測試電腦和手機瀏覽

opencart 採用 rwd 技術 自適應排版

所以你必須在電腦和手機之間找到一個可接受的 logo 尺寸

商店前台,藍色那一條,是商品分類 

他不是選單,請不要把藍色這一排當作選單

當你用手機瀏覽網站的時候,你就會看到 "商品目錄" 四個字

再次強調一下,藍色那一排是分類

 

新增商品分類

右上角,新增 

分類名稱,必填,名稱不要太長,會撐破預設版型的設計

meta 標題,必填,重要的關鍵字,請放最前面,公司名稱放最後面

 

新增子分類

新增分類後,在明細資料裡面,選擇層級 

只出現五個分類,不是 opencart 的 bug

opencart 設計成要一邊打字,他一邊幫你搜尋

所以你要打個字,他才會幫你找分類

你可以在搜尋的時候,加上 % 符號,變成模糊查詢

 

刪除分類

在你還沒有熟悉 opencart 的時候,千萬不要砍掉範例資料,這可能會讓你更加手足無措

你要先學會改資料,不要急著刪除資料。

如果把刪除分類,請先把要刪掉的分類打勾,然後點刪除 

擴充 > 模組 > 幻燈片 > home page > 改高度 

寬度不要改,預設版型的寬度是 1140

如果你手上已經有圖片,但尺寸不是 1140 寬

你可以用 arc 去算圖片比例 

 

更換 slideshow 圖片

版面 > 橫幅 > home page slideshow 

標題,必填,不能太短 

標題可以打一下 seo 關鍵字,對搜尋排名有幫助

連結,非必填,你可以使用任意網址,不一定要用商品網址,或者分類網址,也可以用臉書粉絲團,也可以用 line 加入好友的網址

你也可以先在自己的電腦,把所有照片都先準備好,然後壓成 zip 上傳,這樣速度最快

 

圖檔路徑

目錄 public_html/image/catalog 

圖檔 public_html/image/catalog/xxx.jpg

網址 opencart.cc/image/catalog/xxx.jpg

教練的習慣是加上年月日做分類,結構變成 /image/catalog/2018/201805/20180508/xxx.jpg

 

商品圖片請注意

 

請善用 google 翻譯

直接中文丟 google 翻成英文 

然後把英文字的空白換成底線

看不懂英文沒關係,反正這是檔名,客戶也看不到

  1. 特潤超導修護露 50ml
  2. Special Super Retouching Lotion 50ml
  3. special-super-retouching-lotion-50ml

 

OpenCart 沒有限制圖片數量,你要上幾張圖片都可以,但有幾件事情要特別注意

 

商品圖片設定 

 

版型圖片設定 

 

擴充 > 模組 > 特色商品 

 

選商品

記得邊打字邊選,他不會一次列出所有商品

 

重新排序

特色商品可以固定商品項目,但無法重新排序,你只能全部移除,然後按你要順序選入商品

 

限制數量

你要顯示幾個特色商品

 

圖片尺寸

特色商品有自己的圖片尺寸設定

他不會抓擴充 > 板型裡面的圖片尺寸

大部分的購物網站,都會再分類頁的地方,隱藏商品的介紹,只留商品標題,客戶要點商品進去看,才會看到商品介紹。加上老外的習慣是英文擷取一小段來當作商品簡介,但中文習慣就不是這樣 

購買教練的 zip 檔 網路開店 OpenCart 林立興

擴充 > 安裝 > hide-caption.ocmod.zip > 代碼替換 > 更新

擴充 > 修改 > 更新

這個擴充不需要設定,裝起來就會隱藏商品描述,移除可恢復原始狀態

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Start Here

Icon pack by Icons8