全面分析 Shopify 如何進行網站客製化頁面設計的實務步驟，並比較 Shopify 和 WordPress 建立頁面的差異（更新時間：2024/02/14）
這篇文章對建構 Shopify 網站相當重要，根本直球對決！相信所有要開始使用 Shopify 架站的使用者都會遇到最基本也是最重要的需求：「如何打造客製化網頁設計與排版」。
此篇文章內容將於近期重大更新，會新增更充實的講解並且影片操作輔助說明，記得這一兩個月不定時回來瀏覽，若想第一個得知最新訊息可以加入 Irvinglab 爾文實驗室官方 Line 或 Telegram 帳號！
另外，在此頁面最下方有先錄製了影片比較 Shopify 和 WordPress 這兩個後台操作在網頁排版時的優劣，幫助大家理解一個成熟的網頁編輯器會是什麼樣的體驗，此文會不定時充實內容，歡迎蒐藏與分享！
「實戰經驗分享，非只是網路資料整理」- Irving 爾文
嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計的經驗，近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題，可以前往填寫表單留下訊息或需求給我，我會盡快回覆！
Shopify 網頁視覺設計與排版的解決方案
Shopify 進行客製化網頁設計的解決方案的 5 種方法：
- 尋找合適的免費或付費版型（付費版功能較多）
- 安裝具有頁面編輯功能的 Shopify App（對一般人來說是最佳的選擇，搜尋關鍵字為 Shopify Page Builder）
- 使用 Shopify2.0 的建立頁面範本功能，進階設定搭配中繼欄位 (Metafields)
- 找工程師撰寫網頁程式碼（執行費用、時間與溝通成本較高）
- 自行編輯網頁程式（若自己有網頁程式基礎或開發經驗，則可以考慮）
以上的組合方式可以是：透過第一和第二項來建構 Shopify 網站基礎、主要的頁面編輯自由度，然後局部特殊功能或需求再用第三項尋找外包工程師來解決。
下方投影片是我在 2022 年一場 Shopify Meetup 分享的內容，概要簡介「Shopify 網站如何客製化設計」的五種方式，可以選擇其中一兩種，也可以交錯使用，端看實際需求與當下現有資源而定。
Irving 爾文的實戰分享 Shopify Meetup 2022 – Irvinglab 爾文實驗室開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱
若有網站設計與建置的需求，歡迎填寫表單，與 Irving 爾文深度諮詢與討論！
在思考要建立 Shopify 網站時，根據以上五種方法作為執行步驟，如下：
Step 1. 尋找合適的免費或付費版型（付費版功能較多）
先從 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
Step 2. 安裝具有頁面編輯功能的 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 之前，可以先去官方影片頻道看看操作方式與介面，多少了解一下是否符合自己心中所預期的，也可以去看一下官方的幫助中心頁面，逛逛看文件清不清楚、是否完整，作為初步了解此產品的成熟度。
對！我就選了這款 Shopify App — PageFly Landing Page Builder 當作此次 Shopify 網站的「頁面建立與設計排版」的主要工具，這對網頁設計師和初次架設的人來說，真是一個福音！當然還有相當的進步空間，但至少能滿足目前自由排版的一些基礎設定，相信未來發展會越來越成熟，跟 WordPress 頁面編輯器一樣全方位。若你會基本的 html/css 基本網頁語法，會更能提高編輯頁面的效率。
這邊回覆在社群中最常被問的問題（但由於規則可能會不定時更新，所以通常我都會在 PageFly App 後台直接使用線上交談工具再去問 PageFly 客服一遍以確認無誤）
- PageFly 可以和選用的 Shopify 版型一起使用？答：也可以分開使用，彼此並不影響。
- PageFly 若停用了，網頁會不會消失？答：原先已用 PageFly 建立的頁面不會消失，只是無法編輯。
終於在 2023 年我新發布的文章，前往瀏覽 PageFly 初入門：快速建立 Shopify 網頁，文中將 PageFly 的基本操作與特色功能逐一概覽，並且也錄製影片簡介，希望能將細節描述清楚。由於相當多的實務上的經驗可以分享，囉唆的我將規劃一系列的介紹文一步一步講解。
PageFly 官方影片教學
假如貴公司或你已經安裝 Shopify App — PageFly Page Builder 想要用這個客製化你的網頁設計排版，可以參考其官方影片教學 TUTORIAL — PageFly Elements，非常簡單易懂！在實作過程中若遇到問題可以先看其 YouTube 影片教學或線上詢問官方客服（在 PageFly 後台左下角會看到 Live Chat，幾乎有問必答）。然後若真的還是卡在某個地方，也可以加入目前算是台灣滿活的的 Shopify Line 社群留下問題並截圖囉！我可以幫忙研究看看。在沒有工程師團隊或會寫 CSS 的網頁設計師，就直接使用 Shopify App：PageFly，其實是最佳解決方案之一。
選 PageFly 的優勢
- 因為我天天在用，有問題可以問我 XD（但有些設定起來很麻煩或真的必須靠其它 Shopify App 或寫 CSS 才能達成，需要您自己去花時間去測試囉，我這邊可以給個大方向）
- 安裝 PageFly 之後，進入裡面左下角有個線上客服，他們很熱心回應任何問題（英文）。最近他們團隊自己有安裝即時翻譯中文，所以你打中文的時候，他們看到的應該會是即時翻譯成英文。
- 他們進步速度很快，最近又推出新功能（根本是越來越符合我心中理想的狀態，雖然還能不斷優化），瀏覽官方最新消息（2021/3/22）
- 官方教學影片放在 YouTube 真是豐富：PageFly Shopify Page Builder App — YouTube Channel
- 前往瀏覽現成的超過 100+ 的 PageFly Templates，可以直接套用，緊急行銷需求打造登陸頁 Landing page 超好用！
備註：功能再強，也不是萬能。所以端看需求來評估實際的解決方案。而此類 App 通常針對基本的「網頁設計和排版」功能有相當客製化的支援。實務上，會 CSS 的設計師會比較吃香一點，因為此 App 搭配一些基本的 CSS 能力會是更完美的組合。
特色功能
PageFly 有個功能叫做 Saved Section，是以往沒有的，敲碗兩年後今年 2022 年終於出現且漸趨成熟！這功能對於建立高效率網站是超級無敵重要的，可以提高網站更新與維護效率、節省人力與時間成本，符合「不要重複造輪子」的概念。而且該功能是逐一優化到現在所看到的狀態，亦即可以在 PageFly 中將「重複性內容」建立 Saved Section，不僅相容於 PageFly 所建立的頁面中，也完美相容於 Shopify 2.0 中！可參考 PageFly Help Center 官方文件：https://help.pagefly.io/manual/saved-section/
備註：至於可以建立幾個 Saved Sections 端看選用的方案而定，例如 Free 方案只能1個，Silver 方案則有5個，實際數量限制以 PageFly 官方網站資訊為主。
PageFly Twttier
PageFly 官方的 Twitter 帳號，有時候可以看一下他們最新發布的消息、活動資訊、軟體更新、與其他 Shopify App 整合等，相當不錯！隨時掌握最新動態，可納入頁面建立時的規劃。
實際使用遇到的問題
若你使用的 Shopify 版型是 Prestige，然後又安裝 Shopify App：PageFly Landing Builder，有可能會遇到一個問題是，在手機上瀏覽行動版「產品頁」時，產品圖 Product Images 會呈現空白畫面。後來線上詢問 PageFly 客服，經過查詢後發生的原因是：版型 Prestige 和 PageFly App 有衝突。他們工程師幫忙加了程式碼修正後就正常顯示了！（PageFly 即時線上 Chat 客服真的很有效率）
如何處理 Shopify 版型和 App 之間的衝突問題？ 1. 遇到 Shopify 版型和 Shopify App 衝突：我會先找 App 開發公司請他們修正自家產品的問題，而不是先版型開發商。原因是相對而言 Shopify App 一般來說更新頻率會比版型更新要來得多，且我並不會時常更新已經設定好的 Shopify 版型，甚至不考慮。 2. 遇到 Shopify App 和 Shopify App 的衝突：你找任一家 App 開發公司他們可能會互推。通常是同類型功能的 App 發生衝突的機率應該會較高，所以同類型或功能太相近的 App 盡量選擇其中一款或選擇多功能的又好用的那個。
另一種選擇：在 Shopify 網頁中插入區塊進行排版（但自從 Shopfiy 2.0 推出後，這些就用不太著了 ^^”）
網頁編輯器如前述的 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（未來會考慮使用）
SectionHub Page Builder（跟 SectionCloud 相似，但版型普通）
- 網址：前往瀏覽
- 費用：每月 $9.99
- 評價：4.55 顆星 (19 評論)
- 實際測試：設定簡單、版型豐富、版型設計普通，不能調整 Section 順序
Sections Anywhere（安裝失敗 =.=”）
- 網址：前往瀏覽
- 費用：每月 $49，30 天免費試用
- 評價：5.05 顆星 (47 評論)
- 實際測試：連線失敗，稍後再測試
陸續更新……（好多筆記，逐一整理）
附上我的 Shopify 篩選測試清單，先針對需求找出相關的 App，並按照官方的分類方式進行紀錄（之後要找相關的功能比較方便），再來一一實際安裝和測試，寫下使用心得與過程。此份清單會繼續更新，可以將此模板拿去用，或蒐藏連結即可，因為我同樣會持續更新此清單，加入更多的註解和精選推薦喔！
Step 3. 使用 Shopify2.0 的建立頁面範本功能，進階設定搭配中繼欄位 (Metafields)
聽過不少商家想省錢，省下 Page Builer 的 App 費用，但又想客製化網頁排版，那還可以怎麼做？也是有的，直接使用 Shopify 2.0 的版型，建立無數個頁面範本，一個範本一頁內容，這樣就可以大量產生各種不同頁面排版與內容。但這不是上上之策，若達到 100 頁不就要建立 100 個範本？著實難維護不切實際，且也不是「範本」這個功能的初衷。
還好 Shopify 後台可以新增中繼欄位（metafield），這些中繼欄位其實就是變數，建立完需要的欄位後插入在範本頁面中即可。聽起來可以，但執行起來還是會有一定的客製化限制，在實作方面也可能會遇到問題而卡關，不僅受到使用的版型而定，也有可能因不會寫 html/css 去修改頁面卡在一些地方上。我會再找時間錄製說明影片講解囉！
Step 4. 找工程師撰寫網頁程式碼（執行費用、時間與溝通成本較高）
針對局部需求，實在沒有版型或專門的 App 可以解決，那這時可以找外包工程師技術支援。例如選定的版型在產品的圖片上沒有 Slider，只有多圖排列顯示，或圖片顯示不是滿版想要改成滿版等。這時可以到 Shopify Experts 官方頁面中或第三方外包平台看有沒有公司或工程師能處理這樣的問題，或是，你也可以直接聯繫我 ^^。
備註：有關版型同質性的問題，有些使用過台灣目前相當流行的電商架站平台：Shopline 或 Cyberbiz 的使用者，他們寫信告訴我由於 Shopline 和 Cyberbiz 的版型沒有那麼好看、選擇有限，而且跟其它同樣使用此平台的網站看起來差不多，容易撞衫，這樣就很難製造差異化。重點是，Shopline 或 Cyberbiz 架站平台是封閉的，沒有像 Shopify 一樣全球開放第三方開發各式各樣多變的版型或外掛，因此讓 Shopify 這來自加拿大架站平台更顯得擁有豐富的選擇、海量的資源和使用彈性。
哪些情況要請工程師寫程式碼？哪些情況用 Shopify App？
通常我偏向盡可能都使用 Shopify App 解決網站的需求，主因是 App 有後台可以自行彈性設定、有專業團隊持續更新與優化、有線上客服可以隨時詢問，等於訂閱 App 的費用就是享有這些後續的保障，但若請工程師客製化就會造成後續維護的問題，該工程師或該團隊也不太可能持續改進該「功能」，除非要持續付費，若是選擇持續付費，那不就等於是訂閱 App 的概念？若選擇不要，那該功能就是寫死的，沒人會去維護與優化，有 bug 也沒人會處理，除非自己學會程式並自己修改。還有就是，我都使用這類的快速架站平台了，就是要執行時快速，不然從頭自己寫程式碼費時又費力，盡可能讓自己有更多精力專注在「核心業務與行銷」上，網站的功能與排版盡可能用 App 解決，可以提高效率，等於僱用了很多「顧問」隨時可以線上討論，這應該是最佳狀態。
Step 5. 自行編輯網頁程式（若自己有網頁程式基礎或開發經驗，則可以考慮）
如果自己具備網頁程式基礎，包含 html/css、JavaScript、jQuery 等，想要自行編輯程式碼進行客製化網站，那可以考慮多了解 Shopify 所使用的程式語言 Liquid，閱讀 Shpoify Partners 的官方部落格：Learning Liquid、YouTube 頻道：ShopifyDevs，以及 Shopify 官方 Liquid 文件、Shopify Liquid GitHub，或直接瀏覽 Shopify Open Source Software Projects（這資源有夠棒的！），甚至使用 2022 年爆紅的 AI 對話 ChatGPT，最近我已經將其視為輔助開發的工具，時常詢問它問題，它會自動回覆並產生程式碼給我參考 ^^ 超酷！
我會開始慢慢分享如何簡易上手編輯 Shopify Liquid 語言，讓一般人也可以參考執行，敬請期待喔！
想了解 Shpoify SEO 最佳實踐方式，可以參考我這篇最新文章：Shopify SEO App 推薦：Yoast SEO 實戰教學
開始免費試用 Shopify 建立電商網站，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，若試用後不想用，也可以隨時取消訂閱
若有網站設計與建置的需求，歡迎填寫表單，與 Irving 爾文深度諮詢與討論！
免費試用並學習 Shopify 和 PageFly？
- 註冊 Shopify（官方有優惠活動，每月只要 $1，為期 3 個月，不知何時會結束，把握一下）
- 安裝 Shopify App：PageFly（選擇免費方案進行學習）
- 有問題就寄信給我 irving@irvinglab.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
- 預設的古騰堡編輯器 (Gutenberg)：功能不斷進化中、免費、設定項目不少，對於 一般人來說已相當容易排版。
- 外掛可以使用相當流行的 Elementor、Divi Builder、WPBakery Page Builder 等頁面編輯器 (Page Builder)，相當多元且客製化功能強大！
- 這些編輯器中，不僅提供琳瑯滿目的功能，還可以繼續新增 Add-On 加強各式各樣的火力支援，讓頁面構成與互動特效精彩可期！
- 在撰寫 CSS 時也很友善，可以命名 ID 和 Class 來作更彈性的樣式設定
- 根據不同的編輯器有提供免費版（古騰堡編輯器）、一次性付費版（WPBakery Page Builder）、訂閱版（Elementor Pro）
Shopify
- 預設的編輯畫面就像部落格文章一樣，只提供一個文字編輯器和簡單的設定，就沒有了。
- 使用 Shopify App (類似 WordPress 外掛)，可以在 Shopify App Store 中搜尋 page builder，也是有數款 4.5 顆星以上的可以選擇，我個人是使用 PageFly Landing Page Builder (4.9 顆星，5434 次以上的評論)。但比起 WordPress 頁面編輯的外掛大軍來說，還是有相當的進步空間，例如版面可以設定的細節有限、介面的操作體驗有待提升等。
- 提供基本的幾個排版選擇、有限制的整合其他幾款 Shpoify App 功能
- 可以撰寫 CSS，可以命名 ID 和 Class 來作更彈性的樣式設定
- 完整的功能沒有提供一次性付費（都是訂閱費：需要綁定信用卡每個月自動扣款的意思）
擴充功能在 WordPress 稱為外掛 (Plugin)，在 Shopify 稱為 App
WordPress Plugin 基本上類似 Shopify App
網頁設計小訣竅
如何製作與優化「網頁圖片」？
- 如何設定網頁圖片尺寸
- 如何超快速大量輸出網頁圖片（而不是用 Photoshop 一張一張輸出）
- 如何優化網頁圖片
詳情可瀏覽此篇：如何製作與優化網頁圖片？
客製化網頁影片播放器
Shopify 還是有些限制的，所以這時候就要另外找 Shopify App 或自己寫程式碼，搭配使用開源。最近在用這支 Video.js 打造網頁影片播放器覺得還不錯用，而且比起超難用的原生 HTML5 的 <video> 標籤好用十倍，可以了解更多 Video.js – The world’s most popular open source HTML5 player framework：https://videojs.com
以下兩個為我最需要用到的其中的功能，只要使用 video.js 加點語法一下完成：
- 影片封面圖(以該圖顯示尺寸，例如我通常直接設定滿版 background-size: cover)
- 設定響應式螢幕尺寸縮放（電腦版到行動版瀏覽，直接使用特定語法 vjs-fluid）
為何會想用這支開源？
因為在 Shopify 中，版型若沒提供可以直接設定已上傳到 Shopify 的影片檔案，只提供連結社群影片如 YouTube or Vimeo 影片，但不是每個人都會想使用社群連結的，所以這時候 Video.js 這類的影片開源就可以登場了！語法不難且基本影片播放相關的設定都有！使用方式可參閱 Video.js Guides
若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果
有趣的問題待研究
如果一次安裝兩個以上的網頁編輯器 Shopify App 在網站上會如何？
記得之前有人問過如果一次安裝兩個以上的網頁編輯器 Shopify App 在網站上會如何？例如在同一個 Shopify 網站中同時安裝使用 PageFly 和 Shogun 或 GemPages 兩款以上的 Page Builder 會發生什麼事？若以 WordPress 來講，安裝多種頁面編輯器的外掛是會影響網站效能的。以此推測，安裝兩種以上的頁面編輯器 Shopify App 會不會也可能降低網站效能？只能說直接實際測試了才知道，一般來說功能過於相近的兩個 App 我是會盡可能避開囉，很容易增加彼此衝突的機率。
若你身邊的朋友也想要學習 Shopify 架站或網站設計，歡迎分享此篇文章給他們呦！讓更多人熟悉 Shopify 強大的生態系，逐步在臺灣發展更成熟！
加入 Line 的學習社群
成為網頁設計師 | Irvinglab 爾文實驗室
- 簡介：邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
- 網址：https://share.irvinglab.com/be-a-web-designer
Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 網址：https://share.irvinglab.com/shopify-line-group
WordPress 網站設計與架站學習｜Irvinglab 爾文實驗室
- 簡介：學習 WordPress 網站設計與架站，分享實作經驗與交流。
- 品牌網址：https://share.irvinglab.com/wordpress-line-group
SEO 資源彙整與學習｜Irvinglab 爾文實驗室
- 簡介：閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
- 網址：https://share.irvinglab.com/seo-line-group
加入 WhatsApp 的學習頻道
Shopify eCommerce Web Design 網站設計學習交流｜Irvinglab 爾文實驗室
- 簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
- 品牌網址：https://share.irvinglab.com/shopify-whatsapp-channel
精選文章
Shopify
- Shopify 台灣金流、電子發票、物流與超商取貨解決方案
- 用兩個月打造 Shopify 客製化網站設計
- Shopify 網站設計流程與時間規劃
- 如何客製化 Shopify 網頁設計排版
- PageFly 初入門：快速建立 Shopify 網頁
SEO
WordPress
Web Design
Web Server
AI、設計與行銷工具
設計 Design
- Figma：UIUX 設計師和網頁設計師首選必用的線上設計協作軟體，若你是行銷人、專案管理、團隊主管、遠端協作等也都非常適用！大幅提升執行效率、降低溝通成本。最近發現一個很讚的 Figma Plugin，並且我已經購買：Table To Figma，可以串接資料庫大量建立圖片，例如串接 Google Sheets、Notion 等，而且是一次性付費！優惠不知道何時，可以去瀏覽一下。而 Musho AI 這款 Figma 外掛則是則是結合 AI 自動產生網頁設計圖，雖然很棒，但其實現存已經有爆多 Design Template 可以使用，而且更精緻，未來就看其能否推出殺手級的功能。
- Untitled UI：現成的 UI 套件，使用 Figma 的設計師一套即用，可以參考其架構與設定，多多觀摩！The world’s largest and most popular Figma UI kit. Kickstart any project, save thousands of hours, and level up as a designer.
- Fotor：線上 AI 影像修圖和去背是專攻的強項，應該有勝過 Canva，平面設計與社群模板 Template 也都有，AI 系列工具強大內建，包含：Image Generator、Face Generator、Art Generator、Photo Effect Photo Enhance、Background Remover、Object Remover、Avatar Generato 等。我當時是想找 AI Mockup 產生器發現此款，完全被打中！
- Canva：線上完整的平面設計工具集錦，若團隊沒有設計師，那 Canva 真的是神助攻！解決行銷、社群、平面設計、簡報等需求，版型一應俱全
- Placid.app：競爭對手是 Canva，兩者提供近乎相似的線上設計工具 Automations for on-brand creatives
- Creative Market：這個平台是目前看過擁有許多種類高質感的設計素材商店，雖然 Canva 擁有的設計範本也不錯，但若說 Canva 是 80 分的素材，那 Creative Market 就是 90 分 High-quality Stock Photo, Graphics, Fonts, & Design Templates
- Envato Elements：只要訂閱之後，就可以無限下載所有的付費資源素材，包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等，當遇到緊急專案需求時或作為靈感來源都相當便利！Envato 終於推出 AI 生成式圖片了！ AI ImageGen 簡介：使用 AI 和 Envato Elements 為專案打造令人驚歎的獨特視覺效果。獲得無盡的靈感，突破創意障礙。以任何可以想像的風格生成令人驚歎的圖像…只需一個提示即可！超棒的是 AI ImageGen 包含在 Envato Elements 中，無需額外費用。
- Themeforest：擁有豐富的 WordPress 和 Shopify 版型等資源，品質還不錯，強烈推薦！此外也是有販售設計素材、圖片、音樂音效等，但強項還是版型。
- Coolors：色彩靈感來源，快速建立色票與漸層的配色工具，上傳任一圖片擷取其色票、配色對比度確認、現成色卡一覽無遺直接使用等，The super fast color palettes generator!
- Iconfinder：8,400,000 多個免費和進階向量圖示、插圖和 3D 插圖。官網表示使用者知名的公司有 Google、Nike、Netflix、Adobe、Microsoft、Spotify、Amazon、Lego 等。我瀏覽了不少感覺相當有質感的 Icon 圖示庫，有各種檔案格式直接下載，也有免費的圖示們可以使用，官方也有 Figma 頁面可以直接複製！
網域註冊 Website Domain
- GoDaddy：選擇網域建議到全球最大最主流的 GoDaddy 平台購買，然後再串接到 Shopify、WordPress 或你用的架站平台。然後也不建議直接在架站平台本身購買網域，之後若要遷移網站或不想使用此平台時，網域會被綁定在平台中。所以網域和架站平台分開單獨選擇比較理想。若有網域選擇障礙或相關問題也歡迎寄信給我或透過社群傳訊息給我。
網站架站 Website Builder
- Super — Create Websites with Notion：若你是 Notion 的使用者或設計師，或想快速簡單且 No code 建立一個自己的網站或作品集，以 Notion 為主要編輯內容與排版，非常適合透過 Super 打造網頁頁面！基本的版型將 Notion 變得更像「網頁」的模樣呈現。我之後也會用這樣的組合取打造另一個網站，一旦完成會更新在這！
- Framer：輸入文字，數秒內即可生成網站的 AI 工具！這對設計師來說值得研究研究！
- Ycode：它的出現主要是對戰 Webflow 和 Framer，除了提供價格相對優惠一些，功能面還不容小覷，綜合比較下主打的 CP 值！不過動態方面 Webflow 還是比較強
- Relume：若是 Figma 設計師和 Webflow 架站的愛好者，可以玩玩看！Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
- Siter.io：又一款免程式碼的網頁編輯器 No-code website builder，介面有點類似 Figma，Siter is a no code website builder for creatives. Create fully responsive portfolios and landing pages directly in the browser.
- Webflow：這款應該是相當多設計師知道的、新潮的 No Code 架站平台，打造客製化品牌官網或作品集網站都不是難事，還有一個強項是動態設計、互動設計的功能設定，但用過之後深深覺得對「網站初學者」不友善，建議可以先使用免費方案操作後台體驗一下！Create a custom website | Visual website builder
- Readymag：發現有相對極少比例的國外頂尖設計師有在使用這個架站平台 The design tool for outstanding websites
防止數位廣告惡意點擊 Click Fraud Protection & Detection
- ClickCease：點擊欺詐保護和檢測軟體 Click Fraud Protection & Detection Software。可以檢測並阻止您的 Google 廣告活動中的點擊欺詐。自動阻止競爭對手和機器人浪費點擊付費廣告預算。至少有 40% 的互聯網流量是非人類的。機器人無意轉化，只會浪費廣告預算。阻止虛假點擊可以提高流量品質，並可以帶來更多轉化。
線上影片錄製 Online Screen Recorder
- Tella：線上螢幕錄製，可以再錄製完螢幕講解影片後直接分享連結，超級方便！尤其可以用在跟客戶或客服講解說明使用，省下不少另約會議時間，無論是團隊內部或外部溝通、錄製線上課程使用、線上簡報等都適用！Online Screen Recorder for Mac & Windows
雲端儲存 Cloud Storage
- Dropbox：目前用最久也最愛的、主要在使用的雲端儲存軟體。經過了多年，新增了不少功能，其中一個最常用的就是其推出的螢幕錄影功能 Dropbox Capture，搭配鍵盤快捷鍵快速錄製影片，錄完就直接雲端了，速度超快，分享連結都自動產生，這成為我快速跟客戶與團隊成員溝通的最佳方式！
品牌標誌設計 Logo Design
- 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.
網站分析 Web Analytics
- Fathom Analytics：愛死這款網站數據分析工具，因為 Google Analytics 最多只能儲存十幾個月的數據，那我經營網站十年以上，不就一半以上的數據都沒了？！為了找一款可以儲存所有數據工具，比較多種多款之後選擇了這款，不僅將舊版 GA 也能將新版 GA 全部匯入進去，數據全部備份啦！興奮！歡迎前往免費試用 30 天！先用用看，好用再選付費方案即可。我是選了付費方案，年費可以省 17%。
- Plerdy：全方位的網站優化分析工具，目標為提供網站優化與轉換率，擁有如此多的功能費用也算平易近人，包含 Heatmap、Session Replay、NPS、Ecommerce Analytics、Event Tracking Tools、Funnel Analysis、SEO Checker、UX assistant、Ecommerce Analytics 等，而 AB Testing 完全免費！
AB Testing 網站 AB 測試
- VWO：這款是我夢寐以求的 AB Testing 主流軟體，其功能的專業程度與順暢度相當高！可以先用免費試用三十天，有提供免費版和付費版，免費版可以當作小試身手，若專注在網站轉換率搭配大量測試各種設計與文案版本測試則可以考慮升級為付費版本。官網著名客戶有 Disney、Amazon、iPROSPECT、SimilarWeb 等
- Mida：非常輕量化的測試工具，不會減慢網站速度，避免頁面載入時間過長，以免影響轉化率。同樣有可視化編輯器，設定容易上手。另外在 AI 的説明下，只需點擊幾下即可生成新的變化創意。光光前述的這三點就相當吸引人使用看看。Lightweight A/B Testing Tool
- Convert：這也是一款非常扎實、重量級的的 AB Testing 主流軟體，跟 VWO 時常被拿來比較，官網註明客戶有 Sony、Audi 等
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick，也看了其他 YouTuber 簡介，感覺相當易用，找時間實測
- Plerdy：全方位的網站優化分析工具，其中 AB Testing 功能完全免費！太佛心！
電商分析 Ecommerce Analytics
- Shulex：電商網站的競品分析工具很多，這款我試用了一下分析 Amazon 產品頁可以自動分析評論、產出該產品的人物誌、正面和負面評論的項目與比例等，讓我可以快速了解產品的使用者輪廓與痛點，滿推薦使用看看。
- PPSPY：Shopify Store Spy & Shopify Dropshipping Monitor Tool 發現這工具真是大開眼界，可以用 AI 尋找 10 倍利潤的熱賣產品，主要針對 Shopify 商店，包含快速監控對手、進行市場研究、熱銷產品研究找到利基市場、進行大量店舖主題設計參考等
音訊轉文字 / 文字轉語音 AI Voice / Text To Speech
- Murf AI：文字轉影音，聲音質感優質，有整合於 Canva 使用。AI Voice Generator – Versatile Text to Speech Software
- Rask.ai：AI 影音配音工具，告別昂貴的翻譯員。目標是用人工智能提供不亞於人類的配音和翻譯體驗。Translate video & audio Unlock Worldwide Potential with AI
ChatGPT
- Sider AI：第一次用就驚艷！良好體驗勝過直接用 OpenAI 的帳號介面，可以快速總結網頁頁面內容、選取片段文字快速翻譯、摘要 YouTube、直接嵌入在 Chrome 瀏覽器側邊欄、有提供 Mac 使用者快捷鍵呼叫、有行動應用程式可以下載、有桌面版應用程式直接使用、反應速度很快、可以切換不同 AI 工具如 OpenAI 的對手 Claude 和 Google 的 Gemini 等也有歷史記錄等，這些功能直接開啟直接使用，大推！ ChatGPT Sidebar, GPT-4, Draw & Web accessMyMap AI
心智圖 AI
- MyMap AI：通過簡單的聊天介面將你的文字想法轉化為視覺化內容，如心智圖和演示文稿。非常適合學生、教師和專業人士使用，無需設計技能。節省時間的工具，用於輕鬆協作的視覺創作
SEO 搜尋引擎優化
- Wincher：一款追蹤 SEO 成效的工具，算是超級簡易版的 Ahrefs，可以直接連接 Google Search Console 簡約地呈現數據，用一用也是清爽的，有提供免費版可以使用，免費版最多追蹤五個關鍵字
- Pro Rank Tracker：另一款追蹤 SEO 成效的工具，介面簡約，瀏覽舒適，有 Mobile App 可以下載，提供免費試用 14 天，SEO Agency Rank Tracking & Reporting Tool
- AlsoAsked：People Also Ask keyword research tool 若要撰寫 SEO 文章，這是一款可以考慮使用的工具，輸入關鍵字後會自動產生樹狀圖表呈現內容延伸標題
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！可以玩玩看，七天內可以退款。
文案 Copywriting AI
- Writesonic：快速創作部落格、廣告、電子郵件和網站所需的內容，並進行SEO優化，這是最令人期待的 AI 內容產生軟體！其中可以安裝 Chrome extension，然後快捷鍵可以直接呼叫輸入視窗，超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot，類似 Chatbase，這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
網站客服 AI Chatbot
- Chatbase：利用您擁有的知識庫，打造一個AI聊天機器人，並輕鬆將其添加至您的網站中
網站多功能工具 Website Widgets
- Elfsight：跨平台各種功能多合一的 Widget，例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等，跟 Common Ninja 相似，但收費方式不同
- Common Ninja：跨平台各種功能多合一的 Widget，例如 Instagram Feed、Popup 跳出視窗、客製化 Google map 設計等
電子報訂閱 Newsletter
- Beehiiv：滿新穎的電子報訂閱工具，相當輕巧。時常被拿來跟 Substack 相比，近年很多國外新創公司、創作者等偏好使用，也是我主要使用的軟體，功能齊全之外，在撰寫內容時介面非常乾淨，相當適合文字創作者的書寫環境。
- ActiveCampaign：Email 行銷、電子報系統（MailChimp 的替代方案之ㄧ）
社群媒體管理平台 Social Media Management Platform
- SocialBee：越來越多社群媒體需要同時管理、排程貼文、觀看成效，若一次要管理五六個以上的渠道，那可以考慮這款，一站整合所有社群帳號在同一個介面，可以同時設定各個社群媒體的貼文內容、發布時間等，還可以整合 Canva 設計圖片、內建 AI 產生文案等功能 AI-Powered Social Media Management Tool – Schedule your social media content with ease, from one place, for all your profiles.
- Tailwind：一站整合社群媒體和電子郵件行銷，也有生成式 AI 文案、Pinterest 和 Instagram 的排程發佈工具等，跟 SocialBee 有點像，相比之前起跳方案較便宜些 Social Media & Email Marketing Tool
課堂會議 AI 即時筆記 AI Tutor
- Study Fetch：用 AI 輔助學習，我看到一個很強大的美國課堂實際 Demo 就是教授在台上講課，而這位實測者就打開筆電和 Study Fetch 直接錄音、即時語音轉錄文字，然後即時線上 AI 交談，可以問「剛剛教授在講什麼？」，Study Fetch 的交談回覆就會幫你摘要，太酷！我想這不僅可以用在學校課堂上，平時工作開會等相關場合都可以用的。Revolutionize Your Learning With Ai – Study Fetch transforms your powerpoints, lectures, class notes, and study guides into flashcards, quizzes, and tests with an AI tutor right by your side.
多合一行銷平台 Marketing Platform
- Simplified：是一款 AI 的 All-in-one 軟體，適合大小團隊的行銷團隊都適合使用並進行協作。提供數百萬張免費圖片、影片和音訊剪輯、數千個設計師版型、支持 30 多種語言的長篇和短篇內容寫作。內容日曆可用於安排和發布社交媒體貼文。有提供「永久免費」的版本，若需要更多的功能可以再升級付費方案即可！An Easy to Use All-In-One App For Modern Marketing Teams
- GetResponse：All-in-one 行銷平台，包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能，可以先註冊帳號使用免費版，覺得需要未來再升級！這軟體類似 Hubspot
消費者研究 Customer Survey
- PickFu：PickFu 是美國消費者在線調研工具，可進行在線的測試、優化和即時消費者調研問卷，取代猜測。透過 PickFu，你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧，幫助你做出更好的商業決策
- SurveySparrow：全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
- Qwary：全渠道 CX 客戶體驗平台，可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES，以改善購物體驗和產品性能
市場趨勢 Market Trends
- Exploding Topics：在趨勢成為趨勢之前發現趨勢，發現新的機會。此軟體的共同創辦人兼 CEO 是我非常推崇的國外 SEO 專家 Brain Dean，立馬吸引我的注意力，其官網也有揭露使用此產品的有 Google、Apple、Netflix、Amazon、Samsung 等國際品牌公司。See new market opportunities, trending topics, emerging technology, hot startups and more on Exploding Topics.
表單測驗 Quiz & Survey
- Opinion Stage：建立免費的測驗、投票、表單等工具，視覺質感和功能運作不錯！也有提供付費方案，提高每個月的回應數
- Tally：這款表單提供爆多功能且是免費版就可以使用的，可以是 Typeform 的另一個選擇
- Typeform：質感優雅的線上表單
- NoteForms：專門整合 Notion 的表單建立，其官方網站首頁揭示使用者包含哈佛大學、耶魯大學、現代汽車等都有在用。因為我本身主要使用 Notion 管理專案，這大大方便多了，快速建立表單、蒐集回饋直接存到 Notion，節省不少切換軟體與資料轉移的人力
使用者研究 User Reserach
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
線上客服 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- Tidio：設計優質的線上交談工具 Online Chat
線上課程 Online Course
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
線上社群 Online Community
- Circle – The all-in-one community platform for creators and brands：真的是多合一多功能的線上社群平台，包含討論區、舉辦線上活動、線上課程、線上即時群組對話、為您的社群和內容收費等，還有 AI 驅動的連接和學習 Community AI。比較了多款建立討論區的線上社群平台，Circle 的介面設計簡潔、耐看、聚焦內容與交流，相當推薦！
會員制 Membership
- Outseta – All-in-one membership software：支付、身份驗證、CRM、電子郵件——應有盡有。Outseta 為創始人提供了在幾分鐘內通過其網站、SaaS 產品或在線社區獲利的工具。可以串接 Webflow、Framer、WordPress、Discod、Notion 等。
網站軟體素材資源 Saas Resources
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- MotionElements：專業的影片素材、版型、外掛
- MotionVFX：專業的影片素材、版型、外掛
聯盟行銷 Affiliate Program / Referral Program
- Partnero：市面上有許多建立聯盟行銷的關係管理平台，這款是我看過介面優質、申請註冊流程都相當順暢的一款軟體，可以用用看 The Ultimate Platform for Partnership Management
一頁式個人網頁 Online Presence with Liinks
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
線上研討會 Online Webniar
- HeySummit：舉辦線上虛擬研討會
線上預約系統 Booking Appointment
- TidyCal：Lifetime deal – AppSumo，一次性付費，終生更新，來自 AppSumo 自行開發，在經營初期想先節省 Calendly 訂閱制費用長期下來的一定成本，可以考慮 AppSumo 這款，雖然在許多進階功能上還沒有追上，但很多基礎功能例如實用的預定月曆會議、整合 Google Calendar、Zoom、PayPal 等就滿實用的
- SimplyBook：線上預約排程系統 及 App 預約軟體
自動化軟體 Automation
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Bardeen AI：結合 AI 的自動化工作流程，整合各種常見 App
- Axiom ai：No code 自動執行網站操作和重複任務
- Repurpose.io：一個貼文自動發佈到多個社群平台，開始有這種需求，以往每次都要一個平台一個平台登入然後貼文 Repurposing content for social media the easy way
資訊圖表 Infographics
- Piktochart：資訊圖表設計工具
跨境收款 Online Payment
- Payoneer 派安盈：安全、快速，一站式跨境收款
- Wise：跨境帳戶，進行國際付款、收款
- Checkout Page：還頭一次看到這種概念，專門打造結帳頁面 Checkout page，但要串接 Stripe 帳號
- SamCart：打造線上快速收款方式，並且要大量模板可直接套用，這邊有 Demo 影片簡介，另外其還有推出線上課程建立的功能。Create an eCommerce storefront with SamCart to make it simple to sell digital products online with innovative checkout and conversion boosting features.
網路爬蟲 Web Crawler
- Apify：Full-stack web scraping and data extraction platform
線上互動產品 Demo 引導 – Interactive Demo Guide
- Guidde：透過 AI 將建立影片文件，滿神奇的！錄製影片後會自動拆解每個步驟，並為每個步驟自動產生標題與內文，然後還會自動產生影片講解投影片，選擇語音自動講解，這軟體用做大量需要錄製軟體操作教學文件滿便利的。Magically create video documentation with AI
- Arcade：線上建立產品互動式 Demo，使用者可以邊聽邊點擊畫面持續往下一個步驟畫面走，非常適用於軟體教學、操作指引，讓初步接觸的人可以有個印象、提升熟悉的效率，透過畫面切換直觀上更容易吸收理解，後台還有使用者的數據查看所建立的 Demo 互動指標 Create Interactive Product Demos – Arcade is an interactive demo platform that allows teams to create effortlessly beautiful demos in minutes.*
- Guideflow：可以製作線上互動式操作步驟產品 Demo 引導畫面，相比於瀏覽圖文教學的文章，互動式畫面切換更有沈浸感 The most advanced interactive product demo platform*
VPN
- Surfshark：Surfshark VPN 最近開始用，還滿好使用的！原本需求是想要瀏覽某些國外網站卻被強制自動轉址，所以用 VPN 解決此問題
Podcast
- Firstory：平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程，我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript：錄製 Podcast 線上工具，包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Riverside.fm：專門針對錄製 Podcast 的 All-in-one 線上工具，包含錄製 4K 和剪輯影片。Record Podcasts And Videos From Anywhere
- Podcastle：錄製 Podcast 的線上工具，包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
手機應用程式開發 Mobile App Development
- FlutterFlow：這個滿強大的，可以直接拖拉式介面建立手機應用程式，直接發佈在 iOS 和 Android，有點像是用 WordPress 打造網站的後台。FlutterFlow lets you build apps incredibly fast in your browser. Build fully functional apps with Firebase integration, API support, animations, and more. Export your code or even easier deploy directly to the app stores!
- AppMySite：這個令人振奮！因為我已經有網站，所以相當有此需求。其主打的功能是將你現有的網站打造成手機應用程式 mobile app，例如將你的 WordPress 或 Shopify 進行轉換（Shopify 即將推出），後來也推出直接客製化 mobile app，有點像 FlutterFlow，估計是相對適合初入門使用者。AppMySite’s no-code DIY mobile app creator powers you to make premium native apps for Android & iOS.
網站開發 Web Development
- CSS Scan 3.0：在進行網站開發時，檢查、複製和編輯 CSS 的最快速、最簡單的方式，跟「檢查元素」說再見——透過滑鼠懸停於任何元素上，即可立即檢查其 CSS，並透過一個點擊複製其所有規則。
- ShipFast – 快速發布你的 App，創辦人在官網闡述自己的故事：我意識到我一遍又一遍地做同樣的事情：設置 DNS 記錄、監聽 Stripe webhook、設計定價部分……因此，我出於 3 個原因建立了 ShipFast：1. 節省時間，專注於重要的事情：建立業務、2.避免令人頭疼的問題，例如以垃圾郵件結尾的電子郵件或等待 3 天才能獲得 Google 批准、3. 快速盈利 – 發貨越多，學到的越多，賺的就越多。The NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.
全球隱私法的數據隱私合規解決方案 Compliance Solution
- Termly：全球隱私法的數據隱私合規解決方案，需要合規解決方案，但又不想花費數千美元的法律費用？Termly 的合規套件可以説明您保持最新狀態並遵守隱私法律，例如 GDPR、CCPA、PIPEDA、電子隱私法規等——免費。 Data Privacy Compliance Solution for Global Privacy Laws
購物回饋金 Shopping Rewards
- ShopBack：常常網購的人一定要申請的啦！我時常在 Apple 官網購買 iPhone、MacBook，還有博客來買一堆書、PCHome 買 3C 產品、Hahow 熱門線上課程等，其他還有超爆多的線上商店如蝦皮 Shopee、Yahoo 購物中心、保健食品 iHerb、家樂福線上購物、Klook 旅遊、Booking.com 訂房等等都可以使用，並且累積回饋金後至少 200 元新台幣，就可以轉帳到自己指定的銀行帳戶，超方便！
陸續蒐藏與研究……
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理，或加入專接收資訊非討論的 WhatsApp 頻道。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
