“The online store is the heart of the merchant experience and it’s often where their entrepreneur journey began.”--Cynthia Savard Saucier, director of UX and channels at Shopify
毫無疑問地,設計網站是每個 Shopify 電商邁向創業家之路的第一步,而網站前台則是你的品牌門面、你給消費者的第一印象。2015 年,Shopify 在主題裡推出預覽的功能,電商們不再需要依靠想像來猜測每個修改對網站帶來的影響;2016年,Shopify 推出了 Section,讓電商們可以個性化自己的首頁;而今年,非常振奮人心地,Shopify 即將推出更多新功能 ,讓電商們設計網路商店的體驗更加流暢且輕鬆。
Sections EVERYWHERE!輕鬆客製化所有頁面
你是否有在設計產品頁的時候想過:「為什麼產品頁不能如首頁一樣加入各式各樣的 Sections 呢?」如今,Shopify 終於聽到大家的心聲,從前只有首頁才有的 Sections,現在任何頁面都能使用。過往模板非常單一的產品頁,現在也能如首頁一樣,透過拖拉的方式,輕鬆加入各種 Sections,例如:Slideshows、影片、banner等等,讓你網路商店的模樣更符合你腦中的想像。
今天一個賣背包的商家,在產品頁上除了幾張簡單的產品圖、產品敘述,他還想加入一個相簿,更完整的展示他產品的優點以及各種情景的實搭照,他可以如同在設計首頁一樣,輕鬆拖拉、點選想要的 Section -- Gallery,產品頁面立即變得更豐富、吸引人,且個性化。
此外,不僅每個頁面都可以使用 Sections 來設計,未來 apps 也將成為一個 Section,商家可以像是新增 Section 一樣,在頁面上新增 apps。比如一個商家想在產品頁上蒐集並展示他的產品評論,他所安裝的產品評論 app 會在主題裡面顯示為一個 Section,只要點選該 Section,他就可以在產品頁上顯示他所得到的產品評論。
Master Pages 一鍵編輯所有頁面
每個頁面都能單獨使用 Sections 後,萬一商家想在所有產品頁或是所有產品系列頁都增加同一個 Section,要一個一個頁面單獨客製化,勢必會非常耗時且增加工作負擔,因此,Master Pages 因應產生,只要在 Master Pages 增加一個 Section,該 Section 就會同時出現於所有頁面。假設今天有個商家,想在他的一百個商品都加上一個尺寸表,讓消費者可以更具體的了解產品的尺寸、更無疑慮的購物,他無需一個一個編輯每一個產品,只要點選產品頁 Master Page,在該頁增加尺寸表這個 Section,則此 Section 就會立即套用於所有的產品頁。
目前針對每一種頁面類型只有各一個 Master Page,即產品頁有產品頁 Master Page,產品系列頁有產品系列頁 Master Page。但官方也補充說明,未來 Master Pages 將更彈性化,讓商家可以自由新增 Master Pages 來統一編輯自己想編輯的所有頁面。
內容可移轉,主題切換毫不費力
過去,當商家想為自己的網路商店更換主題時,形同整個前台必須重新設計,所有的圖片、banner、文案、排版等等都必須重新來過,這一直以來都是商家想切換主題時的痛點。而今年,Shopify 終於做到可以讓商家無痛切換主題。以前內容是直接儲存在主題裡,於是當切換主題時,一切都必須重來,現在內容與主題切開來,當切換主題時,Shopify 會把你在原主題裡使用的內容與圖片,根據新主題的版型樣式,移植到新主題去。這樣一來,你只需要再微調一些設計,即可切換主題。
重新幫大家重點整理這次 2019 Shopify Unite 官方發表的有關設計商店的新功能:
- 所有頁面都可使用 Sections,讓商店設計更彈性、更個性化
- 提供 Master Pages 來一鍵編輯所有頁面,讓編輯更快速、便捷
- Apps 也可以像任何 Section 一樣,透過點選與拖拉使它顯示於前台
- 在主題裡編輯的內容都可移轉,切換主題毫不費力
- 提供草稿功能
以上的新功能,官方並未發佈具體的上線時間,但會陸續於下半年一一釋出。相信當新功能全部推出後,商家們在設計商店時,能擁有更多的自由度與彈性,進而能把自己的商店設計的更吸引人,而消費者在瀏覽你的商店時的體驗也會更好。就讓我們一起期待新功能的推出吧!
更詳細的內容可以觀看 Shopify 官方的影片:https://youtu.be/HlpOGQrRBPY
關於 Sections API 的更新,Shopify Partners 可以參考這篇文章:https://help.shopify.com/en/themes/development/section-themes