sean-sinclair-ozqUdQZbjBw-unsplash_edite
Search

如何打造 Shopify 電商網站客製化設計排版(2020)

我錄製了影片就這兩個後台操作介面快速瀏覽一下,並且比較其在網頁排版時的優劣,再搭配此篇文章閱讀幫助理解,會不斷更新內容(更新時間: 2020.8.26)

Shopify vs. WordPress 進行網頁排版的比較

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

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

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



用 Shopify 和 WordPress 進行網站頁面編輯時的差異以下是 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 顆星,3200 次以上的評論)。但比起 WordPress 頁面編輯的外掛大軍來說,還是有相當的進步空間,例如版面可以設定的細節有限、介面的操作體驗有待提升等。

  3. 提供基本的幾個排版選擇、有限制的整合其他幾款 Shpoify App 功能

  4. 可以撰寫 CSS,可以命名 ID 和 Class 來作更彈性的樣式設定

  5. 沒有提供一次性付費(都是訂閱費:每個月都要自動扣款的意思


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


Shopify 網頁排版的解決方案

一、找工程師撰寫程式碼(執行費用與溝通成本較高) 二、尋找合適的免費或付費版型(依然受限於版型所提供的功能) 三、安裝頁面編輯器的 Shopify App(對一般人來說應該是最佳的選擇)


組合方式可以是:透過第二和第三項來建構 Shopify 網站基礎、編輯自由度和彈性,然後局部的功能可以再用第一項尋找外包工程師來解決。

執行步驟

  1. 先從 Shopify Theme Store 和 ThemeForest — Shopify Templates 尋找比較符合預期或大方向需求的版型(通常付費版功能與設計的選擇會比較佳)

  2. 付費購買 Shopify App — 頁面編輯器,之後若要建立更多的頁面與排版,才有更彈性與變化,不然大家都買版型後結果每個人的網站都長得差不多(免費版會有很多限制,例如最多只能建立兩頁之類的)。而是否需要購買,則端看需求而定,若使用的版型已經滿足,那其實可以先觀望就好。

  3. 針對局部需求而沒有版型或專門的 App 可以解決,可能太局部瑣碎的功能,所以這時可以找外包工程師技術支援。例如選定的版型在產品的圖片上沒有 Slider,只有多圖排列顯示,這時可以到發包看有沒有工程師能處理這樣的問題。


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

只是 Shopify 還沒很在地化,例如金流與物流的串接等,儘管已經有不少台灣公司可以解決這類問題,這需求勢必會被滿足,一旦 Shopify 與台灣陸續接軌與發展,這些問題相信官方都會逐一解決的,指日可待!



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

以 WordPress 來說,我個人偏愛使用 WPBakery Page Builder,已經相當熟悉其優劣,非它不用。而 Shopify 我先從官網找起,在 Shopify App Store 中輸入關鍵字:「Page Builder」,於搜尋結果清單中找到前兩三名評分等級最高和評論數量最多來決定是否安裝試用。國外這篇文章「14+ Best Shopify Page Builder Apps」也可以參考看看,有針對各家工具的評分與概述。 因為我當時時間有限,無法一一比較測試,所以我就以評分等級一定要大於4.5 顆星、評論數要真的很多才有公信力來判斷是否花時間測試,選出了兩款 Shopify App:PageFly Landing BuilderShogun網頁編輯器

我是先選用 Shogun網頁建構器,但用了三分鐘就立刻移除,真的沒用過這麼難用的頁面編輯方式,也可能是因為我已經使用 WordPress 相當成熟的 WPBkaery Page Builder 太好用了,導致回頭使用「相當陽春且 UX 操作體驗不佳」的外掛就會立即造成極大的痛楚(為何行銷影片都講得很簡單?讓人覺得很容易上手)


Shopify App Store — PageFly Landing Page Builder



Shopify 網頁編輯器: PageFly Landing Page Builder

第二個試用的是 PageFly Landing Page Builder,大致摸了一圈,了解 Pages 的分類方式與設定邏輯,OK!還算是好的開始,來到了產品核心重點:建構頁面排版,卡住了。而 PageFly 一個很棒的是,他們公司在 App 中有 Online Chat 線上交談,於是我就去尋求技術客服,其中一位就快速幫我錄製了基本的操作影片和英文解釋,很便利!我之後陸陸續續問了應該有超過五十個以上的問題吧!大致上都有解決到需求,有些功能還在開發中,產品也陸續在更新中。 在決定安裝此 App 之前,可以先去官方影片頻道看看操作方式與介面,多少了解一下是否符合自己心中所預期的,也可以去看一下官方的幫助中心頁面,逛逛看文件清不清楚、是否完整,作為初步了解此產品的成熟度。


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



  • mail-01

9F, #287, Nanjing East Road, Section 3, Songshan District, Taipei City