用兩個月打造 Shopify 客製化網站設計 2024

從零開始學習用兩個月建立 Shopify 跨境電商網站的實戰經驗，正在邁向進階的路上！透過不斷執行與測試整理出來的實戰筆記，無私分享資源，包含 Shopify Theme 版型精選、Shopify App 精選，內容會持續更新，為 Shopify 台灣在電子商務網站設計貢獻一點心力！實戰學習才會扎實，有問題就加入 Line 的 Shopify 學習社群，一起交流進步！（更新時間：22024/04/24）

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

之前 Shopify 有一個教學影片：如何建立一個電商網站，片長不到 25 分鐘，步驟講解清楚，有點不可思議，但真的半小時就完成了！

從影片中會讓人以為就這麼簡單？是真的，但實際上老闆的需求或我們自己的需求就僅此於止？當然不。Shopify 平台本身預設的網頁客製化功能沒有「期望中」那麼高（這是相對於用 WordPress 架站來說，基本上還是遠勝於其他電商架站平台），使用上還是有諸多限制，所以我們需要想辦法解決這個問題。（註：該影片已經被官方拿掉了 XD”）

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

若是 WordPress 版型架站建議盡量使用原本版型預設的功能，而不建議過於改造原本版型的程式碼，影響其日後更新，除非未來版型不想再透過官方更新了；而 Shopify 版型其實不用更新過於頻繁，更新時也會牽動到很多原版安裝好的 Shopify App 程式碼等，轉移時相當麻煩，個人是認為除非版型升級會有重大的進步，否則兩三年以上升級一次是絕對 OK 的。

若版型未來都不更新而自行客製化大改造或許還可以，但 WordPress Plugin 和 Shopify App 的核心程式碼則不太可能去動，這些外掛的開發商都會持續更新，若真的有想法回饋直接聯繫開發商請他們優化與打造新功能囉！只是單純寫些 CSS 設計樣式，更新後出問題還比較容易解決，但別直接更改運算邏輯，例如寫 JavaScript 擅改該外掛的核心程式碼。

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

---

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

開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱

網站架站平台客製化程度（由高至低）

• WordPress：客製化程度極高，有海量的版型、外掛、教學資源 ，全方位架站從部落格、形象網站到電商網站，全都包起來！初學者到進階使用者、開發者、網頁設計師都可以盡情使用，打造方寸的個人化設計與功能，但也因為可以客製化的程度非常高，了解後續維護的難易度，再加上 WordPress 主程式本身、版型和外掛本身的相容性、與更新後產生的問題都是維護此網站需要費點心力的地方。PS. 這裡指的是 WordPress.org 而不是 WordPress.com
• Shopify ：客製化程度中等，以架設電商網站為主，重點在於電商的安全性與開方式生態系的擴充功能，程式碼編輯和版型備份容易上手，Shopify App 滿多需要訂閱付費的（部分功能可以先用免費版也不錯），整體的介面也比 WordPress 少一點複雜，畢竟有相當的限制。對一般人、設計師、工程師都很友善，全部一起合作使用沒問題的。可以確定的是 Shopify 目前是要將產品賣到國外的唯一首選跨境電商平台，且全球市占率和使用者滿意度目前皆為第一（如下圖所示）
• Webflow：如果不使用 WordPress 或 Shopify，我還真不知道該找哪一個架站平台作為長久經營的網站，最近我開始測試 Webflow 之後，真心覺得 Webflow 對「網站初學者」、「想轉網頁的平面設計師」不友善，頁面編輯器琳瑯滿目、密密麻麻的設定選項，看了眼花撩亂，尤其選取任意元素時所顯示「詳細徹底」的「視覺化 CSS 欄位」直接讓人退避三舍。Webflow 常常拿「動態特效的網頁 Demo」來大肆宣傳，我自己也被吸進去，但還好有免費方案可以實際測試，確認不會想繼續使用。單純 PK 頁面編輯器（Page Builder），WordPress 和 Shopify 的選擇都超過 10 種以上任君挑選，而 Webflow 就一種，沒得選。
• 即使像我非常熟悉 HTML/CSS 和擁有數年的架站平台使用經驗，我還是不會想將 Webflow 作為「主力」，若真的要用一下下，或許可以當作助力行銷宣傳頁面用途。結論：可以 100% 確定的是若要經營電商網站販售商品或經營部落格內容 SEO，都完全不推薦！
• Squarespace、Wix、Weebly 客製化程度極低，基本上選好版型後就不用有過多的期待，若要長期經營部落格 SEO 或電商線上銷售也不建議。即使他們有提供付費版升級功能，也很難跟 WordPress 和 Shopify 並駕齊驅。且即使我拿 WordPress.com（非 WordPress.org）最便宜的兩個方案月費都比 Squarespace 和 Wix 最基本的方案還便宜 2-3 倍以上，紀錄時間是 2024/03/16，當然，他們是也有提供最基本頁面範本，若想簡單用一用也是可以的。但若真的對於品牌設計或 SEO 內容經營有相當的要求、對於網站想要長久經營且不斷持續可以優化的話，我是不會使用這些平台作為主力的。

以上平台都是相互比較而言，或許你在使用某個架站平台就覺得算滿足需求了，那就 ok 沒問題！因為真的端看人力、技術、資源、時間、成本而定，選出現階段最適合自己的方式。

爾文選擇：若以我的角度來執行，品牌形象網站、部落格主要用 WordPress，電商網站用 Shopify，僅供參考之。

---

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

注意事項：很多在門外觀望的使用者，其實不知道無論是 WordPress 或 Shopify 的版型或外掛皆琳瑯滿目、五花八門，而我們要了解商業世界中的行銷語言：每個都說自己的功能多強、評價多高，但，等你真的去安裝使用後會陸續發現「意想不到」的問題需要解決，而且很有可能一個問題會帶出更多的問題，並沒有想像得輕鬆！終究還是需要親自去測試與修正，找出最佳組合才能讓網站順暢運作。

下方投影片是我在 2022 年一場 Shopify Meetup 小聚分享的內容，概要簡介「Shopify 網站如何客製化設計」，我著重在「設計」而非只是「網站建立」而已，若想要另外了解如何更自由地進行網頁排版與配置（Shopify 平台本身在這個設定上的預設功能相當陽春），可以參考此篇：如何打造 Shopify 電商網站客製化設計排版

Irving 爾文的實戰分享 Shopify Meetup 2022 – Irvinglab 爾文實驗室

---

Shopify Markets 國際商務未來趨勢

說明：根據官方網頁 Shopify Markets 的說明，您的全球版圖，我的商家標配。有了 Shopify Markets，只需單一商店，就能輕鬆上線暢銷全球客群。可以觀看一下 Shopify CEO 的專訪新聞，在這我先簡單整理出頁面說的幾大功能：

• 為您備妥全球銷售一切所需：Shopify Markets 能為大小商家簡化全球拓展作業，讓事業成長易如反掌，也不增加工作負擔。
• 依市場需求打造購買體驗：提供消費者熟悉的購買體驗，讓國際顧客能更輕鬆地瀏覽與購買商品，使您在每個市場都能更快成交。
• 幣別多元：將您的標價換算成超過 133 種當地幣別，方便國際顧客購物。
• 語言無礙：翻譯商店內容，為國際顧客提供自在輕鬆的購物體驗。
• 網域有別：以相關的語言和幣別向世界各地的顧客展示商品。
• 稅款透明：結帳時自動計算進口費用，讓顧客清楚瞭解總金額，不會在配送期間才發現需支付額外費用。
• 付款方式便捷可靠：讓顧客使用熟悉且直接安全的方式付款。
• 進軍全球，行銷有據：我們的數據導向式設定，能自動提升轉換，創造更完善的顧客體驗，快速最佳化您的國際策略。

今年 Shopify 夏季大更新又來了：Shopify Editions | Summer ’23 – 深度擁抱 AI，如下 YouTube 頻道發布會 ，相當精彩很令人期待！回顧去年 Shopify Editions | Summer ’22

---

進入本文重點，用 Shopify 打造電商網站是我幾年前剛進公司得到的任務，那時完全沒用過 Shopify，很多時候會在其後台尋找 WordPress 的影子，進而發現以往隨心所欲打造網頁的自由度不復存在，意思是被限制在極少的設定選項，無法任意新增區塊和任意排版。

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

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

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

今年我正陸續籌劃錄製 Shopify 一些相關的實作教學影片，若你希望第一個收到通知，可以在下方訂閱 Irving 爾文實驗室的電子報

快速入門 Shopify 架站

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

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

到了 2022 還是 2023 年開始，Shopify 的定價有變更，Basic 方案改為每個月 19 塊美金， 且無須提供信用卡資料，免費試用 Shopify 3 天，更棒的事開始方案後，前三個月每個月只要 1 塊美金，三個月過後也才 3 塊美金！真是佛心來著，可以好好試用一下，學習與了解後台的時間是滿充足的！

對了，有個很重要的事情需要先說明，就是選擇網域建議到全球最大最主流的 GoDaddy 平台購買，然後再串接到 Shopify，設定速度超快。因為 Shopify 平台本身就有與 GoDaddy 整合，若是在其他平台購買網域的大部分都需要設定 DNS 什麼的，挺麻煩！有些人也會卻步。然後也不建議直接在 Shopify 平台本身購買網域，之後若要遷移網站或不想使用 Shopify 時，網域會被綁定在平台中。所以網域和架站平台分開單獨選擇比較理想。若有網域選擇障礙或相關問題也歡迎寄信給我或透過社群或網站右下角的對話視窗傳訊息給我。

開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱

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

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

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

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

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

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

目前 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 操作介面設定影片教學，有很多時候基本的操作介面都可以在上面找到解答，非常清楚易懂。
連結：前往瀏覽（英文版），近期剛推出新的繁體中文 YouTube 頻道，但目前影片數還很少，未來應該會陸續增加。

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 相關問題，更有效率地大量吸收可能會遇到的問題。
連結：前往瀏覽

關於 Shpoify SEO 的實際執行方式，前往閱讀我剛出爐的文章：Shopify SEO App 推薦：Yoast SEO 實戰教學

如果是想要多了解 Shopify 程式語言 Liquid 的話，可以閱覽 Shpoify Partners 的官方部落格：Learning Liquid、YouTube 頻道：ShopifyDevs、Shopify 官方 Liquid 文件、Shopify Liquid GitHub，或直接瀏覽 Shopify Open Source Software Projects（這資源有夠棒的！）

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

---

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

Shopify 幫助中心 — Support channel

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

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

Shopify Support on Twitter

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

我在學習操作 Shopify 架站的過程中，應該有一半以上的時間都是靠著跟他們「在 Twitter 開聊天室」迅速得到答案和很多額外的資源如他們時常提供文章網址連結、影片連結等。Shopify Support 也有自己的 Linkpop 頁面，網址：https://linkpop.com/shopifysupport，可以快速連結其相關資訊：如 Contact support、Check our status page 等，相當便利，就不用每次都要到官網翻找或是 Google（雖然 Google 關鍵字也滿方便的 ^^）

備註：Linkpop 為 Shopify 官方自己推出的 Social Bio 一頁式網頁，通常可放在如 IG、Twitter 等社群媒體的簡介中

Shopify 幫助中心的 AI 助理（Shopify Help Center Assistant）

隨著 2023 年 OpenAI 推出的 ChatGPT 使得 AI 應用大爆發，在全世界廣泛的被應用在各種商業服務中，順勢而為，Shopify 在 Help Center 網頁中新增這個 AI 助理，可以隨時回答使用者的任何問題，勢必能大大降低他們客服人員的負擔了吧 ^^

Shopify Help Center 英文版：https://help.shopify.com/en

以後有問題可以狂問且客服回覆速度更加快速了？！實測發現其實還是跟真人回覆的有些差異，所以真人客服和 AI 客服就同時使用，互補有無！目前英文版網頁有推出，中文還沒有，所以若要使用的話，可以去英文版，然後不用擔心，因為輸入中文也可通！例如問了個問題：Shopify 2023 年推出的新功能 Metaobjects 還不能在後台簡單的直接輸出，只能先使用 Shopify 的 Metaobject API 才行（Shopify AI 助理回覆），這功能我其實也在觀望中，剛推出想說先暫時不使用得太深，等其持續優化並更成熟後再看看

線上雇用 Shopify 專家（Hire trusted experts）

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

我自己還沒用到 Shopify 官方提供的專家服務，或許未來有更重大的需求或困難會考慮使用。而關於這個，我是有用過另外一個成立於美國的外包平台 Upwork，當時需要的小功能是將 Shopify 的產品頁的縮圖區顯示方式改成 Slider（我們選的免費版型預設是沒有水平方向的 Slider），於是找了一位熟悉 Shopify 開發的印度工程師，過程滿順暢的。溝通方式是透過平台內的交談工具，在電腦上和手機上安裝 Upwork App 隨時可以聯繫，對方還會截圖講解與詳細列出設定的步驟，但是但是，這樣程式碼客製化的結果造成一個很麻煩的問題：我們交接之後很難維護，而且對方給的設定步驟看似詳細，其實還是相當麻煩，繁瑣的程序造成內部團隊直接移除不用，改採用 Shopify App 比較實在（例如產品輪播圖 Slider Product Image Gallery & Zoom 或 GG Product Page Slider&Gallery by Gigilabs），不僅功能設定更多、執行效率提高，且交接時順暢至極！所以哎，若真的某個大功能重要到非得請工程師打造，不然很多小功能或樣式設計其實可先以找 Shopify App 為主要解決方案，然後請網頁設計師寫 CSS 局部修改即可，大幅降低未來更新的問題。

我也時常在 Irvinglab 爾文實驗室的 Twitter、Instagram 和 Facebook 分享大量的相關 Shopify 網頁設計實作經驗或相關資訊等，歡迎追蹤 ^^

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 生態系」

但下列兩項 Udemy 課程內容太基礎了，所以不是真的非買不可，直接註冊 Shopify 帳號搭配此篇文章開始摸索學習會比較實際！

課程 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 或手機帳號才能登入。

---

Line 社群（台灣）

歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理。有任何關於 Shopify 網站設計與建立的問題都可以在社群中發問，而有些問題則已經很多人發問過了，例如金流，所以加入社群後，可以搜索關鍵字「金流」，快速瀏覽其他人曾經提出的想法與經驗分享，幫助你判斷時的依據。

---

Learn With Shopify

說明：直接觀看 Shopify 官方 YouTube 影片頻道：Learn With Shopify，主題分類相當廣，除了建立電商網站之外，還有其他有關電商經營策略和行銷方法等，相當多元。播放清單有：Build A Shopify Store、Product Ideas、Business Ideas、Opeartions and Logistics、Marketing、Business Strategy、Build A Brand

---

What’s New at Shopify?

說明：看一個平台是否在更新、進步和維護，才能讓使用者安心是否可以長期使用與投資時間在其上面，看它有沒有「公開展示」更新的資訊就能探知一二，Shoipfy 在 Chnagelog 頁中不斷新增關於優化的部分與新增的功能特色列表，相當清楚，對於熟手而言還可以隨時知道有什麼新的功能可以使用，頁面右邊還有資訊所屬分類可以篩選，進去瀏覽看看吧！前往：What’s New at Shopify

---

兩大 Shopify 資源庫（逛街採購時間）

Shopify Theme（選擇網站版型）

簡介：Ecommerce Website Templates — Free and Premium Themes for Your Online Store.
說明：版型設計算是不錯看了！選擇性真的滿多的，除了提供基本功能與排版的免費版型外，付費版型提供更多樣的設計樣式，普遍來看平均落在 $180 美金上下（實務上來說，我不會選擇免費版型，因為功能太陽春了！版型是一次性付費的，所以選購一款版型是值得的）
連結：前往瀏覽

Shopify Themes and Templates – ThemeForest（選擇網站版型）

簡介：還有一個相當推薦的平台 Themeforest，瀏覽其所擁有的 Shpoify 付費版型：Themeforest — Shopify Themes，非常推薦在這裡選購，因為其版型所提供的功能和排版功能相比官方來說顯得更具客製化與彈性，之後打算陸續選購幾個深入研究！（後面有精選清單，請繼續往下看下去）

購買 Shopify 版型前需要知道的事

無論是在官方的 Shopify Theme Store 或在第三方平台 Themeforest 購買 Shopify 版型，都要注意其不一定包含網站 Demo 所使用的 Shopify App。有些版型買了之後還需要另外購買月付費搭配的 Shopify App，才會有該功能。若確認是該版型的預設功能，才不用另外付費或選購。若想了解更多，可以在購買之前先瀏覽該版型的「線上文件」。以 Wokiee 版型為例，其使用文件為 Wokiee – responsive Shopify theme user guide，多瀏覽說明文件永遠是有利的！

在 Shopify 官方的 Theme Store 可以試用版型，試用後想買再付費即可。但在第三方平台如 Themeforest 大部分需直接購買才能使用，但其中還是有提供免費試用的如相當好用又有設計質感的 Minimog Shopfiy Theme。另外，一個版型只能安裝一個 Shopify Store 商店，詳情可參考官方文件：Adding, previewing, and buying themes

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

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

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

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

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

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

小訣竅：佈景主題語言翻譯、Notifications 通知翻譯

問題：使用部分的 Shopify 官方版型例如 Pestige 或第三方購買的版型中，該佈景主題語言本身預設沒有繁體中文翻譯（而其他版型有些有預設，就輕鬆了）

解法：另外安裝一個 Shopify 官方免費版型有繁中翻譯的，例如 Minimal，安裝完後不要發布，開啟路徑「網路商店 > 佈景主題 > 動作 > 編輯語言」，複製其中的翻譯到現在已發布的版型即可，可用雙視窗開啟並排執行較方便。Notifications 通知的文字內容通常只要更改佈景主題語言即可。

---

Shopify App Store（選擇應用程式）

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

例如專門打造網頁排版的 PageFly Advanced Page Builder 的 Gold 方案每個月 $39 美金（實際價格以官方發布為主，安裝後進入後台查看價格表比較準確），目前我常用到的就是這個方案，價格親民，花點小錢直接拿來學習和實際應用都很適合，用了至少一兩週以上一定會上手的！其也可以拿來建立轉換率高的登陸頁 Landing page、直接套用各式頁面模板等，前往瀏覽可以直接使用的各種頁面的 PageFly Templates，有任何設定的問題也可以直接來問我吧！我同時也訂閱 MESA 和 Store Leads 每週最新的 Shopify App 上架資訊以了解網站商店經營的可能性。

想了解更多 PageFly 網頁設計編輯器可以參考：如何客製化 Shopify 網頁設計排版、PageFly 初入門：快速建立 Shopify 網頁

如何選擇 Shopify App？

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

1. 功能滿足需求（若不僅滿足需求，又額外提供多樣功能尤其迷人）
2. 評論等級與評論數（至少 4 星以上，且評論數相對很多，例如有超過 50-100 則以上）
3. 安裝與設定的過程 UX 佳（包含線上客服速度、Onboarding 流程順暢、文件說明詳細、後台介面設計是否賞心悅目等）
4. 開發者時常在更新與優化 App（關注最新更新時間與更新 log）
5. 開發者在 Shopify 中的資訊顯示有幾年的開發時間（當然越多表示其可能對 Shopify 開發經驗更多、更熟悉）
6. 開發者網站有沒有在經營、部落格文章或其他社群媒體有沒有在更新內容、更新頻率如何等都可以看出一些端倪
7. 開發者網站本身的視覺設計如何（若真的不優，那對於其開發的 App 介面設計也不用太期待，我通常會跳過這類的 App，因為美好的視覺通常可以帶來美好的使用體驗，畢竟長時間使用，至少在「視覺上要賞心悅目」或「舒適」）
8. 選擇 App 我還會盡量選「能跨多種平台」為優先考量，表示我可以不受限於單一平台使用該 App，費用也不會因每個平台都被收一次，很傷荷包。跨多種平台可以使用在任一架站平台或自架，置入程式碼「都可使用」，這超讚！例如只是單純線上 Chat，我基本會以跨平台的軟體為主。ps. 但也有 App 想每個平台「分別都賺一波」，所以即使該 App 也針對跨平台如 Shopify 和 WordPress 都出外掛，但彼此無法共同使用
9. 其次我會考量更相容於該平台的 App，通常這種方式，登入該平台後會有其最符合該平台的介面、相容度更高等優點，且若該功能找不到跨平台，那就也只能選擇該平台專有的 App，例如選擇能非常能整合 Shopify 訂單、顧客資料等的電子報訂閱系統 Newsletter

🎄 各有利弊，各有使用情境，端看需求而定，沒有絕對好或不好，網站經營依不同分階段轉換也是一種常見方式

🎄 不同平台、不同使用情境會有多種稱呼方式：App / Plugin 外掛 / Saas / 軟體 / 線上工具

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

Shopify Theme 版型推薦精選

為何會考慮購買第三方平台的版型？因為這些版型不僅功能強大、價格也是 Shopify 官方的版型商店的一半左右，功能強大意味著可以少購買好幾個每個月要付費的 Shopify App，無論初期網站經營或長期來說皆可以省下不少成本。但要挑揀一下並驗證，看有沒有 bug 或其他問題產生，例如 Ella – Multipurpose Shopify Sections Theme 之前用有一些問題，但後來有推出新版本，之後再來檢查有沒有完善。當然，若覺得還是希望有 Shopify 官方認證，那就直接到 Shopify Theme Store 官方版型商店購買也可。

雖然說端看需求是什麼才能評估理想的版型有哪些，但可以確定的是，我是完全不使用免費版型的，功能太基本了。若選擇免費版型，未來勢必有可能會需要使用更多付費 App 來加強，成本並沒有降低，反而可能墊高。

一言以蔽之：若使用的是「官方免費版型」，則很多功能是沒有的，功能保持陽春可呼吸的狀態；若選擇「官方付費版型」，則功能會稍微多一點，但官方認證下費用滿不低的，大約落在 USD250 – 350；若選擇「第三方付費版型」，則功能會更豐富不少，是一場場饗宴，費用也比 Shopify 官方便宜不少，通常小於 USD 100

以下列出的 Shopify 版型列表和 Shopify App 清單都僅供參考，實際需要根據產業與自身需求去作選擇，請斟酌使用！也會抽時間統整於 Shopify App 和 Shopify 版型精選檔案（持續更新中）

ThemeForest – Shopify Themes and Templates（第三方優質平台）

🚀 Minimog – Shopify Theme

如果你希望使用 UX 使用體驗設計良好且視覺優質的 Shopify 版型，更甚者有熟悉此版型的網頁設計師與工程師可以詢問，那 Irving 爾文推薦 Minimog 版型，我已經實務上使用在數個不同的 Shopify 品牌電商網站中，目前我的滿意度為 4.5 顆星 ⭐️⭐️⭐️⭐️

Minimog 版型視覺設計簡約、功能卻很豐富，開發商不斷推陳出新，每個版本的迭代都有不錯的優化進步，很適合初入門的商家或進階使用的設計師和開發者使用，其程式架構的邏輯值得參考、網頁設計師容易整理 CSS 等程式碼。可以前往瀏覽 Irving 爾文執行的品牌網站案例：JE22、GWS、Urban Drivestyle、CUiRASÉX、Cloudvocal 雲聲、Le Moi-Peau 等。其也有推出幫助銷售的 Shpoify App：FoxKit – All in one Sales Boost，可以參考看看。

🎄 想了解更多 Minimog Shopify 版型特色與細節

• Kalles（團隊用過，不錯）
• Rubix（團隊用過，不錯）
• Zeexo（瀏覽過覺得優質，已先購買入手，待研究）
• Avone（瀏覽過覺得優質，已先購買入手，待研究）
• Wokiee（使用過，功能是多，但覺得後台介面的使用體驗比較辛苦，要找個項目設定花不少時間）
• Debutify（看過有電商網站用過，設計質感不錯、功能多合一超強大。但不是一次性付費的版型，而是訂閱費）
• ……陸續蒐集並實際研究測試

Shopify Theme Store（官方版型商店）

• Prestige（使用過，版型優雅別緻，還不錯。實際案例：JOWUA）
• Impact（滿有質感的官方版型，很多設計巧思在其中，相當喜愛）
• Motion（試用中，還可以，但 Slider 中的文字區塊位置能設定的不多，只能設定在左下角）
• Empire（看其他網站使用，看起來不錯）
• Boost（設計圓潤、很 Q 彈，列入蒐藏清單）
• Masonry（若希望網站選單固定在側邊欄，可以看看）
• Maker（用在化妝品產品呈現滿清新的）
• ……陸續蒐集實際案例

此 Shopify Theme 版型精選清單會不定時更新，同時附上獨立網址，方便大家蒐藏，可以隨時回來這個網站或直接瀏覽：https://share.irvinglab.com/shopify-theme-irvinglab

Shopify App 推薦精選

此份清單僅供參考，可以針對實際需求斟酌使用，如果有覺得不錯的 Shopify App，也歡迎隨時推薦給我囉！

• 網站頁面編輯器：PageFly Advanced Page Builder（激推，前往瀏覽現成的超過 100+ 的 PageFly Templates）、EComposer Landing Page Builder（近期發現這款，會找時間來研究一下）
• 產品敘述分頁：Tabs Studio（常用功能，免費版設定簡單又好用，顯示方式可以設定 Tab 或 Accordion）
• 插入程式碼：XO Insert Code（插入程式碼於 <head>、<body>、<footer> 之間，可方便管理所有網站追蹤碼）
• 多國貨幣：Currency Switcher by Secomapp
• 多國語系：Language Translate & Currency by Transcy（首推這款翻譯 App，相當喜歡，有一個限制：可以自動翻譯 PageFly 頁面的內容，但無法手動翻譯）、Weglot、langify、T Lab ‑ AI Language Translate（Weglot、langify、T Lab 這 3 款目前跟 PageFly 相容）、Translate My Store & Currency by Hextom
  • Language Translate & Currency by Transcy 常見問題
    • 若已經自動翻譯，再切換成手動翻譯可以嗎？可以的，手動翻譯的部分會蓋過自動翻譯。
    • 若我已經設定自動翻譯了，然後改成手動翻譯後，那還能不能再改回自動翻譯？可以，隨時都可。
    • 「手動翻譯」還是不能翻譯 PageFly 的頁面對嗎？還不能，目前 PageFly 頁面內容只能自動翻譯。
• SEO：Yoast SEO – SEO for everyone（Yoast 為老牌的 WordPress SEO 外掛，如今推出 Shopify App 相當值得期待！也解決了 Shopify 平台本身 SEO 設定的缺陷，例如終於可以透過 Yoast SEO 設定 Shopify 每一個頁面的社群預覽分享圖 Social sharing image 等，可以參考我這篇文章：Shopify SEO App 推薦：Yoast SEO 實戰教學）、SearchPie: SEO Booster & Speed（免費版可以大量編輯 Meta + ALT Tags、SEO Report 概要等）、Rich Snippets for SEO by Orbis Labs（這款下架了！Shpoify App 要慎選，有些廠商會下架）
• 貨到通知：Back In Stock — Restock Alerts、Back In Stock: Customer Alerts by SureSwift Capital
• 電子報 Newsletter：Mailchimp（推薦！可先至 MailChimp 官網註冊帳號，選擇免費方案，再去安裝 Shopify App for MailChimp。之前使用 ShopSync 才行串接，後來 MailChimp 跟 Shopify 又願意合作了 XD，直接推出官方版本，設定容易上手）、Klaviyo（崛起新秀，但在串接時沒有預期中來得簡單 ^^”）
• AB Testing 頁面測試：Instant ‑ A/B Testing（喔天！免費的 AB 測試）
• 結帳頁面再行銷：qikify Checkout Customizer（滿推薦的！因為用這個就不用升級到貴鬆鬆的最高方案 Shopify Plus 就可以新增功能在結帳頁。使用 qikify Checkout Customizer 釋放 Checkout 頁面的全部潛力。自定義結帳追加銷售，使用 9種不同的結賬擴展和免費自定義品牌進行交叉銷售）
• 感謝頁面再行銷：Reconvert（滿推薦的！目前看過最完整的追加銷售功能應用於「購買後的感謝頁面」）
• 售後購買追加銷售：AfterSell Post Purchase Upsell
• 多組優惠券：DiscountYard — Stack Discounts（解決 Shopify 本身只能使用一組優惠券的問題！令人興奮！）
• 產品搜尋：AI Search, Filter & Recommend by Boost Commerce（推！五星評價，其中有兩個功能真的滿需要的，例如整個網站的搜尋即時結果建議、產品篩選器可以用 Tag 或 Metafield 設定；官方還提供客製化服務，可能會酌收一些費用，但目前經驗是更新了滿多樣式沒有收費；可以指定版型安裝，這功能相當方便！亦即可以先安裝在未發佈的佈景主題測試，測試沒問題再發布。若要移除 App，也需要參考官方文件說明步驟才能正確地移除乾淨：Uninstall Product Filter & Search from your store），注意事項是該 App 可能會取代版型原先的 Collection page 版型喔，亦即樣式排版都須額外調整與設定、Smart Search & Filter by Searchanise（也是五星評價，智慧搜尋與篩選功能，可以去官網瀏覽介紹，若覺得不錯選擇 Shopify 平台進行安裝即可）
• 訂單追蹤：AfterShip（超好用的！可以讓消費者輸入訂單編號和 Email 或物流編號即可查詢目前物流狀態與進度。也可以設定讓消費者輸入手機號碼查詢，但好像卡住，改用輸入消費者的 Email 還滿順暢的。進入該 Shopify App 後的線上客服反應也很及時回覆，著實幫我解決了不少問題），實際案例可參考 JOWUA 台灣站訂單追蹤和美國站訂單追縱頁面，開啟的貨運業者有 FedEx、USPS、UPS、DHL Express、黑貓 PRESIDENT TRANSNET CORP、順風 SF Express、郵局 Taiwan Post，我自己也有下載 AfterShip 的 iOS app 登入使用，也有 Android 版本，使用體驗不錯！
• 麵包屑：Category Breadcrumbs – Zoom Buzz（解決 Shopify 在麵包屑路徑無法自定義設定層級，例如 Home > 狗 > 主食 > 乾糧，尤其在商品系列頁滿有可能有這方面的需求。此 App 主要是抓取主選單的方式顯示，所以端看主選單的商品系列而定。但要注意的是：Shopify 導覽列的選單最多三層而已）
• 販售數位產品（例如電子書、有聲書、攝影素材等）：SendOwl
• Email Popups 提高轉換率與銷售：Upsell, Discount, Email Popups by Getsitecontrol、Pop Convert ‑ Pop Ups, Banners – CartKit
• 多重選單 Mega Menu：Smart Mega Menu & Navigation by qikify（若產品分類或網站內容分類超多可考慮使用，排版方便、設定快速，還可在選單文字旁邊設定 Banner 圖等功能）、Mobile Menu & Navigation by qikify（而這款是專門設定行動版選單客製化使用）- 前面兩款 App 我都有用過，有個網站甚至兩者同時使用。付費版比較好用倒是真的。
• Instagram Feed：Instagram Feed — elfsight（激動推薦！進入官網首頁後找到，在選單找到 Widgets > Instagram Feed）、Instagram Feed Pro ‑ Instafeed by Expert Village Media Technologies
• Instagram 購物：Lookbook ‑ Shoppable Galleries、Shop Instagram & UGC by Growave
• 產品推薦：Rebuy Personalization Engine（號稱 AI 機器學習推薦系統，而其中覺得很棒的功能是可以在結帳頁推薦其他產品增加銷售）、Personalized Recommendations by Expert Village Media Technologies
• 互動式影片 – 提高轉換率：Tolstoy Product Video & Quiz（相當有趣與網站訪客的互動方式！透過互動式影片嵌入在網站任何地方，可以應用在產品銷售與導購、產品操作教學、客戶服務等場景）
• 追加銷售 – 產品組合優惠：qikify Upsell Bundle, Discount、Bundles Upsell | PickyStory（Combo Products – Bundle products as a single product、Buy X Get Y / BOGO、Bundles 等功能）、Zoorix – Cross Sell & Bundles by Zoorix（Cart & Product Bundle Upsell, Quantity Breaks, Bundle Builder），前述兩個 App 都有整合於 PageFly，若想用 PageFly 打造產品頁就方便多了！
• 追加銷售 – 再訂購：Reorder Master ‑ Repeat Orders by HulkApps.com（介面一般，前往瀏覽 App）、Customer Accounts Concierge by Froonze（提供顧客後台更多選項設定，如可以新增地址、取消訂單、再訂購、最近瀏覽的產品顯示等）、Completo ‑ In Cart Upsell（使用過這款，問題滿多的，不定時顯示錯誤然後無法使用）、Orderify
• 追加銷售 – 購物車：qikify Slide Cart Drawer、iCart Cart Drawer Cart Upsell by Identixweb（在結帳前的購物車頁面追加銷售、提高轉換率）、Cart Upsell, Free Gift Monster by Monster Upsells（在購物車提供達到一定金額免運費或送贈品、買越多省越多、推薦商品等功能，需注意的是只能顯示在側邊欄購物車 drawer cart ，而非無法顯示在完整購物車頁 full cart page，顧客購買後會直接導入結帳頁 checkout page）
• Social Proof：Sale Kit‑Social Proof, Pop Up by qikify
• 產品評論：Loox Product Reviews & Photos（推！視覺介面不錯，用起來舒服且美美的，功能會持續新增，很強的評論 App，可以讓使用者上傳影像或影片留下評論等）、Ali Reviews ‑ Product Reviews by FireApps（五星好評跟 Loox 不相上下，介面設計簡潔、SEO 友善等），重點是此兩款都有整合網站頁面編輯器：PageFly Advanced Page Builder
• 聯盟行銷 Affiliate Program：GrowthHero（推，可用於 KOL 網紅行銷）
• 會員制 / 聯盟行銷：BON Loyalty Rewards & Referral、Referral Candy by ReferralCandy（將你的客戶變成有影響力的人，讓他們推薦朋友得到獎勵）
• 表單（聯絡表單，包含設定讓顧客上傳檔案、Shopify 會員註冊表單等進階欄位設定）：qikify Contact Form Builder（經濟實惠）、Helium Customer Fields、Powerful Contact Form Builder by Globo
• 綜合功能：Growave（會員制 Loyalty and Rewards、產品評論 Reviews、Instagram UGC、加入蒐藏 Wishlist、會員登入 Social login，最近用到的 How to embed the Social Login buttons on any page）
• 綜合功能：Vitals: 40+ Marketing Apps（包含 Product Reviews、Pre-Orders、Volume Discounts、Sticky Add to Cart、Currency Converter、Description Tabs、All-in-One Chat 等）
• 綜合功能：POWR（選擇 Business 方案可以直接使用 60 多個功能，包含表單建立、社群分享、彈出視窗、FB meseenger 線上交談、評論等功能）
• 產品輪播圖 Slider：Product Image Gallery & Zoom、GG Product Page Slider&Gallery by Gigilabs（這款新發現，滿新穎的，若你使用的版型沒有產品輪播圖 Slider 可考慮先使用其功能限制的免費版本看看）
• 前後對比圖 Before & After：Widgetic (Before and After)
• 購買按鈕對外連結：AOD External Links Button（目前有用過，設定簡易）、Outlink External Links Button
• 偵測使用者所在國家自動轉址到指定網址：GeoIP Country Redirect/Blocker（雖然介面設計陽春，但設定功能等都容易上手）
• 訂閱制（台灣商店不能使用）：Appstle Subscriptions & Loyalty、Bold Subscriptions、PayWhirl
• 訂單印表機（自訂發票、標籤、收據、裝箱單及其他文件）：Order Printer（解決問題：目前客人的追蹤碼是一個一個輸入，但是要匯出所有訂單資訊時，卻沒有包含訂單追蹤碼 Order’s Tracking Number，而每個月對帳需要匯出訂單，要有追蹤碼。所以此 Shpoify 官方推出的 App 即可客製化資訊包含訂單追蹤碼。參考官方文件）
• 自動化流程：MESA‑ Workflow Automation（這款是專門 for Shopify）、Make
• 高度客製化報表與數據輸出：Xporter Data Export Tool
• 貨到付款 COD 的 SMS 驗證：COD Order Confirmation King（通過簡訊一次性密碼或鏈接驗證客戶的手機號碼，減少貨到付款訂單的退貨。免費方案的簡訊費由 Store Owner 負擔，而非消費者。）
• 購物車預留時間倒數：Countdown Timer Ultimate by KILATECH
• 修改已成立的訂單：Edit Order by Cleverific（當訂單問題發生時，例如缺貨產品、客戶訂單更改請求或延期交貨問題，能夠解決訂單更改問題）
• 訂單購買金額與產品數量購買數量設定（例如設定顧客每筆訂單最低購買總金額、指定產品最小購買數量）：Order Limits ‑ MinMaxify by Intillium（使用過，運作正常）、Advanced Order Quantity by Extendons
• 批發 Wholesale：EasyLockdown ‑ Wholesale Locks by NexusMedia（推薦，方案費用也不貴）、Wholesale Lock Manager by Wholesale Helper（隱藏頁面需要開發商執行，有點麻煩）、B2B Login/Lock & Hide Price by BSS Commerce（功能看起來不少）
• 鎖定部分內容，讓特定用戶才能瀏覽：Locksmith（使用時要多加留意，先閱讀其官方文件）
• Dropshipping：Syncee ‑ Global Dropshipping（B2B Platform For Dropshippers, Retailers, and Supplier：看起來不錯！另外有款工具 Dropship 可以追蹤其他商店的銷售業績、競品分析等）
• 產品中不同顏色連結到不同產品頁 Separate Colors as products（此功能是想要在一個產品頁中呈現很多「顏色選項」時，分別點擊之後都會分別連到該顏色的獨立產品頁，亦即一個顏色一個產品頁）：Color Swatches, Image Swatches by Platmart（我選擇這款，主因是載入速度較快）、Product Colors by Webyze
• Meta 臉書像素與事件設定：Trackify X Facebook Pixel（除了臉書像素，還有 TikTok、Snap 像素與事件設定等，相較於 Shopify 透過銷售管道安裝的 Facebook & Instagram 功能更多，且跟很多 Shopify App 的頁面編輯器相容，如 PageFly Landing Page Builder，提供的客服支援也會提供有關臉書廣告或 Shopify 相關問題的建議）
• 直接使用現成的 Shopify 區塊和版型 Sections and Template（須注意版型相容度）：Luna Templates、qwiqode

此 Shopify App 精選清單會不定時更新，同時附上獨立網址的清單檔案，方便大家蒐藏，可以隨時回來這個網站或直接瀏覽：https://share.irvinglab.com/shopify-app-irvinglab

Shopify 台灣商家如何串接台灣金物流與超商取貨、電子發票？

更詳細的內容說明，可以前往閱讀：Shopify 台灣金流、電子發票、物流與超商取貨解決方案

---

開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱

若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，接著進階的是了解整合 SEO 搜尋引擎優化和 Google Ads 關鍵字廣告的行銷策略：客戶主動找上門！全面佈局的搜尋引擎行銷策略，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論：SEO 資源彙整 / 學習，歡迎蒐藏並分享給你的同事們我持續更新的「SEO 學習資源」。閱讀書籍的部分則超級推薦：SEO超入門：教你免費又有效的網站行銷好點子

爾文打造的客製化 ChatGPT

• SEO 搜尋引擎優化
  • 名稱：與文同行 SEO 搜尋引擎優化師
  • 簡介：Chat and Learn – 透過對話學習 SEO
  • 網址：https://share.irvinglab.com/gpt-seo-mentor
• Shopify Liquid Dev 程式開發
  • 名稱：Liquid 程式開發 AI 顧問
  • 簡介：針對初學者 Shopify Liquid 程式撰寫的專業輔助，含豐富範例及詳細解說
  • 網址：https://share.irvinglab.com/gpt-shopify-liquid-expert
• Web Design 網頁設計
  • 名稱：成為網頁設計師
  • 簡介：你的網頁設計學習諮詢顧問
  • 網址：https://share.irvinglab.com/gpt-web-design-advisor
• 備註：歡迎前往試用，接下來會持續更新與優化，也可隨時給我回饋 ^^ 感恩！GPTs 已可以設定即時搜尋其他網站上的資料，確切地說，原本使用 Bing，並使用另一個 ChatGPT Plugin 來執行任務，該工具允許使用者提供一個（或多個）URL，並可以選擇請求與 URL 進行交互，提取特定資訊或如何處理 URL 中的內容，請求可能包括重寫、翻譯等。若遇到任何使用上的問題可隨時來訊息或截圖跟我說。

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

最近終於找到一款並實際使用過，目前還不錯的 Shopify App 如下所列：

產品輪播圖 Product Image Slider

Product Image Gallery & Zoom

使用時機

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

注意事項

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

補充說明

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

---

SEO for Shopify

Yoast SEO ‑ SEO for everyone

方案：免費版只能設定5頁，14天免費試用，付費版 USD$19/月

老牌的 WordPress SEO 外掛：Yoast SEO 也推出相容於 Shopify App，解決了 Shopify 平台本身極度受限的 SEO 功能！

詳細介紹可以閱讀我這篇最新文章：Shopify SEO App 推薦：Yoast SEO 實戰教學

其中之一是賦予 Shopify 能夠設定「每一個頁面」的社群分享圖片(Social sharing image)，這行銷人來講是最大的福音之一，其還可針對 Google preview、Facebook preview、Twitter 等分別設定不同的預覽內容。除此之外，Yoast SEO 還有不少好用的功能，例如可以在 SEO title 和 Meta description 插入變數（Insert variable），尤其在網站有大量頁面時使用以達到省時省力；Schema 則是會根據頁面類型自動套用，而 Pages 和 Blog posts 則可以手動設定 Page type 結構化內容，滿厲害的！還有很多很多，可以慢慢挖掘，付費版的功能將近跟 WordPress 外掛版本使用體驗好用夠用！

注意事項

1. 此 App 會修改你的 Theme，在今年 2022 年上半年有不少使用者在評論區抱怨其讓網站出問題且變慢，而近期七、八月的評論開始是好的，因為該公司有修改了很多 bug，可以參考其官方文件：Yoast SEO for Shopify changelog – https://yoast.com/shopify/apps/yoast-seo/changelog/
2. 我剛開始測試而已，是有成功，但沒測試過所有 Shopify Theme 是不是安裝後都沒問題，所以大家在測試此 App 時最好還是先將原本的版型備份或在測試站先測試比較保險。
3. 安裝任何 Shopify App 我都會順便確認一下「如何正確適當地移除」，而移除此 App 的官方文件說明在這：How to uninstall Yoast SEO for Shopify – https://yoast.com/help/remove-yoast-code-from-theme-in-shopify/
4. 可以先從常用的 Facebook preview 開始，設定完後用 Facebook debugger（分享偵錯工具）就可以立即看到成果，檢查工具網址：https://developers.facebook.com/tools/debug/

---

SEO – Rich Snippets（哭，此 App 下架了！）

Rich Snippets for SEO by Orbis Labs

說明

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

*是否需使用請自行斟酌評估喔！這裡只是分享使用經驗
*為何要設定 Rich Snippets？讓產品在搜尋結果頁中提高能見度和點擊率
*如何驗證 Schema 設定成功？使用 Google 的 複合式搜尋結果工具
*可以挖寶 Shopify Apps 的一個國外論壇 Quora：What are the most useful Shopify apps?

---

這功能不知大家的想法如何？就是「購物車預留時間倒數」

Countdown Timer Ultimate by KILATECH

目的

1. 創造緊迫感
2. 減少廢棄購物車
3. 鼓勵購物者加快結賬速度

備註

1. 不是「單純倒數而已，是真的會被移除」
2. 我沒親自用過，但看過 demo 以及該 app 五星評分和 reviews 數滿高的，超過 200 個
3. 就當作參考看看，若有需要，可以自己去測試先，然後不錯用再使用即可，之後能分享使用經驗就更棒了 ^^
4. 另一款有類似功能 Cart Reserved Timer Shopify App: Create Urgency | Vitals
5. 搜尋關鍵字：Cart Reserved Timer、Automatically Empty Cart After Count

---

使用 Shopify 架站是不是要會程式語言？例如 CSS 及 HTML？

🍎 版型沒有的設定，就兩種解法：

1. 找 App
2. 寫程式

🍎 若只是單純視覺排版的問題：HTML/CSS 就可以解決一半以上的排版需求

🚀 會「基礎的 HTML/CSS」當然更好

• 一來廠商交接給你們團隊的時候，比較容易交接
• 二來整個網站專案執行效率提高
• 三來可以做的事情更多更多元
• 不會寫程式碼：就像騎腳踏車一樣，前往目的地
• 會寫程式碼：可以像開跑車一樣，秒速到達目的地

🚴🏼‍♂️ 若你們團隊不想學開跑車，只想騎腳踏車就好，那就……專案就會像騎腳踏車一樣，腳踩得再快還是慢。ps. 但只要持續不斷騎到底，還是可以到達目的地

🍎 我遇到的部分來諮詢的人，會先捲起袖子先自己做一遍，這樣通常是好的開始，因為：

1. 自己做一遍才會知道「會遇到哪些困難無法執行」
2. 沒有自己做一遍會以為「Shopify 很簡單啦～ 自己摸一摸就好了，無所不能」

備註

• 若你是工程師，那可以跳過以上內容 XD
• 若你不寫程式碼，且「覺得網站版型套一套、有存在就好」，那也可以跳過以上內容 XD
• 最終都會依照「需求的複雜度」來決定到底套版就好，還是需要客製化，沒有唯一的答案

網站的世界中，網域是最最重要的品牌資產，請先保護好

🍏 近日 Shopline 事件沸沸揚揚，可以瀏覽燒賣臉書社團的貼文討論串，貼文一、貼文二。所以哎，經營網站時，首要確認的事「網域是在哪裡購買的？」無論是哪個平台，包括 Shopify 都一樣，「完全不建議在這些架站平台上購買網域」，未來哪個時候因故要轉平台就麻煩大了，把網域「綁在平台上」風險絕對不低。🚀 請直接在第三方網域供應商購買囉，例如 GoDaddy 等，然後全面開啟二段式驗證提升安全層級到最高，網域絕對是網站最重要的品牌資產之一。不要嫌麻煩哎，將第三方網域設定一次就能綁定在所使用的架站平台，這小動作可以分散極高的風險。

😨 經手過無數的網站，還會發現一個嚴重的問題：就是當初申請網域帳號還有架站平台帳號的 Email 竟然是用某員工 Email 申請，而不是用「公司專屬的 Email」申請，😢 例如遇過某案子因某員工離職，發現 GA 進不去了，因為是綁定在該員工的「個人信箱」，也失聯了，該公司只好在網站數據上「從零開始」經營，而幾年的心血秒歸零，只能哭一發。

🚀 請直接用「公司專屬的 Email 帳號」申請：「網域」和「任何架站平台」等軟體，且「此 Email 的擁有權」需綁定在創辦人或核心成員中，他們才擁有至高無上的管理員權限。

對我來說，我如何看待網站這件事：

• 🍎 第一個看網域在哪裡購買的？擁有權在哪個帳號？
• 🍎 第二個看網站真正的擁有權是哪個帳號？

身為創辦人、品牌經營者，只有優先確認這兩個資訊是安全無虞的，才能安心執行接下來網站要做的事，無論是販售產品、內容產出、行銷經營等。🚀 網域，沒有模糊空間，絕對是網路世界中品牌最重要的資產，請放在 Top 1 優先保護好、管理好。

---

研究全世界的 Shopify 網站

說明：研究全球使用 Shopify 建站的品牌與公司，橫跨各種產業，了解他們的網站設計、行銷、文案、經營方式，分析其所使用的 Shopify Theme、Shopify App 等，站在前人的肩膀上，進步特快！

搜尋 Shopify 網站的平台

BuiltWith

• 簡介：Get a list of 4,766,134 websites using Shopify and 3,298,025 currently live websites（時間：2021/09/01）
• 標題：Search results for shopify
• 描述：BuiltWith lookup search results for shopify
• 網址：https://builtwith.com/shopify
• 流量：23,400 visitors per day

Shopifyspy

• Find 4,652,970 Shopify Stores（數據時間：2021/09/01）
• 標題：The Most Successful Shopify Stores in 2021
• 描述：Shopifyspy collects comprehensive data from the most successful and powerful shopify stores, containing rankings on Alexa and different social media.
• 網址：https://shopifyspy.com/stores
• 流量：7,250 visitors per day

Xpareto Spy

• Total records: 28339（數據時間：2021/09/01）
• 標題：Xpareto Spy on Top Shopify Stores
• 描述：Xpareto- Spy on Top Shopify Stores, Now you Can Reverse Engineer these Proven Winners to Replicate their Success!
• 網址：http://xpareto.com
• 流量：3,640 visitors per day

Commerce Inspector – Shine Commerce（需登入）

• 標題：Commerce-inspector
• 描述：Grow your brand faster and more profitably with Shine’s eCommerce intelligence software.
• 網址：https://www.commerceinspector.com
• 流量：20,400 visitors per day

Shopify Stores List – Shulex

• Total records: 4931（數據時間：2023/11/05）
• 標題：Shopify Stores List – Shulex VOC Best Ecommerce AI Tool
• 描述：Spy on shopify competitors, best selling & trending & winning products, shopify themes, apps, fastest growing stores, newly released products, dropship and more by Shulex VOC.
• 網址：https://www.voc.ai/tools/shopify-stores
• 流量：<200 visitors per day

Flippa

• Total records: 28339（數據時間：2021/09/01）
• 標題：Online Business For Sale | 5,000 Listings | Flippa
• 描述：No. 1 Marketplace for Online Businesses for Sale. Over 5,000 websites, ecommerce, SaaS and app businesses for sale. Start your search today.
• 網址：Search Online Businesses for Sale – Filter by Types: Shopify
• 流量：22,400 visitors per day

Shopify

說明：Shopify 官方也會選出用 Shopify 建立的最佳電商網站 Shopify Commerce Awards，從三個面向評估：UX + FED、Development and apps、Overall builds。可以參考這由官方認證的得獎網站，並且有概要的評析，相當值得參考！

• Shopify Blog 文章列表（Shopify 官方部落格也會撰寫與評析優質的電商網站）
  • Announcing the Winners of the 2020 Shopify Commerce Awards
  • Announcing the Winners of the 2017 Shopify Commerce Awards
  • 50 Exceptional Shopify Stores to Inspire Entrepreneurs
• Shopify Theme Store（Shopify 官方的版型商店有很多 Demo 和實際案例也不錯）
  • 版型商店：Ecommerce Website Templates

解析其他 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 清單如下，但實際上是有限制的，不能完全截取其所使用的每一款 Shopify App，通常只會找到一部分，聊勝於無囉！

1. Hextom Shipping Bar
2. Mailchimp
3. Sales Rocket 等等

能偵測到的版型也是有限制的，若顯示的不是某 Shopify 版型名稱，表示該網站使用者在 Shopify 後台有改過名，也因此會很難一眼就知道這網站所使用的版型。如果你也不想讓別人知道你使用哪一套版型，可以去後台更改「版型名稱」即可，設定路徑：Shopify Admin > 佈景主題 > 擇一版型 > 點擊「動作」 > 「重新命名」

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

---

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

開網店的路上你不孤單

Free Business Tools — Online Tools for Small Businesses

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

品牌識別設計 AI 產生器 Logo Maker – Looka

說明： Looka 是用 AI 產生無數個品牌 LOGO，相當方便！平面設計師的工作再度受到挑戰……？！我自己因為有數個新品牌正在建立中，先免費試用，覺得有夠讚，後來我就選擇了付年費方案也不貴，直接取得整組 Brand Kit 素材，還可以隨時進後台編輯與修改！Design a Logo, make a website, and create a Brand Identity you’ll love with the power of Artificial Intelligence. 100% free to use.

品牌標語產生器 Slogan Maker

說明：Slogan 沒靈感嗎？ 可以先用 slogan maker 品牌標語產生器快速產生列表，輸入關鍵字或產品名稱，就會自動列一堆列表，雖然不是說百分之百完美，但當作起個頭也好，然後再從中挑選繼續構思。而我常用到的原因是常常客戶或團隊沒有提供完整的文案，為了讓網站盡可能準時上線而必須同時進行設計，雖然也可以先用假文字頂著用，但常常執行時很沒有 fu，「設計搭配假文字」其實到最後還是有可能需要重新設計，造成重複工時、消耗團隊人力。所以這時若能設計師跟需求方能先討論出個「大方向的文字概要」，例如主視覺與標語、每個段落的標題，之後再細修即可，這樣一來，設計師比較不會偏離最後成果的方向太多。以下列出其中可以參考看看的標語產生器線上工具：

• Marketing Slogan Generator – Shopify（中文版也有，但似乎不太能用，就用用看囉 ^^”）
• Free Slogan Maker Tool – ClickFunnels
• Slogan Maker – Designhill
• AI Slogan Maker – Zyro
• Slogan Creator – Oberlo

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

產品標籤 (Product Tag) 不支援大小寫

有關 Shopify 的產品標籤設定問題，例如若有人拿來設定作為商品篩選器用，要注意的是：Shopify 目前還無法區分產品標籤大小寫，例如若先建立了 ABC，就無法另外建立 Abc，也無法編輯原本的 ABC，以此類推。這是 Shopify 目前的小問題，有回饋給他們，看未來會不會更新。

另外若會將產品標籤顯示在網頁上，不小心設定到全部小寫如 abc，但希望顯示的是全大寫或只有英文字首字大寫，則就用 CSS 設定解決即可。設定英文字字母的大小寫，CSS 語法：text-transform

text-transform: uppercase　所有字母大寫
text-transform: lowercase　所有字母小寫
text-transform: capitalize　每個單字只有第一個字母大寫

備註：

1. 若一個單字中有大小寫混雜成這樣如 gHijKLM，則可能就沒救了 XD” 乾脆用 JS 強制替換掉（也太麻煩），所以設定產品標籤時在執行時要先思考清楚、規劃謹慎，再去設定
2. 很妙的是，Shopify liquid 的 capitalize 只設定整句話的第一個英文單字的首字改成大寫，不同於 CSS 的 capitalize 是將整句話中的每個英文單字的首字改為大寫，eg. Shopify liquid 範例：{{ “prodcut Title name” | capitalize }}

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

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

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

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

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

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

目前尚不支援 SVG 圖檔（2023 年重大更新後，現在已經支援囉！讚讚）

用過 SVG 圖檔格式的應該就回不去了！因為解析度真的太好，完全不怕電腦和手機的大小螢幕解析度，而且清晰的可以！尤其用在 Logo、小圖示呈現都不怕品質變差。Shopify 目前依然尚未支援，可參考官方文件。而若要解決此問題，一可以到設定 > 檔案 > 上傳 SVG 檔後再複製圖檔網址到頁面中使用，但要寫 CSS；二可以透過 Shopify App 上傳如頁面編輯器 PageFly 上傳 SVG 檔直接使用。

圖片上傳後 Shopify 會自動壓縮

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

圖片檔案名稱無法使用中文命名

無法使用中文名稱命名的圖片檔，上傳之後中文字會被自動濾掉、而字間的空白會用自動產生底線。意思是必須要全英文命名，但在這種情況在 WordPress 是沒問題的。

部落格文章無法設定「所謂的文章分類」，目前只能用文章標籤替代之

雖然可以在 Shopify 的部落格功能中，建立不同「網誌名稱」來達到類似的目的，但邏輯其實不太一樣，因為這樣其實會是屬於不同的部落格，文章也很難真正管理。且還需要透過撰寫程式或另外安裝 Shopify App 來將「不同網誌作為分類」顯示在同一頁面中，實屬麻煩。解法是將「文章標籤」當作文章分類來設定。

社交媒體圖片只能設定一張精選圖片

用 WordPress 架站的人就會知道網站中的每一頁面（包含每一篇部落格文章）都可以分別設定社交媒體圖片（Social Media Image），但 Shopify 只能設定一張首頁的精選圖片。其他頁面不能單一設定。雖然還是找得到 Shopify App：Social Media Share Image（還沒測試過），但因為覺得只為了這個功能就每個月花這額外的費用感覺不值，所以就先暫時不用（當然還是依需求程度而定）

社交媒體圖片（Social Media Image）或稱社群分享圖片（Social Sharing Image）

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

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

後來 Shopify 是有推出官方認證的標籤如 Built for Shopify，也是可以參考看看。只是無論是哪種產品，需要了解的是：

1. 以前覺得好用，未必現在就覺得好，競品越來越多，相比之下就會發現
2. 持續不斷挖掘與嘗試新的 App，慢慢「刷新自己的 App 清單」
3. 競品越多，以結果而言：對終端使用者是好事，選擇變得更多而不會落得「沒得選的窘境」，如此也才能讓開發者持續精進，越來越懂得「聆聽使用者的回饋」
4. 挑選與篩選 App 時，「看評價」只是其中一種方式，Shopify 官方自己推出的 App 應該有一半以上評價都不到 3 顆星，但實際用了以後有些沒有心中預期那麼糟，「端看需求而定」。

所以若沒有團隊支持而獨立架站的話，最理想的情況還是：能親自去測試，並廣泛研究 Google 到的資料、社群分享等，精選出屬於自己的 Shopify App 清單。

相比 Shopify App，像是 WordPress 外掛、Themeforest 就有相當豐富的資訊提拱給使用者評估是否能選到穩定、優質的數位產品。另外一種解法：安裝 Store Leads Chrome Extension 在 Chrome 瀏覽器，啟動後就可以在瀏覽 Shopify App Store 時看見每個 App 的下載次數、使用趨勢等，可以閱讀官方說明文件。

Shopify 畢竟還是第三方平台，網站能備份的東西其實有限

若不是工程師或也不想付費使用備份功能的 Shopify App，至少能手動的備份的項目有：

1. Shopify Theme：點擊備份後會寄到你的 Admin 信箱，至少還可以將原始碼保存下來，尤其客製化一堆程式碼和安裝一堆 App
2. Shopify App 如有使用頁面編輯器 PageFly：辛苦建立了很多頁面萬一有人或自己不小心刪除了某些頁面，那真會欲哭無淚，全選後輸出可以將設定格式備份下來，「但圖片無法」！

……（未來會繼續新增）

---

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

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

---

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

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

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

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

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

Shopify SEO 怎麼做？

1. 在執行長期的 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

簡介：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！因為我在使用十個月後決定付費。但有個需要注意的地方：若你使用的是其桌機版 App，則當網速不快或當專案檔案太多的時候，開啟與執行速度會稍微延遲，這時改用網頁版瀏覽應該就會比較順暢。

連結：前往瀏覽

---

創意設計：Adobe Creative Cloud

說明：只要是設計師應該幾乎每個人都必備的 Adobe 系列軟體，尤其是 Photoshop、Illustrator、Premiere Pro、After Effects，廣泛應用在視覺影像設計必用，用在平面印刷、網站設計的影像合成與修圖、圖示製作，影片剪輯或動態影像 Motion Graphic 等，彼此相容整合提升效率。看了官網好幾年，幾乎沒變過的就是立即購買即享有第一年的 6 折優惠 XD”。透過 Adobe Creative Cloud 可以一次管理與下載所有軟體直接使用，隨時更新相當方便，也可根據需求只選購單一軟體。

連結：前往瀏覽

---

網頁設計：Figma

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

說明：用途相當多元，雖然此軟體原本是被定位在協作的 UI 設計上，但我廣泛用在打造網站地圖、Wireframe 線框圖、網頁視覺設計、流程圖，以及與客戶、團隊共同協作編輯的使用上。達到遠端開會高效率、大幅降低溝通成本與時間成本，並且是我大腦「記憶的延伸」，可以放很多筆記在裡面，太強大啦！用了 Figma 之後，就回不去了，以往使用 Photoshop、Sketch、Axure 都沒有這個來得驚嘆！另外想了解其豐富的生態系外掛 Figma Plugin，可以參考這篇文章：資深網頁設計師常用的 Figma Plugin 推薦

連結：前往瀏覽，免費註冊

---

圖庫影音素材：Envato Elements

簡介：Unlimited downloads of stock videos, royalty-free music, photos, graphics, graphic templates & more. The only creative subscription you need.

說明：Envato Elemetns 素材包含攝影、平面設計、圖示設計，到影片模版、音樂、音效、簡報、字體、3D 模型等皆無限下載，每個月只需美金 16.50 元，相當豐富實用！儘管攝影圖片不能跟專門的圖庫網站如 Shutterstock、iStock 等相比，但還算能應付大部分的需求（相對於專業級圖庫，還是可以省不少成本），重點是除了照片之外，還有影音模板、音樂、簡報範本等，全面而實用，可以非常有效率且經濟實惠地處理各種需求。

我個人使用 Envato Elements 至少也有三年了，通常應用於平面設計、網頁設計、社群媒體等。因為專業級圖庫真的還是很高的成本哎！所以大部分的案子通常還是 Envato Elemetns 搭配其他免費圖庫使用，而除非特定的要求或內容，才會去購買高貴的圖片。

連結：前往瀏覽

---

常見問題（持續累積中）

新舊版型升級注意事項為何？

1. 版型升級後，等於是另外建立一個全新的網站，所有設定都要重新設定

儘管有部分可以用程式碼複製貼上，但還是得謹慎，因為新舊版型程式碼架構非常不同，所以很難一鍵完成

2. 舊的「客製化程式碼」需要逐一設定到「新的版型中」

很多我們自己手動撰寫的程式碼如 Liquid、CSS、JavaScript 等都必須找出來，然後設定到新版型「對的地方」中

3. 所有 Shopify App 都需要逐一檢查，必要時「需要重新設定」，原因如下：

• 有些 App 只會指定安裝到特定版型，所以新版型要重新安裝
• 部分 App 安裝步驟比較瑣碎，會需要「手動置入程式碼」
• 部分 App 沒有提供讓我們安裝在「開發商店」中，亦即不讓我們安裝在 Sandbox 環境下執行測試，所以這也會造成一定的麻煩

結論

先以版型本身的設定與視覺排版為主，這個可以直接在 Shopify Admin 後台進行大部分的「新舊客製化程式碼轉移」。雖然在 Sandbox 環境下的「開發商店」進行也是可以，但就會卡部分 App 無法先設定，如前所述

網站中如果有中文跟英文，字體設定上可以分開嗎？

這問題說來複雜，情況特多，若以下說明還是不清楚，可以來信留下你的網站實際需求是什麼、如何運作等細節、截圖，以方便我更容易評估與提供建議。

1. 中英文字體在網站上無法分開「一次設定」。有個例外，就是若是使用多國語系的方式例如安裝了多國語系的 Shopify App，則可以觀察看看是否在網頁程式碼中是否多了一些關鍵 class 名稱，若有，就可以針對不同語系一次設定不同字體。
2. 若是使用版型內建的設定或手動寫 CSS 指定某些文字字體才可以，但這不切實際，因為整個網站有超多中英文夾雜，不可能一個一個手動，維護上也提高時間成本、人力成本。當然，若網站只有一兩頁左右，那可評估看看。
3. 若是用平台架站如 Shopify 或 WordPress，不是每個文字都容易被單獨選取出來指定字體，很多局部的內容是很難甚至無法執行，沒事的話不會非常堅持進行，那樣有可能會需要直接更改版型或外掛底層程式架構，以長期而言，同樣會造成維護成本過高，然後很難找到其他人願意接手。

備註：沒事的話不會去用程式修改 Shopify App 或 WordPress Plugin，當該 App 開發商更新後可能又會被覆蓋掉甚至造成問題，畢竟，那是其他公司在維護的 ^^” 除非永不更新了，但 Shopify App 會自動更新，而長期而言 WordPress Plugin 不更新的話會造成安全上的隱憂。

網站字體設定：基本執行方式

1. 主要根據這個網站是以哪一國語言為主來指定字體，其餘局部的地方可再了解平台、版型、外掛等可行性與限制來評估是否適合設定其他字體。
2. 就設計而言，網站字體基本設定 2 種即可：一個為標題字體（h1~h6），一個為內文字體。頂多針對特出需求進行局部的「特別設計」與「指定第三種以上的字體」，例如某些行銷活動的銷售頁或 Landing page、或只針對 CTA 按鈕（CTA: Call to action，行動呼籲）等
3. 其實無論是平面設計或網站設計，一個畫面出現 3 種以上字體，請謹慎服用，尤其是網站。

備註 1：設定整個網站字體時，是可以針對標題、內文等進行設定，有些版型或 Shopify App、可以選取局部區塊進行設定獨立字體。

備註 2：儘管有些版型可以讓字體設定可以切很細，但相對而言也造成「執行的時間成本高」，反而寫 CSS 指定字體才是極致高效率的表現。

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

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

如何挑選網站設計公司？

說明：每個人都有自己找網站設計公司的判斷方式，在這邊我是以「身為網頁設計師」的角度來判斷。看過很多重視設計的客戶踩雷的原因是因為他們以為找的是網站「設計公司」，但其實該公司主要是工程師組成的，可能沒有一個視覺設計很強的設計師，也可能是該公司的強項是行銷，但為了擴大客源也會接其他營業項目的案子。所以我判斷的思路如下：

1. 了解該公司的團隊組成：看團隊組成就知道該公司的「強項」或「主力」應該是什麼。我非常重視團隊，也相信只有團隊一起努力才能成大事。
2. 了解該公司的強項是什麼：通常我聽到「什麼都行」的這種答案，我都會三思，每家公司都有自己的主力營業項目和強項，不太可能樣樣精通。
3. 了解該公司的設計作品：通常請該公司提供「設計作品」大概就能判斷五成是否符合需求。

但也要注意的是，即使該公司有提供網站作品，也要進一步了解該公司處理的是這個網站的哪些部分，因為也有可能只是處理這個網站的局部功能而非整個品牌網站的視覺設計。除了看作品集外，再進階詢問該公司的「設計流程與方法」、「設計師如何執行」、「設計概念」等之類的實務問題，問幾個網頁設計相關的問題以及從對方的回答就能立判其虛實與了解程度。

以上的方法也是我在為公司建立網站設計團隊時，面試來應徵「網頁設計師」時非常重視的關鍵，把「該公司」換成「該設計師」即可。

為保持客觀評估，原則是不打斷面試者、不提出引導性的問題、不用當下同意或反駁對方的想法，只需要靜靜地聆聽對方如何回答與表現即可，讓對方忠實呈現自己，我也更能得到客觀的「數據」來判斷是否符合職位需求。

備註 1：平面設計師和網頁設計師的差別？若找平面設計師執行「網頁設計」，那極有可能造成後續網站實際執行上的困難。這兩個領域與經驗真的不同，未來會再詳細整理一下差異在哪裡。

備註 2：當然若你的需求是想找一家可以統包所有服務的公司，不僅省力省事和溝通成本，那其實也有不少人會找可以處理所有業務的公司例如整合行銷或廣告公司等，因為只要對一個窗口即可。

如何找到產品發布的日期？How can I see what date a product was published?

方法一、在商店網址後加上 /product.json 即可，並且搜尋 “created_at” 就可以逐一找到每項產品「建立的日期」，搜尋 “published_at” 則可以找到該產品「發布的日期」

方法二、安裝付費 Shopify App：Xporter Data Export Tool

參考資料：How can I see what date a product was published? – Shopify Community（此方法從 Shopify Staff – Julie 的回答中整理出的，她在 12-11-2019 03:42 PM 回應）

Shopify 網站的結帳頁（Checkout page）可以多出自訂欄位（Custom field），讓消費者可以留言？

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

Shopfiy 商店因為一些原因要暫停使用，可否暫停一段時間，之後再恢復上線？

如果您是商店擁有人且您的商店具有資格，您可以使用 Shopify 管理介面暫停營運或完全關閉您的商店。有三個選項可以執行：

1. PAUSE AND BUILD：繼續以 $9.00 USD/月的價格打造您的商店。顧客依然可以造訪您的商店，但他們無法進行購買。
2. 暫停 90 天：保留所有資訊無須支付訂閱費用。顧客將無法看到您的商店，且您無法進行任何變更。
3. 取消訂閱並關閉商店：完全關閉商店並取消您的 Basic Shopify 訂閱方案。

詳情請參考 Shopfiy 官方文件以了解更多。

Shopify 的 Blog 功能滿陽春的，有沒有好用的 Shopify App 可以加強？

目前沒找到真正值得付費使用的部落格功能相關的 Shopify App

部落格最基本常見的功能有文章分類、文章標籤、相關文章、側邊欄位等，其中左右側邊欄的彈性設定、相關文章、最新文章在不少官方 Shopify 版型中沒有或不完整。除了直接找比較強的 Shopify 版型之外，例如 Minimog 版型的部落格功能基本的都有，而 Kalles 版型的部落格功能更進階一點，可以嵌入產品資訊，直接瀏覽此 Demo。但若原本使用的版型就很陽春，只好先往 Shopify App 尋找，以下是我快速測試的清單並附上概要的評語：

• 測試清單
  1. Related Blog Posts：免費，設定簡單，但樣式陽春，需要 CSS 設計。
  2. Pro Blogger：樣式與功能比 Related Blog Posts 多一些，可以將相關文章設定在產品頁，費用每月 5.99 美金。
  3. Better Related Blog Posts：感覺跟 Related Blog Posts 差不多，就沒測試了。
  4. Blog Studio：文章編輯器不好用，而且還不能設定 h1~h6，設定標題還滿基本且需要的。
  5. DropInBlog ‑ SEO Friendly Blog：費用不便宜，每年要 $228 美金或 $468 美金，功能看似強大，但似乎又不足以值得投入這樣的費用，有些缺點如相關文章功能需要最貴的方案、原本已經發佈的文章無法使用新編輯器設定，亦即需要重新設定、會有首頁是沒錯，但網址不好看，會有這樣的路徑 /a/blog 等問題。
• 其他相關文章 Best Blog Apps for Shopify in 2021：文章標題是 Best… 開頭，但實際使用後沒一個真正好看或好用的 Blog Apps，所以這類文章明顯是在做 SEO 流量使用，真的僅供參考，意思是網路上的資訊最好都要實際測試後才能判斷是否符合自己需求且能長期購買使用。
• 結論
  • 若真的要用，頂多選免費的 Related Blog Posts，就增加個相關文章的功能，設計樣式用 CSS 設定好看一點。
  • 若要付費的頂多選 Pro Blogger，每月費用 5.99 美金。
  • 要我選的話，我會直接用 WordPress 架設部落格經營內容，彈性且客製化功能強大。

網頁速度分數一直不高，怎麼辦？

有關網站分數問題：目前經手過的數個 Shopify 網站分數都差不多不會太高，整個網站建立完成之後再來看 Shopify 後台的測速皆很難超過 60 分，那分數真的不是首先要顧慮的 ^^ 實際上網站只要開啟對使用者來說是順暢的，至少這一步沒問題即可。很多 SEO 公司都會說很重要需要提高，這句話是沒錯的，但實務上，即使真的沒達到那嚴苛的及格分數，網站運作好、產品好、行銷好，其實足矣，未來再逐步優化那分數也沒問題！

Google PageSpeed 一直以來都好嚴格，很多美國高科技公司的網站也很難通過 Google 的及格分數（假設我們設定 60 分為及格，滿分為 100），所以真的只能盡力，且當參考值即可。不過我相信一定有神人可以做到，若有發現會在這邊分享 XD

除了使用嚴師 Google Page Speed Tool 之外，通常我會先用此兩個測速工具測試一下網站速度：

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

這些測速工具都可以用用看，其中最有價值的是他們會列出「可以優化的項目」，可以先從最好著手的地方開始，例如很多架站的人最常忽略的「圖片優化」事項。Shopify 官方文件也可以閱讀一下，有分能控制和不能控制的部分，如文件說明，改善線上商店速度。我其實也遇過很多網站圖片沒有經過優化與裁切，就直接將攝影師的原始檔上傳到網站中，這就會造成網站主機的負擔。所以通常在檢查網速時，第一個我會先檢查該網站的圖片使用方式。很多人都說理想是在 100KB，但在實作上真的太難了！所以我的原則是：一張至少不要超過 1MB （1MB = 1000KB）記得都要去 TinyPNG 優化一下，我之前有一篇文章有分享：如何製作與優化網頁圖片？。

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

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

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

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

有些 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 版型後會有內建的字體，這些字體也可以用在其他地方嗎？

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

Shopify 官方回應：通常官方提供的免費 Shopify 版型和 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。

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

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

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

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

一是通知消費者，產品可以買了、已經補貨了；一是通知商家庫存快沒了，需要補貨。根據此兩種通知進行分類，以下分別列出可以參考使用的 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：與很多官方和熱門版型相容，如 Prestige、Wokiee 等（此處的「整合」意思是安裝完 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 field、Stacking 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;

SVG 圖片檔禁止上傳到 Shopify 使用，該怎麼辦？（現在已經可以直接上傳 SVG 檔了）

Shopify 真的禁止 SVG 圖片「直接上傳」到網頁中。首先為何有些圖片會想使用 SVG 圖檔格式，而非使用 JPG 或 PNG 檔？通常攝影照片就直接用 JPG，而有透明背景的素材則用 PNG，但像是向量圖示等無論有無透明背景，用 SVG 格式可以保證邊緣不模糊。

下圖中看得出左右哪一張圖比較清晰嗎？

解法一

將 SVG 先上傳到 Shopify 主機中（Settings > Files），就會產生圖片連結，然後再到網頁中的編輯程式碼模式編輯 html，將該連結寫在 <img> 標籤中即可。Shopify 的 Page 或 Blog posts，只能使用編輯程式碼模式 編輯 html 才能設定完成，無法直接透過工具列上的置入圖片（Insert Image）。但若用 Shopify App 頁面編輯器如 PageFly Landing Page Builder 中，倒是支援直接上傳 SVG 圖檔。

解法二

將 SVG 丟到 Chrome 瀏覽器中，然後右鍵開啟「檢視原始碼」，將原始碼整個複製起來貼到 Shopify 頁面的「程式碼模式 Show HTML」中即可。但要調整其圖片位置與尺寸，須加入一點 CSS 語法 style=”width: 100%;”，這樣在行動版網頁瀏覽時圖片不會超出兩邊，而是等比例縮小（當圖片很大時，例如超過 500px 以上就有可能切到，端看每個人的手機解析度大小而定）；若要置中，再加上 text-align: center; 即可。

注意事項

1. 此方法若若寫點 CSS 語法會更容易編排圖片位置與尺寸。
2. 儘管這方式好用，但因為一張圖的 SVG 語法又臭又長（如下圖），將其語法直接貼入程式碼頁面中，容易造成編輯程式碼時小小的不便。

備註：若未來有發現或有人分享更好的設定 SVG 圖片，會再分享出來。附帶一提，在 WordPress 中可以安裝外掛即可解決，不用複製語法到程式碼編輯器中處理。

如何移除 Shopify 的快速結帳按鈕 (Express Checkout Buttons)？

說明：需求是不想在 Shopify 網站上顯示快速結帳 (Express Checkout) 功能，亦即「動態結帳按鈕」(Dynamic checkout buttons)，例如不想使其出現在產品頁或結帳頁面 (Checkout page)，在設定過程中會有一定的限制與注意事項。

執行

注意事項：記得在執行過程中，要確認是否生效，要用 Chrome 無痕式視窗進行確認，亦即不要在登入 Shopfiy 帳號的情況下進行驗證，才能看到真正使用者看到的「畫面」

1. 隱藏產品頁的快速結帳按鈕

作法：通常透過所安裝的版型內可以隱藏，取消勾選即可，看在自訂版型中有沒有類似 show dynamic checkout button 或 express checkout 之類的選項。

2. 隱藏結帳頁的快速結帳按鈕

說明：設定比較麻煩，因為一般 Shopify 方案是無法編輯與設定結帳頁 (checkout page) 的，除非你購買的是 Shopfiy Plus 方案 (每個月月費 2,000 美金起)，不然大部分的商家是無法自行改變 checkout page 內容。

作法一：在 Shopify 的「付款設定」中不設定任何快速結帳例如 PayPal，若已安裝那直接停用或移除。此方法乾淨利落、簡單明瞭。參考資料：動態結帳按鈕 – Shopify 說明中心

作法二：若不想移除快速結帳如 PayPal，則須透過一些語法解決。但此語法儘管能隱藏快速按鈕在結帳頁 (Checkout page)，但使用者在購買過程中沒有經過購物車頁 (Cart page)，則結帳頁還是會出現。

此方法僅在客戶直接從購物車頁面結帳時才有效（啟用購物車抽屜或購物車模式，或通過外部鏈接結帳不能保證此方法有效）

語法參考

/* hide express checkout button on checkout page */
<style>
.additional-checkout-buttons {
display: none;
}
</style>

{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
/* END - hide express checkout button on checkout page */

參考資料

• Remove The Express Checkout Buttons From First Checkout Page (PayPal, Apple Pay, Google Pay) – Shopify Community
• How to remove Express Checkout button from checkout page on Shopify basic plan?

可否在 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 by Amazon，簡稱 FBA

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

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

答：待研究……

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

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

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

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

若網站業績越來越好、消費者資料也越來越多，應該會開始很怕網站被駭？至少可以考慮「開啟雙重驗證」當作最登入帳號的基本防護。可以使用不同方式擷取登入時所用的驗證碼：

1. 啟用簡訊雙重驗證
2. 啟用驗證器應用程式雙重驗證
3. 啟用安全金鑰雙重驗證

例如主要驗證方式選擇「應用程式驗證」，備用驗證方式選擇「以簡訊傳送至備用手機」，設定過程相當快速。讓網站安全再提升！

其他網站防護相關的 Shopify App 文章參考：5 Ways to Secure Your Shopify Store、The Best Shopify Security Apps — 6 Apps To Ensure Your Store Is Secure

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

---

Shopify 有趣的特色功能（挖掘中…）

詐騙分析

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

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

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

若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，接著進階的是了解整合 SEO 搜尋引擎優化和 Google Ads 關鍵字廣告的行銷策略：客戶主動找上門！全面佈局的搜尋引擎行銷策略，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論：SEO 資源彙整 / 學習，歡迎蒐藏並分享給你的同事們我持續更新的「SEO 學習資源」。閱讀書籍的部分則超級推薦：SEO超入門：教你免費又有效的網站行銷好點子

---

Irving 爾文的網站內容為何定期汰舊換新？

1. 因為要講清楚一個概念且面面俱到其實需要花一定的說明，漏掉一個都有可能「被誤用」，我這邊只能盡可能寫成文字，並同步更新在我的網站中，內容通常每個月會定期汰舊換新。
2. 從 SEO 概念來經營內容，並結合「真實的使用者體驗」來優化內容。
3. 我個人經驗是尋找一個問題時，繞了半天發現某篇文章不是最佳解，因為「已過時」，這就讓進行 Gogole 搜尋的使用者非得搜尋更多結果、進行篩選與過濾才會避開「為了 SEO 而 SEO 的文章」
4. 別誤會唉，我沒有說為 SEO 而 SEO 不好，因應不同的產業、不同需求與策略就會有不同的作法。沒有絕對的對與錯，只有不斷地優化。

---