用兩個月打造 Shopify 客製化網站設計 (2021)

從零開始學習用兩個月建立 Shopify 跨境電商網站的實戰經驗,正在邁向進階的路上!透過不斷執行與測試整理出來的實戰筆記,無私分享資源,包含 Shopify App 精選清單,內容會持續更新,為 Shopify 台灣在電子商務網站設計貢獻一點心力!實戰學習才會扎實,有問題就加入 Line 的 Shopify 學習社群,我們一起進步!(更新時間:2021.7.27)

「實戰經驗分享,非只是網路資料整理」- Irving 爾文

Shopify 官方網站 — 繁體版首頁 — 2021
Shopify 官方網站 — 繁體版首頁 — 2021

在開始之前,我們先看一下 Shopify 的教學影片:如何建立一個電商網站,片長不到 25 分鐘,步驟講解清楚,若想33看中文翻譯可以直接在 YouTube 中切換語言。有點不可思議,但真的半小時就完成了!

Shopify — YouTube: How to Build an Ecommerce Website

從影片中會讓人以為就這麼簡單?是真的,但是老闆的需求或我們自己的需求就僅此於止?當然不。Shopify 平台本身預設的網頁客製化功能沒有「期望中」那麼高(這是相對於用 WordPress 架站來說,基本上還是遠勝於其他架站平台),其實有諸多限制,所以我們需要想辦法解決這個問題。

一來找工程師,但熟悉 Shopify 開發的工程師在台灣還是極少數,且對他們而言還要摸一下 Shopify 獨有的語言:Liquid;二來對一般人來說就是使用資源豐富的 Shopify App 、無數免費和付費的版型,善用組合這些擴充功能就可以解決「客製化電商網站」的問題囉!詳情請繼續看下去!


嗨我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計接案的經驗,對於這類平台的限制與可塑性有一定的了解,例如 Squarespace、Wix 後台真的限制超多,大部分的情況只能按照其版型去做編排,要做其他設定會相當困難而痛苦;WordPress 則是彈性度超高,可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。

無論是 WordPress 或 Shopify 架站建議盡量使用原本預設的功能,而不建議過於改造原本網站架構和外掛程式碼,影響其日後更新。若版型未來都不更新而自行客製化大改造或許還可以,但 WordPress Plugin 和 Shopify App 的核心程式碼則不太可能去動,這些外掛的開發商都會持續更新,若真的有想法回饋直接聯繫開發商請他們優化與打造新功能囉!只是單純用寫些 CSS 設計樣式,更新後出問題還比較容易解決,但別直接更改運算邏輯,例如寫 JavaScript 擅改該外掛的核心程式碼。

擴充功能在 WordPress 稱為 Plugin,在 Shopify 稱為 App,WordPress Plugin 基本上類似 Shopify App)

有任何想問的問題,歡迎留言或寄信給我 irving520@gmail.com,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。


至於 Shopify 的後台客製化編輯程度就介於 WordPress 和 Wix 之間,對於網站剛入門者會稍微輕鬆一些,亦即 Shopify、Wix、Squarespace 等這類架站會感覺建立網站「好像」不是很困難的事,會讓人寸步難行的是若想要隨心所欲進行網頁排版或想要寫個簡單的 Javascript 語法等等,限制多多。WordPress 雖然真的也很適合一般沒有程式背景零經驗的人學習,但實際上遇到很多客戶使用起來他們還是覺得很痛苦、小複雜,要記住很多設定,只能說要大量去摸熟後台操作邏輯,才能跨過心中那個門檻囉!

網站架站平台客製化程度(由高至低)

  • WordPress:客製化程度極高,有海量的版型、外掛、教學資源 ,全方位架站從部落格、形象網站到電商網站,全都包起來!
  • Shopify :客製化程度中等,以架設電商網站為主,重點在於電商的安全性與擴充功能,且 Shopify App 滿多需要訂閱付費的,整體的介面也比 WordPress 少一點複雜,畢竟有相當的限制,可以確定的 Shopify 目前是要將東西賣到國外的唯一首選平台。
  • Squarespace、Wix、Weebly:客製化程度極低,基本上選好版型後就不要有其它特別的慾望了)

跟 WordPress 一樣有很多外掛可以使用,而他們兩者在外掛最大的差異是:WordPress 外掛免費版真的是超多,且很多不用到付費版就可以完成需求,可以參考我寫的另外一篇文章:WordPress 外掛推薦精選(2021 最新);Shopify App 也不少,但要滿足小需求的功能都要付費,而且幾乎沒看過一次性購買,而是訂閱費(每月付款)。

注意事項:很多在門外觀望的使用者,其實不知道無論是 WordPress 或 Shopify 的版型或外掛看起來很像五花八門,每個都說自己的功能多強、評價多高,但,等你真的去安裝使用後會陸續發現「意想不到」的問題需要解決,並沒有想像得輕鬆!終究還是需要親自去測試與修正,找出最佳組合才能讓網站順暢運作。

若想要另外了解如何更自由地進行網頁排版與配置(Shopify 平台本身在這個設定上的預設功能相當陽春),可以參考此篇:如何打造 Shopify 電商網站客製化設計排版(2021)


進入本文重點,用 Shopify 打造電商網站是我當年剛進公司得到的任務,我完全沒用過 Shopify,很多時候會在其後台尋找 WordPress 的影子,進而發現以往隨心所欲打造網頁的自由度不復存在。就拿一個網站最基本的「建立頁面和排版」這兩種最基本的功能,在 Shopify 竟然沒有!有是有,但就跟前述所說的都被限制在極少的設定選項,無法任意新增區塊和任意排版。

因此,為了解決這個問題,我開始深入了解 Shopify 的運作邏輯,起初以為應該就是簡易版的 WordPress 應該很好上手,結果想要的都沒有 XD!

首先,老闆預期上線的時間點是四月六日(原預計是四月一日,但該週適逢清明連假,所以網站上線就沒人在上班了其實不太妙,所以上線日期最好在平日時間中間左右,盡量不要在上線隔日就放假的時間點),根據以往打造網站的經驗,兩個月差不多也是架設中小型網站的時間,於是我規劃了 Shopify 網站進度時程表如下圖:

建立 Shopify 電商網站進度時程表
建立 Shopify 電商網站進度時程表

需注意的是,其實時間是滿緊湊了,但因為我們公司原本就有一個用 WordPress 架設的網站,只是今年要改成 Shopify 平台,內容上原本就有了,所以至少可以減少兩三週的文案撰寫和「網頁視覺設計」的時間,亦即按照正常的時程,至少三個月會較理想。備註:進度表中紅色的數字代表放假,但卻有底色,原因就是我有加班囉(至少九天吧!)。


我安排自己用一週的時間從零快速了解 Shopify 後台操作、研究版型設定、Shopify App 設定等,接下來就是邊做邊學、遇到問題邊找答案解決。看似平凡的旅程卻充滿各式各樣的問題襲來,還好,最後都能一一克服與舉一反三。後來經過無數專案的執行,我整理歸納出的網站設計流程與排程,可以參考此篇 Shopify 網站設計流程與時間規劃。以下列出我當時兩個月來威猛使勁地學習方法與資源分享:

快速入門 Shopify 架站

申請 Shopify 帳號免費試用 14 天,先將後台摸一圈(起手式)

除了使用公司已付費版的,我也自己用帳號申請一個 Shopify 帳號進行免費試用,最多 14 天,客服就不讓我繼續延期 XD,所以我個人後來自掏腰包購買 Basic Shopify 方案,每個月 29 美金,一年大約一萬多塊台幣,為了學習,這點錢是滿值得的!

Shopify 方案:Basic Shopify、Shopify、Advanced Shopify
Shopify 方案:Basic Shopify、Shopify、Advanced Shopify

為何不直接用公司的 Shopify 網站來操作?因為架設過 WordPress 網站的人都會遇到的問題就是安裝了某些外掛後結果網站爆掉 GG,可能是與版型衝突、也可能是外掛之間的衝突,所以要測試網站最好還是建立一個「測試站」來使用比較安全,不太好直接拿公司的囉!

而且不斷安裝和移除各式各樣的 Shopify App 會造成一些問題,例如若沒有妥善移除會造成殘留程式碼或檔案,造成網頁破版。有些 App 會需要「額外的步驟」才能「完整移除」,詳見文中下半部的常見問題。

兵貴神速!前往註冊 Shopify 免費試用!

Shopify 方案中,選擇付款週期越長,省越多

Shopify 的付費模式:一次選擇付款週期越長(單位:年)就省越多。著實應可吸引使用者選購並提高黏著度。圖中是:選擇 $79/month 方案,然後選擇每年付款可以省 $96 美金。

Shopify 付費方案 — 付款週期越長,越省錢!
Shopify 付費方案 — 付款週期越長,越省錢!

在去 Google 答案之前,先進入 Shopify 後台繞一圈,大致有個印象每個設定的位置、每個項目點進去看看,會出現哪些選項,這個階段不用每個都徹底了解。再加上 Shopify 的 Onboarding 引導初學者流程也是做得不錯的,「讓人覺得好簡單」,進入後台首先印入眼簾的是三個步驟:Add product、Customize theme、Add domain,「咦?根本幾乎完成就可以開賣了?!」也沒那麼快啦,電商除了網站之外,還需要設定金流和物流,這兩項之後需要再設定。

Shopify 後台介面
Shopify 後台介面

目前 Shopify 管理員後台已有繁體中文版可使用,連官方文件也有提供,在查找資料相當清楚。而除非消費者是中文世界為主的台灣或其他國家,不然若是面向國際還是都用英文版,讓自己時時刻刻了解每個英文用字遣詞的方式。Shopify App Store 儘管有提供中文版,但只有局部翻譯,且大部分的 App 開發者都是用英文撰寫內容,所以改成中文版也沒什麼特別意義。

瀏覽 Shopify 官方文件與幫助中心(當字典翻)

Shopify Blog

簡介:A blog about eCommerce marketing, running an online business and updates to Shopify’s eCommerce community.
說明:官方部落格除了提供很多 Shopify 平台的更新資訊,還有電商經營方法與數位行銷觀念、創業家故事等,可以在學習之餘慢慢積累產業知識,扎實地建立自己的思維模式。
連結前往瀏覽

Shopify Help Center

簡介:Shopify 說明中心將協助您瞭解及使用 Shopify。我們備有文件和影片以回答您的問題。
說明:裡面的文件都有中文翻譯,可以將文件掃描一下,大致上都能解決後台操作所遇到的問題,例如說網域如何設定、如何新增產品等。我沒有全部當書本來啃,而是在實際操作過程中有問題時才會來當字典翻,滿實用的!
連結前往瀏覽

Shopify Help Center — YouTube

說明:官方的 Shopify 操作介面設定影片教學,有很多時候基本的操作介面都可以在上面找到解答,非常清楚易懂。
連結前往瀏覽

Shopify Community

簡介:Access a community of over 600,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
說明:網站架設過程中會有很多問題在社群上討論,所以可以先去社群搜尋,瀏覽過所有討論串後,可以快速過濾並找到比較適合的方法。例如:想了解 Shopify 的 SEO 如何執行,畢竟每個架站平台本身都有其限制,在去 Google 搜尋之前,可以先在 Shopify Community 搜尋 SEO 相關問題,更有效率地大量吸收可能會遇到的問題。
連結前往瀏覽

如果是想要多了解 Shopify 程式語言 Liquid 的話,可以閱覽 Shpoify Partners 的官方部落格:Learning Liquid,以及 Shopify 官方 Liquid 文件

若英文太多看了眼花也可以參考簡中版的 Shopify 部落格,需要的話可在瀏覽器空白處按右鍵可以改成繁中文字,文中有 Shopify 的 WeChat 官方微信公眾號 QRcode 掃描加入,還有 Podcast 節目:Shopify 跨境电商大家谈 聽聽看!感覺內容也挺豐富的!


線上客服是即時解答的盟友

Shopify 幫助中心 — Support channel

簡介:Contact Shopify Support by chat, email, or phone.
說明:英文版的支援中心比較多,有四種,如下圖所示。可以透過直接線上文字對談、電話對談、電子郵件和 Twitter 訊息提出問題。管道算是相當多元,幾乎不怕找不到他們。
連結前往瀏覽

Shopify 幫助中心 — Support channel
Shopify 幫助中心 — Support channel

但線上客服最在意的還是「客服回應的即時度」,排除要講英文的電話、感覺就是要等待的 Email,以及步驟稍多且訊息似乎無法保存在一個地方的線上文字交談 Chat,我選擇了 Twitter 這個社群管道,我原本就有一個 Twitter 帳號,偶爾就會用一下,現在剛好可拿來與 Shopify 直接聊聊。

Shopify Support on Twitter

線上客服中,我最愛也是主要使用的是 Shopify Support@Twitter 社群管道,透過 Twitter 傳遞訊息跟他們直接線上聊將開來,他們每天每個時段會有不同的客服回應我提出的問題,而且幾乎是有問必答,通常是數分鐘到數十分內就會收到回應,速度算快了,很容易得到解答;若有他們回答不出的問題,例如問了程式碼編輯的問題就超出他們客服能回應的範疇,他們會直說。

我在學習操作 Shopify 架站的過程中,應該有一半以上的時間都是靠著跟他們「在 Twitter 開聊天室」迅速得到答案和很多額外的資源如他們時常提供文章網址連結、影片連結等

Shopify Support on Twitter — Chat with me 聊天時間
Shopify Support on Twitter — Chat with me 聊天時間 XD

線上雇用 Shopify 專家(Hire trusted experts)

網路上已經有很多雇用專家、找專家這類的平台服務,海內外都有很多。Shopify 自己也有提供專家媒合的平台,有分六大類:Marketing and sales、Store setup、Development and troubleshooting、Visual content and branding、Content writing、Expert guidance 等,選擇需要專家幫助的類別,而且若你真的是英文苦手,也可以透過篩選器選則有提供中文服務的專家進行洽談,這些專家我發現有個人的、也有開公司的,可以參考看看。

Shopify Experts 官方頁面-可以線上雇用 Shopify 專家
Shopify Experts 官方頁面-可以線上雇用 Shopify 專家

我自己還沒用到 Shopify 官方提供的專家服務,或許未來有更重大的需求或困難會考慮使用。而關於這個,我是有用過另外一個成立於美國的外包平台 Upwork,當時需要的小功能是將 Shopify 的產品頁的縮圖區顯示方式改成 Slider(我們選的免費版型預設是沒有水平方向的 Slider),於是找了一位熟悉 Shopify 開發的印度工程師,過程滿順暢的。溝通方式是透過平台內的交談工具,在電腦上和手機上安裝 Upwork App 隨時可以聯繫,對方還會截圖講解與詳細列出設定的步驟,第一次經驗是滿好的。

Shopify 網站在運作時遇到問題了,該怎麼辦?

試著回想一下問題發生前後這段期間,在網站後台做了什麼事?任何事情逐一清查,並用刪去法逐一排除。除了詢問 Shopify 官方的 Support 團隊之外,可先自己進行 Debug 的過程:

  1. 以前沒發生問題,最近才發生此問題?如果是,那表示很有可能在後來的某段期間有人在網站中「做了什麼事」導致問題發生。
  2. 網站後台設定有幾個人以上在使用?還是只有您一人使用?若兩人以上同時在使用,那是否先跟其他共同使用者詢問並了解他們有沒有在網站中做了什麼設定?
  3. 最近有沒有直接動過程式碼?程式碼設定在哪裡、哪些頁面?在編輯 Shopify 網頁程式碼時有可能先後順序設置或漏掉了一兩個程式碼就會導致問題產生。
  4. 「該功能」是使用哪個 APP 設定的?有沒有回報該 APP 開發公司此問題?他們怎麼回應?能否提供技術支援?
  5. 該功能是如何設定的?是不是少設定了什麼?
  6. 有沒有安裝類似功能的 APP?版型使用哪一個?APP 與版型或 APP 與 APP 之間他們或可能相互衝突?
  7. Shopify APP 一般都會自動更新,問題發生期間是不是該功能的 APP 更新了?更新的項目是什麼?有沒有可能就是主因?其他 APP 有沒有自動更新?若有,若前面所述都沒發現異樣,那逐一檢視網站所安裝的每個 Shopify APP,看是不是哪個導致的?
  8. ……(不定時補充 Debug 的思考過程)

若真的還是找不到,那加入 Line 社群 一起交流與學習吧!


在 Udemy 購買 Shopify 架站基礎的線上課程

對於數位軟體學習莫過於直接找幾門線上課程來上,有實際的操作畫面完全高效率看清楚每個動作的步驟,且又是終生觀看,於是我在 Udmey 挑選了兩門 Shopify 架站的基礎課程(真的是超基礎的),幫助我「了解 Shopify 的簡易操作和 Shopify App 生態系」

但因為下列所選的課程內容太基礎了,所以不是真的非買不可,直接申請帳號開始摸索學習可能比較實際,呵呵。

課程 1:How to become a Shopify Expert (from zero to hero)
費用:新台幣 $600(當時買的價格)
心得:內容滿淺的,講解很多基本概念和操作方式,很適合初入門,有推薦一些常用的 Shopify App 幫助網上銷售,整理出購買版型和 App 的小訣竅。

課程 2:Shopify Power: Build An Ecommerce Website Using Shopify
費用:新台幣 $600(當時買的價格)
心得:內容是給初學者的,有大量介紹實用的 Shopify App,清單超長可以搜集,並一一試用篩選過濾。

另外官方其實也有出教學,主題滿豐富的,但必須先註冊 Shopify 帳號後才能進入瀏覽。

官方免費課程:Shopify Academy(Shopify Education)

若是英文苦手,也可以瀏覽 2020 年底聖誕節那週新上線的中國 Shopify 大學,需註冊 WeChat 或手機帳號才能登入。


Facebook 臉書社團(偶爾逛逛找問題挑戰自己)

Shopify Taiwan 台灣品牌 & 跨境電商(台灣)
Shopify Taiwan Community Group(台灣)
Shopify For Beginners(國外)

說明:台灣比較少人使用 Shopify,能在臉書社團找到台灣人討論 Shopify 的實則稀有,相對於其他電商平台如 Shopline、Cyberbiz 等,雖然討論熱度不高,但還是有不少人發問的問題與需求值得從中挖掘,偶爾去逛逛了解自己還有多少成長空間。

最近開始慢慢發現有少數台灣廠商開始有提供用 Shopify 架設電商網站的服務,以及是否 Shopify 也將重心放在亞洲市場?我們看到 Shopify 開始有繁體版本而且還在測試中,加上未來 Shopify 能更在地化、接地氣串接完善物流和金流,那現在入手 Shopify 架站技能值得好好投資囉!


Shopify 網站設計文章訂閱

歡迎訂閱我們的電子報,不定期更新內容包含「網站設計與架站的實務經驗分享」、網站設計流程與規劃,前往訂閱去!Let’s GO!


兩大 Shopify 資源庫(逛街採購時間)

Shopify Theme(選擇網站版型)

簡介:Ecommerce Website Templates — Free and Premium Themes for Your Online Store.
說明:版型設計算是不錯看了!選擇性真的滿多的,除了提供基本功能與排版的免費版型外,付費版型提供更多樣的設計樣式,普遍來看平均落在 $180 美金上下。
連結前往瀏覽

另外還有一個相當推薦的平台 Themeforest,瀏覽其所擁有的 Shpoify 付費版型:Themeforest — Shopify Themes,非常推薦在這裡選購,因為其版型所提供的功能和排版功能相比官方來說顯得更具客製化與彈性,之後打算來買幾個嘗試用用看!

在 Shopify 官方的 Theme Store 可以試用版型,試用後想買再付費即可。但在第三方平台如 Themeforest 必須直接購買才能使用。而每個版型只用安裝使用於一個 Shopify Store 商店,詳情可參考官方文件:Adding, previewing, and buying themes

Shopify Theme -Shopify 官方網站提供的免費和付費電商網站版型
Shopify Theme —Shopify 官方網站提供的免費和付費電商網站版型

安裝好版型後,記得先備份一次,保留最原始的檔案

將購買好的版型安裝好後,先在後台備份一次,保留最原始的設定(這是好習慣)。然後複製一遍,改變名稱為「開發中」,開發完後再改變名稱為「發布中」。以下圖為例,圖中右下角有三個檔案:

  1. 備份原始檔:Copy of Prestige — Try Theme 20200910
  2. 開發中:Prestige — Staging 20201101
  3. 網站發布:Prestige — Launch 20201231

其中 Prestige 是版型名稱,後面都會附上時間,幫助自己在使用這些版型的設定版本時了解先後順序,未來若持續修該發布第二版本、第三版本等,也可以視需求新增備份。

Shopify 安裝好版型後,記得先備份一次,保留最原始的檔案
Shopify 安裝好版型後,記得先備份一次,保留最原始的檔案

若是在第三方平台如 Themeforest 購買的 Shopify Theme 版型,則購買完後會有一組序號,在安裝完版型後輸入這組序號才能開始使用版型設定,且一組序號只能使用於一個 domain(網站)。如下圖,我所購買的 Wokiee 版型,上傳到 Shopify 後進行安裝,進入商店首頁後顯示的畫面,會要求輸入序號(如何取得序號可參考:Where Is My Purchase Code?

Themeforest 平台的 Shopify Theme:Wokiee
Themeforest 平台的 Shopify Theme:Wokiee

備註:開始建立 Shopify 網站時,因為內容都尚未完整,我會先將網站鎖上密碼,可以防止被 Google 收錄或不小心被自己或團隊轉貼連結出去。


Shopify App Store(選擇應用程式)

簡介:Ecommerce App Marketplace — Using the Shopify App Marketplace To Expand Your Store’s Functionality.
說明:我的經驗是,幾乎好用的、想要的功能都需付費,而且是每個月都要付款的訂閱費,所以在挑選這些 App 組合後,可以先估算一下每個月的成本大概有多少。
連結前往瀏覽

例如專門打造網頁排版的 PageFly Advanced Page Builder 的 Gold 方案每個月 $39 美金(實際價格以官方發布為主),目前我自己就是使用這個方案,價格親民,花點小錢直接拿來學習和實際應用都很適合,用了至少三個月以上一定會上手的!有任何設定的問題也可以直接來問我吧!

想了解多 PageFly 網頁設計編輯器可以參考:如何客製化 Shopify 網頁設計排版(2021)

我通常也會將安裝過程的體驗是否較佳納入評估因素,因為有些 App 雖然「功能很強」,但 UX 使用經驗堪憂、用起來會頭皮發麻。除非市面上沒得選非用它不可,否則我還是會依照下列因素來確認選哪一款 App:

  1. 功能滿足需求(若不僅滿足需求,又額外提供多樣功能尤其迷人)
  2. 安裝與設定的過程 UX 佳(包含線上客服速度、Onboarding 流程順暢、文件說明詳細、後台介面設計是否賞心悅目等)
  3. 開發者時常在更新與優化 App(關注最新更新時間)

關於第 2 點的測試,我會用一種方法:就是有沒有可能在不看 App 的官方說明文件的情況下也能順利安裝設定完成,這真是 UX 最高難度考驗。若通過,那真的使用起來相當舒適。當然這也牽涉到功能複雜度。無論如何,重視 UX 體驗與後台介面視覺設計的 App 開發者會是優先選擇。

Shopify App Store — 豐富的應用程式 Shopify App 擴充電商網站的功能
Shopify App Store — 豐富的應用程式 Shopify App 擴充電商網站的功能

精選 Shopify App 清單

可以針對實際需求斟酌使用,如果有覺得不錯的 Shopify App 也歡迎推薦給我囉!

從去年五月至今 2021,Shopify 產品頁中的「產品輪播圖」需求大概被問了 n 次,官方社群也是很多人在詢問,但那時都還沒找到一個快速有效的可行方案,尤其是效率這件事,那時公司有給外包改過,但設定步驟繁複,版型某部分功能也被影響到,實為不是上上之策。

最近終於找到一款並實際使用過,目前還不錯的 Shopify App:

產品輪播圖 Product Image Slider

Product Image Gallery & Zoom

使用時機

當你安裝的網站版型本身沒有提供「產品輪播圖」功能的時候,可以使用看看。

注意事項

如果能的話,先在測試站測試,沒問題再到正式站使用。因為我們使用的網站版型和 Shopify App 都不盡相同,所以測試的時候要去注意有沒有彼此衝突的問題。

補充說明
  1. 外包工程師客製化獨特功能沒有不好,但有時還是得靠運氣遇到優質的人或是那獨特功能真的太複雜所致,因此能先找 Shopify App 解決為上。
  2. 除非真的沒有其他變通的做法或嚴重影響生意的網站問題,再考慮找外包工程師長期配合,或就乾脆組建一個公司內部的工程師團隊,以「長期合作」的性質為出發點,不僅有利於網站的長久維護更新以及將溝通成本降到最低。

SEO – Rich Snippets

Rich Snippets for SEO by Orbis Labs

說明

這一款 Shopify APP 使用後覺得還不錯,一次性付費(非月費),這實屬難見,竟然不用月費!設定滿簡單的,後來也有達到目的。之前建立完某個 Shopify 電商網站後,希望能將產品的 Rating 顯示在 Google 搜尋結果頁中,那時候只是為了這個功能而已。但產品頁要搭配使用評價 APP,然後真的有人留下評價且不錯,那顯示在搜尋頁會更有意義,意思是如果產品沒有任何人評價或評價不好,那…先不要使用吧!評價 APP 我是使用 Loox Product Reviews & Photos

*是否需使用請自行斟酌評估喔!這裡只是分享使用經驗
*為何要設定 Rich Snippets?讓產品在搜尋結果頁中提高能見度和點擊率
*如何驗證 Schema 設定成功?使用 Google 的 複合式搜尋結果工具

開網店的路上你不孤單

Free Business Tools — Online Tools for Small Businesses

說明:開設網店通常還需要許多數位工具相扶持,除了上述所列出所有的教學與社群支援外,Shopify 還提供免費的線上工具供開店老闆、創業者使用,有點酷,無論是 Logo 產生器、Slogan 金句產生器等都可以玩玩看!
連結:前往瀏覽

Free Business Tools — Online Tools for Small Businesses
Free Business Tools — Online Tools for Small Businesses

解析其他 Shopify 架設的電商網站(借力使力)

為了瞭解其他用 Shopify 電商網站是用了哪種版型與哪些 Shopify App 讓其網站打造得這麼優質與超能力,就需要一些工具來分析。

網路上有分析 WordPress 的 Chrome Extension 如 WordPress Theme Detector and Plugins Detector,以此類推,Shopify 發展這麼久了,一定也有開發者開發類似的,果不其然,我篩選後選擇了這款 Shopify App/Theme Detector by Fera.ai,記得在小視窗往下捲動,還有剩下沒在畫面中的,右邊都有附上該應用程式的官網和購買連結,超方便!如下圖所示,觀察此賣貓兒產品的國外公司 Katris 的網站使用的版型名稱是 Minimal theme,而其所使用的 App 有:

  1. Hextom Shipping Bar
  2. MailChimp(實際上使用的是 ShopSyncMailChimp 官方建議使用
  3. Sales Rocket 等等

有注意到我的 Chrome 瀏覽器上方還安裝了超過二十個的 Extension,排排站好是驚人!我之後會再另外寫一篇分享我用的這些瀏覽器擴充功能用在哪些地方與使用方式,包含 SEO、網站技術分析、網頁設計中的字型解析等。

Chrome Extension: Shopify App/Theme Detector by Fera.ai 的使用畫面
Chrome Extension: Shopify App/Theme Detector by Fera.ai 的使用畫面

Shopify 官方其實一直在更新系統,從設計到功能面都在優化,可以前往 Shopify changelog 瀏覽他們每個月更新了哪些,挺有趣的!

Shopify 後台還是有可以優化的地方

不建議使用 Shopify 內建的 Free images 導入的圖片

Shopify 內建的 Free images 導入的圖片檔案非常大,幾乎都是好幾 MB,所以不建議直接使用。

Shopify 內建的 Free images 可以導入圖片到網站中
Shopify 內建的 Free images 可以導入圖片到網站中
Shopify 內建的 Free images 可以導入的圖片都非常肥大,完全沒優化過
Shopify 內建的 Free images 可以導入的圖片都非常肥大,完全沒優化過

文字編輯器基本功能不是很全面

Product page 的編輯器滿難用的,css 樣式也怪怪的,例如 h5 的 margin 高度異常的高,或是複製貼上文字時即使已經清除格式,還是會產生一些不必要的程式碼,我是直接手動方式貼在編輯器中轉換程式碼狀態後再切換回來進行排列與文字設定,滿麻煩的。而且複製貼上時,除了清除格式外,最好還要手動去分行、斷行,進行格式化,不然每個頁面會不一致。

沒有一個真正好的媒體檔案素材管理

在 Shopify 後台管理沒有一個很好的媒體檔案管理方式,圖片上傳後不能有資料夾分類和搜尋,很不直覺且難用。如果我有一百個產品,照片應該會超過兩三百張,很難想像這怎麼處理,反而是要在頁面中要上傳圖片時才會發現有這個「圖片空間」XD”(妙哉!)即使官方有推薦此 Shpify App — Image Manager,但其功能有限,只能篩選和搜尋,依然無法建立資料夾進行分類,重點是還真不便宜!另一款 Variant Image Penguin 專門處理 Prodcut photos 看起來有一點點幫助,同樣價格不便宜然後功能應該還能更好,所以就等待囉!暫時還是先用預設的方式執行。

目前尚不支援 SVG 圖檔

用過 SVG 圖檔格式的應該就回不去了!因為解析度真的太好,完全不怕電腦和手機的大小螢幕解析度,而且清晰的可以!尤其用在 Logo、小圖示呈現都不怕品質變差。Shopify 目前依然尚未支援,可參考官方文件

圖片上傳後 Shopify 會自動壓縮

照理說這功能滿棒的,可以省下優化圖片的時間與人力。但是就變成無法自己「完全掌控」並決定圖片品質的高低。因為有時候就是想要在品質和圖片壓縮之間取得平衡(可以是八成給品質、兩成給網站效能),而非百分百以效能為主壓縮圖片,設計師應該都有這方面的小堅持吧!XD

Shopify App 評價資訊少,使用者挑選時判斷資訊不夠多

目前每款 Shopify App 頁面的評價資訊主要有評分(幾顆星)和評論(使用者回饋留言),其他技術細節、被購買(使用)次數都沒有,而覺得最重要的資訊還有此 App 的開發者最新更新時間為何時,這點超重要!才能讓我們這些使用者直接判斷 App 有沒有在更新,若超過一年、兩年以上都沒更新,那其實可以合理推測此 App 未來可能成為孤兒,不太適合使用,因為平台、網路環境等不斷更新,App 若不即時更新,應該會有很多 Bug 出現。

像是 WordPress 外掛Themeforest 就有相當豐富的資訊提拱給使用者評估是否能選到穩定、優質的數位產品。

WordPress 外掛頁面 — 提供進階檢視
WordPress 外掛頁面 — 提供進階檢視

主要選單 Main Menu 只能一個?

在 Shopify 後台,導覽中的「選單」在 Main Menu 是預設的,不能移除。

Shopify 後台中,導覽 (Navigation) 下的選單 (Menu) 中的 Main Menu 是預設不能移除的
Shopify 後台中,導覽 (Navigation) 下的選單 (Menu) 中的 Main Menu 是預設不能移除的

目前使用的經驗是,我將網站上方的主選單設定為 Main Menu 以外的選單 Menu A,結果桌面版(Desktop)的確有更新為選單 Menu A,但行動版(Mobile)卻一直顯示 Main Menu。這有可能是 Shopify 本身的限制或是一個 Bug?總之,網站上方的主選單先以 Main Menu 來控制囉!

Shopify 後台中,導覽 (Navigation) 下的自行手動新增的選單 則是可以移除的,例如圖中的 Menu A
Shopify 後台中,導覽 (Navigation) 下的自行手動新增的選單 則是可以移除的,例如圖中的 Menu A

……(未來會繼續新增)


實戰經驗分享,而非僅止於網路資料整理

我很重視實戰經驗,因為真的是實際去做一遍後才會發現不是每款外掛都適用於自己的網站,因素與變數太多了,且有些外掛還過時卻依然存在於被推薦的清單中,作者本身若不是真的實際用過體驗過,單純只是從很多網路文章篩選做個重點整理而已,這樣是不能提早了解「潛在的實際問題」,所以跳下去 Make your hands dirty 吧!


行文至此,接下來一週內會持續更新內容,因為內容有點多,所以分幾天寫完這一篇文章,歡迎隨時回來逛逛 XD!預告的內容主題如下:

未來預計分享的 Shopify 電商網站相關主題

Shopify App 測試清單

分享我在實際研究每個需求列出的 App 清單,經過一個一個篩選、比較、分析、實驗後「真心覺得可以用用看的」。例如:用 PageFly 打造多樣版型的網頁、用 InstaShow 打造在網頁上瀏覽 Instagram 的極佳體驗等。

這裡先附上我的 Shopify 篩選測試清單,先針對需求找出相關的 App,並按照官方的分類方式進行紀錄(之後要找相關的功能比較方便),再來一一實際安裝和測試,寫下使用心得與過程。此份清單會繼續更新,可以將此模板拿去用,或蒐藏連結即可,因為我同樣會持續更新此清單,加入更多的註解和精選推薦喔!

Shopify App 篩選測試清單 — 實際測試與紀錄(持續更新)
Shopify App 篩選測試清單 — 實際測試與紀錄(持續更新)

裡面其實還附上分析其他同樣用 Shopify 平台建立的網站,我也想了解其他公司都是安裝了哪些版型和 App,當作參考用。

Shopify 電商網站設計與建置的流程

說明:概要描述架設 Shopify 網站的過程與設計方法、使用的工具。我會根據此文中那張圖「網站進度表」的每個階段在做什麼的工作內容,以及思考方式與原因進行簡介。

可以參考此篇:Shopify 網站設計流程與時間規劃

Shopify SEO 怎麼做?

  1. 概述非常非常基本的 SEO meta,在執行長期的 SEO 規劃或找 SEO agency 之前可以先做好的事。
  2. 原來用 Shopify 建置的網站,sitemap 檔案連結是:https://www.your-shopify-domain.com/sitemap.xml
  3. 網站的 sitemap.xml 和 robots.txt 檔案會自動產生。

可參閱官方文件:SEO 概覽改善搜尋引擎最佳化 (SEO)The Beginner’s Guide to Ecommerce SEO

Email Marketing — MailChimp 電子報行銷自動化設定

有設定過 EDM 系統的人通常是寄出電子報,還可以測試標題的 AB Testing,而實際使用 MailChimp 設定自動化行銷的相對應該會比較少。我會針對電子報行銷自動化做一個設定示範,也會分享我從哪裡學習到這些設定技巧。

更多的主題待續發酵中…


執行網站專案常用工具推薦

專案管理軟體 ClickUp™ — 官方網站
專案管理軟體 ClickUp™ — 官方網站

專案管理:ClickUp™

簡介:An all-in-one suite to manage people, projects, and everything in between. Start for free! Stop switching between multiple tools. With ClickUp, manage everything in one platform。 Amazing 5-Star Reviews。Collaboration & Reporting。Does What Others Can’t。

說明:我使用過很多套專案管理工具來統整團隊、任務執行規劃、內外部資源等,後來發現 ClickUp 之後,就不用 Asana(另外一套工具)了!這家公司真的很自信十足,立志要成為第一,打趴所有潛在對手,請看此競品比較表,而且動不動就在更新軟體,速度超快,真的是很驚人!功能越來越強,而價格依然不變,非常有感。目前已經用了至少十個月以上,相當滿意,而我就被轉換了 XD!因為我在使用十個月後決定付費,每個月 4.25 美金,可以連到此優惠碼頁面看有沒有可以用的 Coupon Codes。

連結:前往瀏覽

Figma: the collaborative interface design tool 共同協作的介面設計工具
Figma: the collaborative interface design tool 共同協作的介面設計工具

網頁設計:Figma

簡介:Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

說明:用途相當多元,雖然此軟體原本是被定位在協作的 UI 設計上,但我廣泛用在打造網站地圖、Wireframe 線框圖、網頁視覺設計、流程圖,以及與客戶、團隊共同協作編輯的使用上。達到遠端開會高效率、大幅降低溝通成本與時間成本,並且是我大腦「記憶的延伸」,可以放很多筆記在裡面,太強大啦!用了 Figma 之後,就回不去了!(以往使用 Photoshop、Sketch、Axure 都沒有這個來得驚嘆)

連結:前往瀏覽


常見問題(2021 持續累積中)

Shopify 如何串接台灣金流和電子發票?

Shopify 付款方式,針對台灣市場

以下提供參考,若您有試用過覺得好用或不好用的金流或電子發票的服務也歡迎留言分享喔!也可參閱 Shopify 官方說明:台灣可使用的付款接收方式

金流

1. PayNow立吉富線上金流(含電子發票)

簡介:TapPay 提供 Direct Pay (信用卡快速付款)、Apple Pay、Google Pay。其特色為,免跳轉結帳頁面、一鍵支付快速結帳、定期定額自動扣款、確保交易安全、偽卡風險控管、銀行優惠費率、快速串接 Apple Pay 及 Google Pay。TapPay 將結帳速度及購物體驗完美並存,不只解決金流串接,還能針對使用者體驗進行優化,使你的消費者對於你的電商網站黏著度更深、轉換率也更高,回購次數也更頻繁。

Shopify x PayNow:前往瀏覽
備註:聽官方客服說超商快取和純取貨都可以設定,但「冷凍快取」目前還沒有跟 Shopify 串接,或許可以等之後推出。

2. 綠界科技ECPAY(含電子發票)

簡介:綠界科技 ECPay 與 Shopify 國際電子商務平台攜手合作,轉型電商產業不受限、跨境電商沒問題。整合金流、物流、電子發票等加值服務,不限身分皆可申請,跨國開店不再是難事!

Shopify x ECPay:前往瀏覽

3. HiTRUST | HiTRUSTpay

簡介:HiTRUSTpay 電商金流機制提供與信用卡收單銀行的金流介接服務,線上刷卡交易資料傳輸全程以 256 位元 SSL 安全機制保護,同時支援 EMV 國際組織 3DS 驗證機制(或稱 3D Secure)

HiTRUST:前往瀏覽

4. TapPay

簡介:PayNow 線上交易價金信託保管是立吉富線上金流、凱基銀行、遠東銀行、彰化銀行與聯合簽帳卡中心等知名企業為國內地區所量身訂做的線上付款機制。以先進的技術、風險管理以及客戶服務等能力運用在電子商務上,研發適合國內的電子商務市場與環境,為國內的電子商務交易提供安全、便捷、方便的交易支付工具。

Shopify x TapPay:前往瀏覽

電子發票

1. 台灣發 Taiwan Invoice

簡介:開立電子發票總是令台灣的 Shopify 商家感到相當困擾,我們需要花費大量且重複的時間在開立電子發票上,例如: 輸出 Shopify 的訂單資料、調整表格欄位以符合上傳格式、到不易使用的發票系統後台內上傳開立檔案… 等。台灣發 (Taiwan Invoice) 的使命是讓商家更專注於自己的商品與品牌,減少重複且易出錯的行政流程。

Shopify App:前往瀏覽

2. 台灣物流超商取貨電子發票

簡介:支援台灣超商取貨、電子發票,提高消費者轉單率、節省超商訂單與發票處理作業時間。

Shopify App:前往瀏覽


網頁速度分數一直不高,怎麼辦?

Google PageSpeed 一直以來都好嚴格,很多美國高科技公司的網站也很難通過 Google 的及格分數(假設我們設定 60 分為及格,滿分為 100),所以真的只能盡力,且當參考值即可。

通常我會先用此兩個測速網站測試一下網站速度:

  1. Pingdom:https://tools.pingdom.com,設定目標:看能否至少達到 80 分以上
  2. GTmetrix:https://gtmetrix.com,設定目標:看能否至少 B 以上

這些測速工具都可以用用看,其中最有價值的是他們會列出「可以優化的項目」,可以先從最好著手的地方開始,例如很多架站的人最常畫略的「圖片優化」事項。Shopify 官方文件也可以閱讀一下,有分能控制和不能控制的部分,如文件說明,改善線上商店速度

我其實也遇過很多網站圖片沒有經過優化與裁切,就直接將攝影師的原始檔上傳到網站中,這就會造成網站主機的負擔。所以通常在檢查網速時,第一個我會先檢查該網站的圖片使用方式。

很多人都說理想是在 100KB,但在實作上真的太難了!所以我的原則是:一張至少不要超過 1MB (1MB = 1000KB)記得都要去 TinyPNG 優化一下,我之前有一篇文章有分享:如何製作與優化網頁圖片?

若是自己架站,則可以控制的部分就滿多的,例如用 WordPress 架站,並且自己購買主機,會有很多快取外掛和主機端的設定方式可以試圖去解決很技術的問題。下圖提供參考我每次執行任何一個任務時都會紀錄、研究、分析過程:

使用常見工具進行網頁速度測試:此為 WordPress 網站
使用常見工具進行網頁速度測試:此為 WordPress 網站

Shopify 的確還可以再研究看看有沒有其他「較容易」的方式進行網站速度優化。最後有關「網站瀏覽體驗」的問題:

  1. 第一個動作:先連去網站上實際體驗,是否真的瀏覽感覺很慢,然後請朋友測試看看,最後再找實際的 TA 所在的國家或城市瀏覽看看,「至少這個實際體驗不要感覺很慢」
  2. 第二個動作:使用用測速工具,然後根據所列的項目能優化的部分先優化,不能的部分或很技術的部分再請在此經驗很多的工程師分析看看

問官方 Shopify Support,看他們如何建議
找有提供此服務項目的 Shopfiy Expert,看他們有沒有好建議

是否直接找外包進行網站的客製化功能或客製化設計?

  1. 客製化網站功能要找工程師(可能是前端或後端,依需求評估),但在找工程師之前,先研究有沒有 Shopify App 可以滿足需求。
  2. 客製化網站設計通常可以找網頁設計師,但要看是網站的哪些部分以及未來容不容易維護,不是所有部分都建議進行直接修改(例如有些會牽動到 Shopify App),若貴公司沒有會寫 CSS 的設計師或工程師,則不建議進行過度客製化的程式碼修改,不僅帶來維護上的費時費力,且效益不大。若在現階段沒有足夠的人力資源,可先以打造核心產品或服務、行銷策略為優先,網站互動特效、精美的視覺為後。

Shopify 網站的結帳頁(Checkout page)可以多出自訂欄位(Custom field),讓消費者可以留言?

不行,目前只有使用 Shopfiy plus 方案才能客製化結帳頁面。相關討論可以參考官方討論區:Custom field at checkout

有些 Shopify App 會提供試用期,每次按開始試用的時候,會顯示「x 天之後以每月 x 元價格訂閱」的確認頁面,如果在試用期結束之前刪除應用程式,是否就不會自動收費?

基本上是。

即使如此,盡量還是先找該 Shopify App 的文件說明,通常會有提供移除時應該注意的事項,以及附加說明移除後就不會產生費用。

Shopify 文件說明:Some apps modify the theme of your online store. You should check to see if the app requires additional uninstallation steps before you remove the app from your store.

為了測試功能,不斷安裝與移除很多的 Shopify App,這樣做會造成什麼問題?

有些 Shopify App 移除後產生多餘的程式碼或檔案,未來「可能」會影響到其他的 App 使用、造成網站部分頁面「壞掉」,因此會需要額外的步驟才能「完整移除」,例如移除 PageFly 時,會需要進入程式碼區進行刪除檔案,請看說明

分享一下我第一次發現有這種問題(如下圖),例如安裝了 Shopify App — Locksmith 但用不到了,照理說要按照官方的移除說明完整移除 App,但來不及了,所以只好進入程式編輯器手動修改,超麻煩!我有將「事後免搶補救」的執行步驟記錄起來,前往瀏覽

沒有完整移除 Shopify App — Locksmith 的結果,造成的殘留程式碼
沒有完整移除 Shopify App — Locksmith 的結果,造成的殘留程式碼

購買 Shopify 版型後會有內建的字體,這些字體也可以用在其他地方嗎?

說明:字體的版權有分電腦(Desktop)、網站(Webfont)、App、電子書(ePub)等等,可以參考 MyFonts 的版權購買方式。例如若你只有購買該字體的網站版權,就不能在網站以外的地方使用。

Shopify 官方回應:通常官方提供的免費 Shopify 版型(Free Shopify Themes)和 Shopify Font Library 所列的字體都可以使用在所有 Shopify 的線上商店中。而若購買的是第三方公司提供的版型(例如在 Themeforest 購買),則要確認購買合約中提及的字體使用範圍。

而 Shopify 有跟 Monotype 合作提供商家使用其公司的版權字體,但這些 Monotype 字體只能使用於所有在 Theme Store 中的 Shopify 版型中,不能使用在其他地方,亦即你必須在 Monotype 網站購買版權才行,也可以考慮 Adobe 的 Typekit。(參考:Hundreds of new fonts now available across Shopify

參考 Shopify 社群問答:Font Copyright (Usage in Pictures and Videos)

另外,若真的有非常想用的字體但要付版權費,而沒那預算的話,可以考慮直接 Google Fonts。例如很熱門使用的標題字體 Helvetica Neue,可以考慮用 Google Fonts 的 Roboto 替代。要找出替代字體的方式可以在 Google 搜尋關鍵字如 Helvetica google font alternative,就會有很多推薦可以參考,如 10 Free Google Font Alternatives to Popular Fonts

在 Google 搜尋關鍵字如 Helvetica google font alternative
在 Google 搜尋關鍵字如 Helvetica google font alternative

最後,提醒一下在使用字體時要嚴謹,不要心存僥倖囉!參考兩篇文章:被吉發函的創作者,字型廠商恐成最大贏家?創作者避免字體侵權的攻略YouTuber 拍影片用華康字型被追討授權費,可商用免費字型報你知

如何確認 Shopify 的主機連線狀態

畢竟 Shopify 有自己的主機,若想知道主機有沒有出問題或連線中斷等,可以到 Shopify Status 查看,右上角還可以登入,直接看你的 Shopify 網站有沒有連線問題。

Shopify Status — Check Shopify Server Status 主機連線狀態
Shopify Status — Check Shopify Server Status 主機連線狀態

如何設定產品頁「加入購物車按鈕」的連結和按鈕文字內容?

需求描述:如何將產品頁的購買按鈕設定自訂連結和編輯按鈕文字。

Shopify App:AOD External Links Button

簡介:Add Button to External links like Walmart, Ebay, Amazon & more

Shopify App:Outlink External Links Button

簡介:External button links | Affiliate link | Amazon Walmart Ebay

產品無庫存了,如何設定「貨到通知」?

一是通知消費者,產品可以買了、已經補貨了;一是通知商家庫存快沒了,需要補貨。根據此兩種通知進行分類,以下分別列出可以參考使用的 Shopify App,注意價格和限制,並實際試用安裝,才有辦法確認比較符合目前需求的方案。

對消費者 Customer

需求描述:產品若已經完售了,使用者可以在產品頁上點擊一個按鈕叫做「貨到通知」,留下信箱或手機號碼後,而當商家又補貨時,消費者會透過電子郵件、簡訊等收到通知。

功能:產品缺貨,一旦商家補貨,就會通知消費者。

Shopify App:Back In Stock ‑ Restock Alerts(推薦)

  • 概述:Send Back In Stock notifications on Email,SMS,Push & Messenger
  • 評價:4.95 顆星 (625 評論)
  • 提供免費方案。 7 天免費試用。
  • 前往安裝:連結
  • 官方文件:連結
  • 版型整合 Theme Integration:與很多官方和熱門版型相容,如 PrestigeWokiee 等(此處的「整合」意思是安裝完 App 後會自動設定完成,不用手動安裝或請官方協助安裝)
  • 備註:也可以升級到 Enterprise 方案,就可以開啟產品數量快見底時,通知 Store Owner

Shopify App:Back In Stock: Customer Alerts

  • 概述:Notify your customers when products are restocked: Email & SMS
  • 評價:4.95 顆星 (393 評論)
  • 提供免費方案。 14 天免費試用。
  • 前往安裝:連結
  • 官方文件:連結
  • 版型整合 Theme Integration:已整合的 Shopify 版型(但似乎有一些沒有被列表出來,所以可以安裝此 App 後去後台看看)
  • 備註:安裝時有些版型有整合過,所以可以自動安裝。而其他版型可以手動安裝或請官方協助。

對商家 Store Owner

需求描述:產品若已經完售了,使用者可以在產品頁上點擊一個按鈕叫做「貨到通知」,留下信箱或手機號碼後,而當商家又補貨時,消費者會透過電子郵件、簡訊等收到通知。

功能:產品快沒貨了,會通知 Store Owner

Shopify App:Notify Me

  • 概述:Get notifications for out of stock products
  • 評價:4.55 顆星 (130 評論)
  • 前往安裝:連結
  • 每月 $4.99 起。 14 天免費試用。 可能需支付額外費用。

如何在 Shopify 設定多組優惠碼?

需求描述:能否同時套用一組以上的優惠碼?目前 Shopify 每張訂單最多只能使用一組優惠碼。

Shopify App:Stack Discounts(設定超快,不到五分鐘)

  • 評價:5.0 顆星
  • 實際使用經驗:目前用過最簡單、最容易安裝和設定多組優惠碼的 App,功能非常非常單純,主要使用 Shpoify 新增 Discount codes 即可。可以限制使用幾組優惠碼、最多折扣的金額或 %。若使用的版型沒有安裝成功,可以尋求官方協助安裝。
  • 前往安裝:連結

Shopify App:Discount Ninja(功能較多,設定複雜頭痛)

  • 評價:目前 4.2 顆星
  • 實際使用經驗:其中一個功能竟然可以同時使用一組優惠價折扣碼和免運費折購碼。評價不錯,其中有兩個功能可以再確認一下,就是使用多組優惠碼
  • 前往安裝:連結

因為看到其描述可以使用多組優惠碼,所以想來測試一下:

  1. Discount stacking: The ability to combine multiple discounts in a single cart
  2. Cart promotion code field: Allow customers to enter (multiple) promotion codes on the cart with our custom discount field

重要功能測試:Stack promotions and Shopify discount codes at checkout(官方文件:Checkout discount fieldStacking Discount Ninja promotions and Shopify discount codes

但可惜的是,這款也跟 Shopify App — Sales Rocket 衝突,導致使用時 Cart page 的新增 Coupon 欄位無限迴圈,無法正常使用!意思是:

這款 Shopify App — Discount Ninja 的確可以符合多組優惠碼的使用,但,要注意是否會跟其他功能類似的 Shopify App 相衝突!只能二擇一的意思囉!

注意事項

  • 是否與安裝的版型(Shopify Theme)相容?若不相容,則需要手動安裝或請官方幫忙安裝程式碼,有免費和付費方式。
  • 這款跟 Shopify App — Sales Rocket 衝突,無法同時運作(之後再找時間驗證一次)

Shopify App:Discounts Combine

  • 評價:這款 App 或許能解決,但評價不高,目前平均才三顆星,且近期負評很多。
  • 實際使用後:限制的確不少
  • 前往安裝:連結

實際使用後:限制的確不少

  1. 必須在 cart page 執行,且不能在 checkout page 運作
  2. 此優惠碼在 Shopify 本身建立時必須設定不被限制使用一次
  3. 這款跟 Shopify App — Sales Rocket 衝突,無法同時運作

如何針對不同語系的網頁分別設定最佳字體?

一般我們想將網站例如 Shopify 或 WordPress 等建立多國語系,會想要針對不同國家設定適合該語言最適合的字體,才會獲得在網頁上的最佳顯示。例如繁體中文使用 Noto Sans TC,簡體中文用 Noso Sans SC,英文或許就用 Roboto 等之類的設定。

設定方式

但實際執行會面臨到一些問題,以下兩種情況列出解法:

  1. 若是每個語系分別建一個站,那就分別設定字體即可,沒什麼大問題。
  2. 若是一個網站透過 Shpoify App、外掛或純程式撰寫的方式建立的多國語系,則會需要一些語法幫助執行。以 Shopify App — Translate My Store 為例,安裝完之後的確可以設定多國語系,但似乎大部分這類的翻譯 App 都沒有這個功能:「針對不同語系設定不同的字體」。若你在使用的時候發現是這種狀況,則可以透過 CSS 語法針對多國語系的網頁分別進行客製化設定。

網頁中的標籤 html 若有屬性 lang,則可以執行,通常安裝完多語系 App 就會出現(若沒有的話,就…要再想想了),範例語法如下所示:

/* 針對 US 美國頁面設定 CSS */
:lang(en-US){
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif
}/* 針對 TW 台灣頁面設定 CSS */
:lang(en-TW){
font-family: "Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}/* 針對 CN 中國頁面設定 CSS */
:lang(zh-CN){
font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;

可否在 Shopify 電商網站銷售產品,且只使用 Amazon 的 FBA,但不再 Amazon 網店上架產品?

官方客服回應是可以的:You can use Amazon FBA even if you are not selling on Amazon, as in just for the fulfilment? Sure! 參考文件:Fulfillment by Amazon

只使用 Amazon 的倉儲和物流但不上架產品到 Amazon 網站上,可用 Amazon 的 MCF(Multi-Channel fulfillment

Fulfillment fees(per unit)
Fulfillment fees(per unit)

*若有名詞使用錯誤的地方歡迎跟我說喔!感恩!
*亞馬遜物流 Fulfillment by Amazon,簡稱 FBA

架設在美國的 Shopify 網站,可否在網站後台設定一個在美國以外的倉庫是手動出貨,第二個倉庫是使用 Amazon FBA?

情境:若購買者是美國當地的消費者,則由位在美國的 Amazon FBA 出貨;若購買者是美國本土以外的消費者,則由位在其他國家的某自有倉庫自行手動出貨

答:待研究……

已更新 Shopify 網頁內容,但到頁面瀏覽時卻還是舊的內容

Shopify 網站會有快取(Cache)功能,若發現剛編輯完頁面內容並儲存後,結果回到網頁上發現內容沒有變,那可以使用 Command + Shift + R 清除快取刷新頁面(Windows 使用者:Ctrl + Shift + R),一兩次以上測試看看,應該就沒問題。

此方法適用於一般網站,例如有裝快取外掛的 WordPress 網站或使用有預設快取功能的網站主機架站。

如何提高 Shopify 網站的安全性?

若網站業績越來越好、消費者資料也越來越多,應該會開始很怕網站被駭?至少可以考慮「開啟雙重驗證」當作最基本的防護。其他網站防護相關的 Shopify App 文章參考:5 Ways to Secure Your Shopify StoreThe Best Shopify Security Apps — 6 Apps To Ensure Your Store Is Secure

更多的問題持續整理中…有想了解的主題也歡迎留言、訂閱或寄信給我,我會再找時間研究看看囉!(最近爆忙,但會繼續分享我的實戰經驗!大家一起學習吧!衝一發!)


Shopify 有趣的特色功能(挖掘中…)

詐騙分析

說明:Shopify 有個滿有趣的功能!(其他架站平台應該沒有?!)後台每一筆訂單頁面右下方有個「詐騙分析」的資訊欄位。訂單的完整分析資料會列出所有指標。這些指標會以綠色、紅色或灰色圖示標示,藉此幫助您辨別不同的行為類型。

Shopify 的訂單頁面有「詐騙分析」資訊欄位
Shopify 的訂單頁面有「詐騙分析」資訊欄位

可查閱官方文件說明:詐騙分析,竟然還有很多防詐騙的 Shopify App 可以安裝使用。

若你身邊的朋友也想要學習 Shopify 架站或網站設計,歡迎分享此篇文章給他們呦!讓更多人熟悉 Shopify 強大的生態系,逐步在臺灣發展更成熟!

網站設計文章訂閱

歡迎訂閱我們的電子報,不定期更新內容包含「網站設計與架站的實務經驗分享」、網站設計流程與規劃,前往訂閱去!Let’s GO!


我的文章分享

♥ 這些年我做的 RWD 網頁設計
♥ WordPress 外掛推薦精選(2021 最新)
♥ 用兩個月打造 Shopify 電商網站(2021 持續更新)
♥ 如何客製化 Shopify 網頁設計排版(2021)
♥ Shopify 網站設計流程與時間規劃
♥ WordPress 網站設計流程與時間規劃
♥ 如何製作與優化網頁圖片?

有任何想問的問題,歡迎留言或寄信給我 irving520@gmail.comFB 粉絲團,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:前往瀏覽

Post a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *