在開始之前，我們先看一下 Shopify 的教學影片：如何建立一個電商網站，片長不到 25 分鐘，步驟講解清楚，若想看中文翻譯可以直接在 YouTube 中切換語言。有點不可思議，但真的半小時就完成了！
Shopify — YouTube: How to Build an Ecommerce Website
從影片中會讓人以為就這麼簡單？是真的，但是老闆的需求或我們自己的需求就僅此於止？當然不。Shopify 平台本身預設的網頁客製化功能沒有「期望中」那麼高，其實有諸多限制，所以我們需要想辦法解決這個問題。
一來找工程師，但熟悉 Shopify 開發的工程師在台灣還是極少數，且對他們而言還要摸一下 Shopify 獨有的語言：Liquid；二來對一般人來說就是使用資源豐富的 Shopify App 、無數免費和付費的版型，善用組合這些擴充功能就可以解決「客製化電商網站」的問題囉！詳情請繼續看下去！
嗨我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計接案的經驗，對於這類平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。
（但建議盡量使用原本預設的功能，而不建議過於改造原本網站架構和外掛程式碼，影響其日後更新。因為 WordPress 版型和外掛都有專屬的開發者或公司，大部分都會不定時更新，更新後很有可能導致跟舊版的 WordPress 主程式不相容等其他類似的問題）
擴充功能在 WordPress 稱為 Plugin，在 Shopify 稱為 App，WordPress Plugin 基本上類似 Shopify App
至於 Shopify 的後台客製化編輯程度就介於 WordPress 和 Wix 之間，對於網站剛入門者會稍微輕鬆一些，亦即 Shopify、Wix、Squarespace 等這類架站會感覺建立網站「好像」不是很困難的事，會讓人寸步難行的是若想要隨心所欲進行網頁排版或想要寫個簡單的 Javascript 語法等等，限制多多。
WordPress 雖然真的也很適合一般沒有程式背景零經驗的人學習，但實際上遇到很多客戶使用起來他們還是覺得很痛苦、小複雜，要記住很多設定，只能說要大量去摸熟後台操作邏輯，才能跨過心中那個門檻囉！
網站架站平台客製化程度（由高至低）
（極高）WordPress：有海量的版型、外掛、教學資源 ，全方位架站從部落格、形象網站到電商網站，全都包起來！
（中等）Shopify ：以架設電商網站為主，重點在於電商的安全性與擴充功能，且 Shopify App 滿多需要訂閱付費的，整體的介面也比 WordPress 少一點複雜，畢竟有相當的限制，可以確定的 Shopify 目前是要將東西賣到國外的唯一首選平台。
（極低）Squarespace、Wix、Weebly：基本上選好版型後就不要有其它特別的慾望了）
跟 WordPress 一樣有很多外掛可以使用，而他們兩者在外掛最大的差異是：WordPress 外掛免費版真的是超多，且很多不用到付費版就可以完成需求，可以參考我寫的另外一篇文章：WordPress 外掛推薦精選(2020 最新)；Shopify App 也不少，但要滿足小需求的功能都要付費，而且幾乎沒看過一次性購買，而是訂閱費（每月付款）。
注意事項：很多在門外觀望的使用者，其實不知道無論是 WordPress 或 Shopify 的版型或外掛看起來很像五花八門，每個都說自己的功能多強、評價多高，但，等你真的去安裝使用後會陸續發現「意想不到」的問題需要解決，並沒有想像得輕鬆！終究還是需要親自去測試與修正，找出最佳組合才能讓網站順暢運作。
若想要另外了解如何更自由地進行網頁排版與配置（Shopify 平台本身在這個設定上的預設功能相當陽春），可以參考此篇：如何打造 Shopify 電商網站客製化設計排版(2020)。
進入本文重點，用 Shopify 打造電商網站是我今年剛進公司得到的任務，我完全沒用過 Shopify，很多時候會在其後台尋找 WordPress 的影子，進而發現以往隨心所欲打造網頁的自由度不復存在。就拿一個網站最基本的「建立頁面和排版」這兩種最基本的功能，在 Shopify 竟然沒有！有是有，但就跟前述所說的都被限制在極少的設定選項，無法任意新增區塊和任意排版。
因此，為了解決這個問題，我開始深入了解 Shopify 的運作邏輯，起初以為應該就是簡易版的 WordPress 應該很好上手，結果想要的都沒有 XD！
首先，老闆預期上線的時間點是四月六日（原預計是四月一日，但該週適逢清明連假，所以網站上線就沒人在上班了其實不太妙，所以上線日期最好在平日時間中間左右，盡量不要在上線隔日就放假的時間點），根據以往打造網站的經驗，兩個月差不多也是架設中小型網站的時間，於是我規劃了 Shopify 網站進度時程表如下圖：
需注意的是，其實時間是滿緊湊了，但因為我們公司原本就有一個用 WordPress 架設的網站，只是今年要改成 Shopify 平台，內容上原本就有了，所以至少可以減少兩三週的文案撰寫和「網頁視覺設計」的時間，亦即按照正常的時程，至少三個月會較理想。備註：進度表中紅色的數字代表放假，但卻有底色，原因就是我有加班囉（至少九天吧！）。
我安排自己用一週的時間從零快速了解 Shopify 後台操作、研究版型設定、Shopify App 設定等，接下來就是邊做邊學、遇到問題邊找答案解決。看似平凡的旅程卻充滿各式各樣的問題襲來，還好，最後都能一一克服與舉一反三。以下列出我這兩個月以來威猛使勁的學習方法與資源分享：
猛力快速入門 Shopify 電商架站學習計畫
申請 Shopify 帳號免費試用 14 天，先將後台摸一圈（起手式）
除了使用公司已付費版的，我也自己用帳號申請一個 Shopify 帳號進行免費試用，最多 14 天，客服就不讓我繼續延期 XD，所以我個人後來自掏腰包購買 Basic Shopify 方案，每個月 29 美金，一年大約一萬多塊台幣，為了學習，這點錢是滿值得的！
為何不直接用公司的 Shopify 網站來操作？因為架設過 WordPress 網站的人都會遇到的問題就是安裝了某些外掛後結果網站爆掉 GG，可能是與版型衝突、也可能是外掛之間的衝突，所以要測試網站最好還是建立一個「測試站」來使用比較安全，不太好直接拿公司的囉！
在去 Google 之前，先進入 Shopify 後台繞一圈，大致有個印象每個設定的位置、每個項目點進去看看，會出現哪些選項，這個階段不用每個都徹底了解。再加上 Shopify 的 Onboarding 引導初學者流程也是做得不錯的，「讓人覺得好簡單」，進入後台首先印入眼簾的是三個步驟：Add product、Customize theme、Add domain，「咦？根本幾乎完成就可以開賣了？！」也沒那麼快啦，電商除了網站之外，還需要設定金流和物流，這兩項之後需要再設定。
但後台有中文版嗎？目前沒有提供中文版後台，但可以在電商網站設定中文版，設定方式參考這篇：Does shopify supports chinese language?
除非消費者是中文世界為主的台灣或其他國家，不然若是面向國際還是都用英文版比較方便，也讓自己去時時刻刻了解每個英文用字的方式。Shopify App Store 儘管有提供中文版，但只有局部翻譯，且大部分的 App 開發者都是用英文撰寫內容，所以改成中文版也沒什麼特別意義。
在 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）
瀏覽 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 Blog
簡介：A blog about ecommerce marketing, running an online business and updates to Shopify’s ecommerce community. 說明：官方部落格除了提供很多 Shopify 平台的更新資訊，還有電商經營方法與數位行銷觀念、創業家故事等，可以在學習之餘慢慢積累產業知識，扎實地建立自己的思維模式。
如果是想要多了解 Shopify 程式語言 Liquid 的話，可以閱覽 Shpoify Partners 的官方部落格：Learning Liquid，以及 Shopify 官方 Liquid 文件
Facebook 臉書社團（偶爾逛逛找問題挑戰自己）
Shopify Taiwan 台灣品牌 & 跨境電商（台灣） Shopify Taiwan Community Group（台灣） Shopify For Beginners（國外）
說明：台灣比較少人使用 Shopify，能在臉書社團找到台灣人討論 Shopify 的實則稀有，相對於其他電商平台如 Shopline、Cyberbiz 等，雖然討論熱度不高，但還是有不少人發問的問題與需求值得從中挖掘，偶爾去逛逛了解自己還有多少成長空間。
最近開始慢慢發現有少數台灣廠商開始有提供用 Shopify 架設電商網站的服務，以及是否 Shopify 也將重心放在亞洲市場？我們看到 Shopify 開始有繁體版本而且還在測試中，加上未來 Shopify 能更在地化、接地氣串接完善物流和金流，那現在入手 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 專家（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 網站設計文章訂閱
歡迎訂閱我們的電子報，不定期更新內容包含「網站設計與架站的實務經驗分享」、網站設計流程與規劃，前往訂閱去！Let’s GO！
兩大 Shopify 必先了解資源庫
Shopify Theme（選擇網站版型） 簡介：Ecommerce Website Templates — Free and Premium Themes for Your Online Store. 說明：版型設計算是不錯看了，選擇性真的滿多的，若是付費版型會更多樣豐富之外，在產品篩選器的功能會比較強、排版變化也比較精彩，普遍來看平均是 $180 美金上下。其他平台 Shpoify 付費版型也可以瀏覽：Themeforest — Shopify Themes，之後打算來買幾個嘗試用用看！
Shopify App Store（選擇應用程式）
簡介：Ecommerce App Marketplace — Using the Shopify App Marketplace To Expand Your Store’s Functionality.
說明：我的經驗是，幾乎好用的、想要的功能都需付費，而且是每個月都要付款的訂閱費，例如說專門打造網頁排版的 PageFly Advanced Page Builder 的 Sliver 方案每個月 $19 美金（實際價格以官方發布為主）。所以在挑選這些 App 組合後，要計算一下每個月的成本共多少。
開網店的路上你不孤單
Free Business Tools — Online Tools for Small Businesses
說明：開設網店通常還需要許多數位工具相扶持，除了上述所列出所有的教學與社群支援外，Shopify 還提供免費的線上工具供開店老闆、創業者使用，有點酷，無論是 Logo 產生器、Slogan 金句產生器等都可以玩玩看！
解析其他 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 有：
2. MailChimp（實際上名稱是 ShopSync，MailChimp 官方建議使用）
3. Sales Rocket 等等，記得在小視窗往下捲動，還有剩下沒在畫面中的，右邊都有附上該應用程式的官網和購買連結，超方便！
有注意到我的 Chrome 瀏覽器上方還安裝了超過二十個的 Extension，排排站站好是驚人！我之後會再另外寫一篇分享我用的這些瀏覽器擴充功能用在哪些地方與使用方式，包含 SEO、網站技術分析、網頁設計中的字型解析等。
Shopify 後台還是有可以優化的地方
文字編輯器基本功能不是很全面 Product page 的編輯器滿難用的，css 樣式也怪怪的，例如 h5 的 margin 高度異常的高，或是複製貼上文字時即使已經清除格式，還是會產生一些不必要的程式碼，我是直接手動方式貼在編輯器中轉換程式碼狀態後再切換回來進行排列與文字設定，滿麻煩的。
沒有一個真正好的媒體檔案素材管理 在 Shopify 後台管理沒有一個很好的媒體檔案管理方式，圖片上傳後不能有資料夾分類和搜尋，很不直覺且難用。如果我有一百個產品，照片應該會超過兩三百張，很難想像這怎麼處理，反而是要在頁面中要上傳圖片時才會發現有這個「圖片空間」XD”（妙哉！）
即使官方有推薦此 Shpify App — Image Manager，但其功能有限，只能篩選和搜尋，依然無法建立資料夾進行分類，重點是還真不便宜！另一款 Variant Image Penguin 專門處理 Prodcut photos 看起來有一點點幫助，同樣價格不便宜然後功能應該還能更好，所以就等待囉！暫時還是先用預設的方式執行。
目前尚不支援 SVG 圖檔 用過 SVG 圖檔格式的應該就回不去了！因為解析度真的太好，完全不怕電腦和手機的大小螢幕解析度，而且清晰的可以！尤其用在 Logo、小圖示呈現都不怕品質變差。Shopify 目前依然尚未支援，可參考官方文件。
圖片上傳後 Shopify 會自動壓縮 照理說這功能滿棒的，可以省下優化圖片的時間與人力。但是就變成無法自己「完全掌控」並決定圖片品質的高低。因為有時候就是想要在品質和圖片壓縮之間取得平衡（可以是八成給品質、兩成給網站效能），而非百分百以效能為主壓縮圖片，設計師應該都有這方面的小堅持吧！
Shopify App 評價資訊少，使用者挑選時判斷資訊不夠多 目前每款 Shopify App 頁面的評價資訊主要有評分（幾顆星）和評論（使用者回饋留言），其他技術細節、被購買（使用）次數都沒有，而覺得最重要的資訊還有此 App 的開發者最新更新時間為何時，這點超重要！
才能讓我們這些使用者直接判斷 App 有沒有在更新，若超過一年、兩年以上都沒更新，那其實可以合理推測此 App 未來可能成為孤兒，不太適合使用，因為平台、網路環境等不斷更新，App 若不即時更新，應該會有很多 Bug 出現。
像是 WordPress 外掛、Themeforest 就有相當豐富的資訊提拱給使用者評估是否能選到穩定、優質的數位產品。
實戰經驗分享，而非僅止於網路資料整理
我很重視實戰經驗，因為真的是實際去做一遍後才會發現不是每款外掛都適用於自己的網站，因素與變數太多了，且有些外掛還過時卻依然存在於被推薦的清單中，作者本身若不是真的實際用過體驗過，單純只是從很多網路文章篩選做個重點整理而已，這樣是不能提早了解「潛在的實際問題」，所以跳下去 Make your hands dirty 吧！
行文至此，接下來一週內會持續更新內容，因為內容有點多，所以分幾天寫完這一篇文章，歡迎隨時回來逛逛 XD！預告的內容主題如下：
Shopify App 推薦精選清單 分享我在實際研究每個需求列出的 App 清單，經過一個一個篩選、比較、分析、實驗後「真心覺得好用的」。例如：用 PageFly 打造多樣版型的網頁、用 InstaShow 打造在網頁上瀏覽 Instagram 的極佳體驗等。
這裡先附上我的 Shopify 篩選測試清單，先針對需求找出相關的 App，並按照官方的分類方式進行紀錄（之後要找相關的功能比較方便），再來一一實際安裝和測試，寫下使用心得與過程，測試過的就打個勾，確定要安裝再打個勾。此份清單會繼續更新，可以將此模板拿去用，或蒐藏連結即可，因為我同樣會持續更新此清單，加入更多的註解和精選推薦喔！
裡面其實還附上分析其他同樣用 Shopify 平台建立的網站，我也想了解其他公司都是安裝了哪些版型和 App，當作參考用。
Shopify 電商網站設計與建置的流程
說明：概要描述架設 Shopify 網站的過程與設計方法、使用的工具。我會根據此文中那張圖「網站進度表」的每個階段在做什麼的工作內容，以及思考方式與原因進行簡介。
Email Marketing — MailChimp 電子報行銷自動化設定
有設定過 EDM 系統的人通常是寄出電子報，還可以測試標題的 AB Testing，而實際使用 MailChimp 設定自動化行銷的相對應該會比較少。我會針對電子報行銷自動化做一個設定示範，也會分享我從哪裡學習到這些設定技巧。
如何使用多重優惠碼？
（目前 Shopify 每張訂單只能使用一組優惠碼）
需求描述：能否同時套用一組以上的優惠碼？目前 Shopify 每張訂單只能使用一組優惠碼。
Shopify App：Discounts Combine
評價：這款 App 或許能解決，但評價不高，目前平均才三顆星，且近期負評很多。
實際使用後：限制的確不少
1. 必須在 cart page 執行，且不能在 checkout page 運作 2. 此優惠碼在 Shopify 本身建立時必須設定不被限制使用一次 3. 這款跟 Shopify App — Sales Rocket 衝突，無法同時運作
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 相衝突！只能二擇一的意思囉！