如何客製化 Shopify 網頁設計排版 (2022)

分析 Shopify 網站客製化頁面的實務步驟，並比較 Shopify 和 WordPress 建立頁面的差異（更新時間：2022.5.18）

這篇文章對建構 Shopify 網站相當重要，根本直球對決！相信所有要開始使用 Shopify 架站的使用者都會遇到最基本也是最重要的需求：「如何打造客製化網頁設計與排版」。另外，我也錄製了影片比較 Shopify 和 WordPress 這兩個後台操作在網頁排版時的優劣，幫助大家理解一個成熟的網頁編輯器會是什麼樣的體驗，此文會不定時充實內容，歡迎蒐藏與分享！

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

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

Shopify 網頁設計排版的解決方案

在 Shopify 進行客製化網頁設計的解決方案大致分為四種：

1. 尋找合適的免費或付費版型（付費版功能較多）
2. 安裝具有頁面編輯功能的 Shopify App（對一般人來說是最佳的選擇，搜尋關鍵字為 Shopify Page Builder）
3. 找工程師撰寫網頁程式碼（執行費用、時間與溝通成本較高）
4. 自行編輯網頁程式（若自己有網頁程式基礎或開發經驗，則可以考慮）

以上的組合方式可以是：透過第一和第二項來建構 Shopify 網站基礎、主要的頁面編輯自由度，然後局部特殊功能或需求再用第三項尋找外包工程師來解決。

在思考要建立 Shopify 網站時，執行步驟如下：

步驟一、尋找合適的免費或付費版型（付費版功能較多）

先從 Shopify Theme Store 和 ThemeForest — Shopify Templates 尋找比較符合預期或大方向需求的版型（通常付費版功能與設計會比較多樣）進行篩選，有了相當的基礎後再去擴充相對省時省力。當然也可以一開始選用比較陽春的版型，但未來要客製化就會相當費工，從視覺設計樣式修改到功能設定都會花費相當的時間成本。

至少先找好較符合現在或未來可能的需求版型，可以省下一定的功夫。

也可參考 Shopify 官方撰寫的相關文章，其推薦免費和付費版的版型：Browse the Best Shopify Themes for Your Online Store。

我使用過的有 Minimal（免費版型）、Prestige（付費版型：$180 美金），當你真正實際操作過就會發現每個版型提供的「基本頁面排版」、「互動功能」等都不太相同，所以好好瀏覽版型的頁面介紹，再去試用版型，先把裡面的功能摸一圈，最後再決定要不要購買。值得一提的是，在 Shopify Theme Store 中的付費版型可以先試用安裝（Try theme），可以預覽但無法發布上線，只有購買之後才能（You can publish this theme after buying it）

我有建立自己的一套 SOP，就是試用版型期間，先將所有頁面都開出來看，因為 Demo 中不一定會呈現所有版型本身提供的所有功能選項，意思是先了解此版型的極限在哪，一一將畫面記錄下來（我是放在 Figma 中），不僅與團隊或客戶溝通方便，也可以幫助記憶、作筆記。

購買 Shopify 版型後的注意事項

購買一個 Shopify 版型後，是否能使用在數個網站中？官方回應說不行，一個付費版型只能套用在一個 Shopify 網站：

When you purchase a paid theme from our theme store, it is licensed only to 1 store. You will need to purchase it again on your second store. More info here: Refer to Adding, previewing, and buying themes

Shopify 購買的版型並不能將 Demo 匯入，亦即不會有 Demo 中呈現的所有範例圖片和文字內容，得到的是一片空白內容，只有首頁會有基本的版型設定，僅此而已，有點傻眼喵咪 🙀！我是有查過可否用一些方法匯入，但 Google 的結果似乎只有某些版型才有此功能。

每個版型提供的設定都不盡相同，所以將版型本身提供的 Template 先分別建立頁面，才能瀏覽並了解各種 Template 所能提供的功能與樣式，例如建立 Page Template、Product Template、Collection Template 等。必須自行手動開啟所有頁面和設定，然後暫時放上假文字和圖片填充版面，才能實際看到畫面長什麼樣。

版型並不包含 Demo 中安裝的所有 Shopify App，所以必須要自己分析並找出來該 Demo 所使用的 App，然後再手動一一安裝。關於這點，的確也是個困擾，會讓人以為買了版型之後就「高枕無憂」了。

而如何分析這網站是否用 Shopify 建立的，以及使用了哪些版型和 Shopify App，可以安裝此兩個工具：Shopify Inspector、Shopify App/Theme Detector by Fera.ai，但你會發現還是無法完整的分析出所有的資訊，進階的作法就是檢視一下網站程式碼看能不能找出蛛絲馬跡，例如若是在官方 Shopify Theme Store 購買的版型，則開啟該網站的「檢視程式碼」，搜尋 theme_store_id，假設為 796，則再去 Google 搜尋「shopify theme 796」，就找到了；而若顯示 null，則有可能是在第三方平台購買的，這就要慢慢比對了。可參考此篇文章 How to Find Out Which Shopify Theme a Store is Using，說明滿詳細的。

試用付費版型最多可以瀏覽 19 個（You can preview up to 19 paid themes, which allows you to compare different themes before buying.）我是還沒試用安裝超過這個數量，若超過會被限制，那或許移除之前的就可以繼續測試新的？ 這之後來實驗看看。

想了解更多有關試用版型問題，可以參考官方文件：Adding, previewing, and buying themes

步驟二、安裝具有頁面編輯功能的 Shopify App（對一般人來說是最佳的選擇）

付費購買 Shopify App —具有頁面編輯器或選擇可以自由插入 Sections 於頁面的方式，才能建立更彈性的的排版與功能設定，不然大家都買版型後結果每個人的網站都長得差不多（免費版會有很多限制，例如最多只能建立兩頁之類的）。而是否需要購買，則端看需求而定，若使用的版型已經滿足，那其實可以先觀望就好。

如何找到適合的 Shopify 網站頁面編輯器

以 WordPress 來說，我個人偏愛使用 WPBakery Page Builder，已經相當熟悉其優劣，非它不用。而 Shopify 我先從官網找起，在 Shopify App Store 中輸入關鍵字：「Page Builder」，於搜尋結果清單中找到前兩三名評分等級最高和評論數量最多來決定是否安裝試用。國外這篇文章「14+ Best Shopify Page Builder Apps」也可以參考看看，有針對各家工具的評分與概述。

因為我當時時間有限，無法一一比較測試，所以我就以評分等級一定要大於4.5 顆星、評論數要真的很多才有公信力來判斷是否花時間測試，選出了兩款 Shopify App：PageFly Landing Builder 和 Shogun 網頁編輯器。

我是先選用 Shogun網頁建構器，但用了三分鐘就立刻移除，真的沒用過這麼難用的頁面編輯方式，會卡在很多地方窒礙難行。幾個月後決定再給它一次機會，然後又再度放棄！應該是很不直覺的原因，也可能是因為我已經使用 WordPress 相當成熟的 WPBakery Page Builder 太好用了，導致回頭使用「相當陽春且 UX 操作體驗不佳」的外掛就會立即造成極大的痛楚（為何行銷影片都講得很簡單？讓人覺得很容易上手，實際卻不如預期）

Shopify 網頁編輯器： PageFly Landing Page Builder（推薦）

第二個試用的是 PageFly Landing Page Builder，大致摸了一圈，了解 Pages 的分類方式與設定邏輯，OK！還算是好的開始，來到了產品核心重點：建構頁面排版，卡住了。而 PageFly 一個很棒的是，他們公司在 App 中有 Online Chat 線上交談，於是我就去尋求技術客服，其中一位就快速幫我錄製了基本的操作影片和英文解釋，很便利！我之後陸陸續續問了應該有超過五十個以上的問題吧！大致上都有解決到需求，有些功能還在開發中，產品也陸續在更新中。

在決定安裝此 App 之前，可以先去官方影片頻道看看操作方式與介面，多少了解一下是否符合自己心中所預期的，也可以去看一下官方的幫助中心頁面，逛逛看文件清不清楚、是否完整，作為初步了解此產品的成熟度。

影片頻道 PageFly Video Tutorials
幫助中心 PageFly Help Center

對！我就選了這款 Shopify App — PageFly Landing Page Builder 當作此次 Shopify 網站的「頁面建立與設計排版」的主要工具，這對網頁設計師和初次架設的人來說，真是一個福音！當然還有相當的進步空間，但至少能滿足目前自由排版的一些基礎設定，相信未來發展會越來越成熟，跟 WordPress 頁面編輯器一樣全方位。

若你會基本的 html/css 基本網頁語法，會更能提高編輯頁面的效率。

其實還是有其他 Page Builder 類別的 Shopify App 可以看看，我未來有空再去嘗試使用與測試，並分享出來。

PageFly 官方影片教學

若貴公司或你已經安裝 Shopify App — PageFly Page Builder 想要用這個客製化你的網頁設計排版，可以參考其官方影片教學 TUTORIAL — PageFly Elements，非常簡單易懂！在實作過程中若遇到問題可以先看其 YouTube 影片教學或線上詢問官方客服（在 PageFly 後台左下角會看到 Live Chat，幾乎有問必答）

然後若真的還是卡在某個地方，也可以在台灣非官方的 Shopify 的 Line 社群留下問題並截圖囉！我可以幫忙研究看看。

若貴公司沒有工程師團隊或會寫 CSS 的網頁設計師，就直接使用 Shopify App，而我偏好使用 PageFly。

選 PageFly 的優勢

1. 因為我天天在用，有問題可以問我 XD（但有些設定起來很麻煩或真的必須靠其它 Shopify App 或寫 CSS 才能達成，需要您自己去花時間去測試囉，我這邊可以給個大方向）
2. 安裝 PageFly 之後，進入裡面左下角有個線上客服，他們很熱心回應任何問題（英文）。最近他們團隊自己有安裝即時翻譯中文，所以你打中文的時候，他們看到的應該會是即時翻譯成英文。
3. 他們進步速度很快，最近又推出新功能（根本是越來越符合我心中理想的狀態，雖然還能不斷優化），瀏覽官方最新消息（2021/3/22）
4. 官方教學影片放在 YouTube 真是豐富：PageFly Shopify Page Builder App — YouTube Channel

備註：功能再強，也不是萬能。所以端看需求來評估實際的解決方案。而此類 App 通常針對基本的「網頁設計和排版」功能有相當客製化的支援。實務上，會 CSS 的設計師會比較吃香一點，因為此 App 搭配一些基本的 CSS 能力會是更完美的組合。

實際使用遇到的問題

若你使用的 Shopify 版型是 Prestige，然後又安裝 Shopify App：PageFly Landing Builder，可能會遇到一個問題是，在手機上瀏覽行動版「產品頁」時，產品圖 Product Images 會呈現空白畫面。

後來線上詢問 PageFly 客服，經過查詢後發生的原因是：版型 Prestige 和 PageFly App 有衝突。他們工程師幫忙加了程式碼修正後就正常顯示了！（PageFly 即時線上 Chat 客服真的很有效率）

另一種選擇：在 Shopify 網頁中插入區塊進行排版

網頁編輯器如前述的 PageFly 在設定每個頁面時，要設定的細項其實相當多，注意事項也不少，要實際操作很多次並且參考文件和尋求官方協助才會稍微能好好上手。若希望能再節省一點時間與精力在學習的門檻上，，也是有另一種 Shopify App，就是選用插入 Sections 的方式在頁面中，而非「整頁重新砍掉重練」。

我最近才發現有這種方式，透過研究其它 Shopify 網站時發現的：為何能在產品頁（Product page）中間能穿插這些區塊內容？用 Chrome Extension 偵測結果也不是使用網頁編輯器 PageFly，那是怎麼做到的？在 Shopify App Store 搜尋關鍵字 Sections 會發現一些蛛絲馬跡，需要注意的是功能必須要能使用在產品頁（Product page）中，所以要看這些 App 中是否支援，通常也費用也比較高。以下列出我最近快速測試的 App：

Sections Pro（只需基本的功能可使用）

• 網址：前往瀏覽
• 費用：每月 $4.99，2 天免費試用
• 評價：5.05 顆星 (47 評論
• 實際測試：設定簡單、主要使用的是 Shopify 預設基本的 Sections，樸實而無華（比較陽春的意思）、可以調整 Section 順序

SectionCloud（未來會考慮使用）

• 網址：前往瀏覽
• 費用：每月 $14.95，7 天免費試用
• 評價：5.05 顆星(1 評論)
• 實際測試：設定簡單、版型豐富、版型設計有質感、客製化設定、不能調整 Section 順序、影片簡介

SectionHub Page Builder（跟 SectionCloud 相似，但版型普通）

• 網址：前往瀏覽
• 費用：每月 $9.99
• 評價：4.55 顆星 (19 評論)
• 實際測試：設定簡單、版型豐富、版型設計普通，不能調整 Section 順序

Sections Anywhere（安裝失敗 =.=” 之後再找時間測試）

• 網址：前往瀏覽
• 費用：每月 $49，30 天免費試用
• 評價：5.05 顆星 (47 評論)
• 實際測試：連線失敗，稍後再測試

陸續更新……（好多筆記，逐一整理）

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

步驟三、找工程師撰寫網頁程式碼（執行費用、時間與溝通成本較高）

針對局部需求，實在沒有版型或專門的 App 可以解決，那這時可以找外包工程師技術支援。例如選定的版型在產品的圖片上沒有 Slider，只有多圖排列顯示，或圖片顯示不是滿版想要改成滿版等。這時可以到 Shopify Experts 官方頁面中或第三方外包平台看有沒有公司或工程師能處理這樣的問題。

備註：有關版型同質性的問題，有些使用過台灣目前相當流行的電商架站平台：Shopline 或 Cyberbiz 的使用者，他們寫信告訴我由於 Shopline 和 Cyberbiz 的版型沒有那麼好看、選擇有限，而且跟其它同樣使用此平台的網站看起來差不多，這樣就很難製造差異化。重點是，Shopline 或 Cyberbiz 架站平台是封閉的，沒有開放第三方開發各式各樣多變的版型或外掛，因此讓 Shopify 這來自加拿大架站平台更顯得擁有豐富的選擇、海量的資源和使用彈性。

加上 Shopify 已經逐漸在地化，例如金流與物流的串接等，已經有不少台灣公司可以提供技術支援解決這類問題，一旦 Shopify 與台灣陸續接軌與發展，這些問題相信官方都會逐一解決的，指日可待！而在 Shopify App 中，台灣的開發者也看到了需求缺口，開始打造一般使用者就能自行安裝與設定的 App，如金流相關 – 台灣商家必備的電子發票 APP：台灣發、支援台灣超商取貨：CVS 台灣超商取貨，物流相關 – BOXFUL電商物流 ‑ 出貨小幫手 (Taiwan) 等等，對在台灣 Shopify 的使用者來說是一大福音！看更多台灣的 Shopify 金流介紹。

步驟四、自行編輯網頁程式（若自己有網頁程式基礎或開發經驗，則可以考慮）

如果自己具備網頁程式基礎，如 html/css、JavaScript 等，想要自行編輯程式碼進行客製化網站，那可以考慮多了解 Shopify 所使用的程式語言 Liquid，閱讀 Shpoify Partners 的官方部落格：Learning Liquid、YouTube 頻道：ShopifyDevs，以及 Shopify 官方 Liquid 文件、Shopify Liquid GitHub，或直接瀏覽 Shopify Open Source Software Projects（這資源有夠棒的！）

免費試用並學習 Shopify 和 PageFly？

1. 註冊 Shopify（十四天試用期）
2. 安裝 Shopify App：PageFly（選擇免費方案進行學習）
3. 有問題就寄信給我 irving520@gmail.com 或加入 Shopify 網站設計與架站學習交流：Line 社群，大家一起交流與學習！

嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計接案的經驗，對於這類平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力（但建議盡量使用原本預設的功能，而不建議過於改造原本網站架構和外掛程式碼，影響其日後更新。因為 WordPress 版型和外掛都有專屬的開發者或公司，大部分都會不定時更新，更新後很有可能導致跟舊版的 WordPress 主程式不相容等其他類似的問題）

網頁設計師的定義：以網頁視覺設計為主，前端程式為輔，比例是 9：1。會基本的前端程式如 html、css，加分的經驗則是了解一些基本的 Javascript 語法，使用 Bootstrap 前端框架和 jQuery plugin 等，以及使用過架站平台如 WordPress、Shopify 等。

Shopify vs. WordPress 網頁排版設定的差異

很多已經熟悉 WordPress 架站並善用組合各種 WordPress 外掛的人應該會以為用 Shopify 建立網站跟 Wix、Squarespace 等這類平台一樣簡單很快就能上手。若你或老闆對於網站「無欲無求」，只求有就好或完全套版不求客製化設計，那，使用一般的架站平台就能滿足需求；若對網站有更多的想法和創意想要嘗試，則會發現：困難重重，尤其是最基本的「網頁排版」根本動彈不得。

我起初也是抱持著這種心態想將 Shopify 架站輕鬆秒殺，殊不知才剛使用就發現，最重要也最基本的「網頁排版」功能在預設狀態時只有相當基本的功能可以使用，讓我不得不尋找其他解決方案。

我錄製了一小段影片快速概述一下兩個平台在建構一般頁面排版時的差異（沒有分析產品頁和部落格頁）

以下是 WordPress 和 Shopify 的「頁面編輯器」外掛的快速比較：

WordPress

1. 預設的古騰堡編輯器 (Gutenberg)：功能不斷進化中、免費、設定項目不少，對於 一般人來說已相當容易排版。
2. 外掛可以使用相當流行的 Elementor、Divi Builder、WPBakery Page Builder 等頁面編輯器 (Page Builder)，相當多元且客製化功能強大！
3. 這些編輯器中，不僅提供琳瑯滿目的功能，還可以繼續新增 Add-On 加強各式各樣的火力支援，讓頁面構成與互動特效精彩可期！
4. 在撰寫 CSS 時也很友善，可以命名 ID 和 Class 來作更彈性的樣式設定
5. 根據不同的編輯器有提供免費版（古騰堡編輯器）、一次性付費版（WPBakery Page Builder）、訂閱版（Elementor Pro）

Shopify

1. 預設的編輯畫面就像部落格文章一樣，只提供一個文字編輯器和簡單的設定，就沒有了。
2. 使用 Shopify App (類似 WordPress 外掛)，可以在 Shopify App Store 中搜尋 page builder，也是有數款 4.5 顆星以上的可以選擇，我個人是使用 PageFly Landing Page Builder (4.9 顆星，5434 次以上的評論)。但比起 WordPress 頁面編輯的外掛大軍來說，還是有相當的進步空間，例如版面可以設定的細節有限、介面的操作體驗有待提升等。
3. 提供基本的幾個排版選擇、有限制的整合其他幾款 Shpoify App 功能
4. 可以撰寫 CSS，可以命名 ID 和 Class 來作更彈性的樣式設定
5. 完整的功能沒有提供一次性付費（都是訂閱費：需要綁定信用卡每個月自動扣款的意思）

擴充功能在 WordPress 稱為外掛 (Plugin)，在 Shopify 稱為 App
WordPress Plugin 基本上類似 Shopify App

常見主題

如何製作與優化「網頁圖片」？

1. 如何設定網頁圖片尺寸
2. 如何超快速大量輸出網頁圖片（而不是用 Photoshop 一張一張輸出）
3. 如何優化網頁圖片

詳情可瀏覽此篇：如何製作與優化網頁圖片？

其它問題

如果一次安裝兩個以上的網頁編輯器 Shopify App 在網站上會如何？

記得之前有人問過如果一次安裝兩個以上的網頁編輯器 Shopify App 在網站上會如何？例如在同一個 Shopify 網站中同時安裝使用 PageFly 和 Shogun 或 GemPages 兩款以上的 Page Builder 會發生什麼事？若以 WordPress 來講，安裝多種頁面編輯器的外掛是會影響網站效能的。以此推測，安裝兩種以上的頁面編輯器 Shopify App 會不會也可能降低網站效能？只能說直接實際測試了才知道，一般來說功能過於相近的兩個 App 我是會盡可能避開囉，很容易增加彼此衝突的機率。

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

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