SHOPLINE 網頁前台魔改筆記

有些電商經營者深信，一個吸引人的商店視覺設計能直接影響銷售成績。 即使是使用方便的套版電商平台，像是 SHOPLINE，有人還是會想要為自己的商店增添獨特的風格。想要讓新品宣傳頁面更生動活潑，或是讓內容更精緻，讓整個網站的風格更符合你的品牌形象。 你可能覺得套版電商平台很難做出太大的改變，但事實上，SHOPLINE 提供了一些工具讓工人使用，或是工人也可以透過一些方法，有機會打造一個獨一無二的線上商店。 ## SHOPLINE API API 要另外繳費 https://open-api.docs.shoplineapp.com/docs/getting-started ## mainConfig 可以用 JS 呼叫變數 `mainConfig`，會得到一大包 json，有很多網站資訊與會員資訊，靠個人的用途來組合。 例如可以用 `mainConfig.currentUser.name` 顯示會員姓名 用 `mainConfig.currentUser.membership_tier_id` 顯示會員等級的ID 等等 ## SHOP Builder https://support.shoplineapp.com/hc/zh-tw/articles/8238084404249-%E5%AE%A2%E8%A3%BD%E5%8C%96%E8%AA%9E%E6%B3%95-SHOP-Builder 可以在網店分頁的單一頁面插入HTML 、CSS、Java Script、Liquid 語法 缺點: - SHOP Builder 會綁佈景主題，雖然 SHOPLINE 後台有很多佈景主題可以選，但不是所有的佈景主題都能使用 SHOP Builder，有些佈景主題只能使用文字編輯器。 - SHOP Builder 差不多是 2023 年才出的，比較早期就開店的，頁面內容當然是用文字編輯器排的， ## GTM 缺點: - 不管怎麼調整設定，GTM 一定會有載入和瀏覽器處理的時間，會讓頁面有異常跳動的感覺。 - 使用者的瀏覽器、作業系統、網路環境，都有可能有某些設定，會阻擋 GTM，導致程式碼無法載入。 shopline 有個[圖片庫](https://support.shoplineapp.com/hc/zh-tw/articles/360029244332-%E5%9C%96%E7%89%87%E5%BA%AB)，上傳之後可以複製圖片連結。 但是不同方案，有不同的圖片張數限制。 而且僅接受圖片格式，不能上傳 mp4 影片、CSS 檔、JS 檔。 如果有其他檔案要傳，還要找一些網頁空間、圖床，或是 AWS S3 之類的物件儲存服務來放檔案，還要有個公開的網址可以連結， ## 文字編輯器 https://support.shoplineapp.com/hc/zh-tw/articles/4405572275481-%E6%96%87%E5%AD%97%E7%B7%A8%E8%BC%AF%E5%99%A8%E6%9F%A5%E7%9C%8B-HTML 存檔後，不符合規定的內容會被清掉，不能放 JS 碼 有些 CSS 還在，但是因為符號會被 encode 過，實際在網頁上無法正常被瀏覽器解讀，無法顯示正確的樣式。 ## Layout Engine 每年會多一筆額外費用 ## 結語 文章最後，如果想要找人魔改 SHOPLINE 網站，建議先釐清幾個迷思: 【有LOGO = 電商形象?】 在蝦皮或是外包網上花幾百塊或幾千塊請人畫一顆 LOGO 圖，這就叫電商品牌形象? 其實完整的企業形象是包含視覺識別系統 (VI) 或企業識別系統 (CIS) 的整體規劃，從視覺、文字、行為、口號等各種應用範圍，不只是單一張圖。 更別提有些 LOGO 只是印出來好看，在網頁設計和 UI 設計上難用到不行，在網頁上看起來模糊不清，或者在小尺寸的圖示中細節全失。 有時候不能怪設計端，而是甲方自己對設計服務認知的問題，這並不是在這種預算範圍，或是單一張圖可以得到解決的。 【SHOPLINE 有很多問題?】 一些平台系統比較文、系統合約轉讓文、系統抱怨文，會人說 SHOPLINE 有哪些問題或缺點。 但是這些人都沒講，換到其他平台也不一定會有幸福快樂的日子啦。 尤其是什麼當機網站進不去、客服滿意度、漲價、功能限縮、程式或一些需求無法配合修改的問題，其他平台也不是沒有，通常只是還沒碰到而已。 【只要會基本文書技能就能編輯網頁?】 讓連電腦打字都打不好、不會做圖的人，能快速做出一些像模像樣的網頁內容? 能讓 UI 設計師、有前後端程式技能的網頁工程師，完全達成所有的客戶/老闆/主管的合理需求? 這是完全兩種不同思維的工具設計邏輯， 前者可能會看到一堆東西被藏起來，一些網頁技術名詞被包裝成另一個「只限於某平台使用」東西， 就像本來只要準備一把螺絲起子和幾包螺絲，插進去轉幾下就好， 卻變成要買幾套XX工具組/XX包，使用者閱讀 5 本說明書中的片段、3 門相關課程，而且學了這套作法，只適用於這個電商平台，改天換一家又要重學... 【網站漂亮=轉換率高?】 與其說網站漂不漂亮，有時候倒不如說是整體思考，肯花錢請人來幫商品拍照，思考文案撰寫、銷售策略，做一些 UX 研究，聘請有豐富慘業經驗的工作人員，避免花錢打水漂，做出來的東西可能不會太差。 如果只是單純把線下的商品上架到網路上，叫工作人員上網抓一堆免費素材，加上一堆華而不實的效果，用 ChatGPT 隨便生一些文案，配合甲方個人喜好改到高興為止，這種「漂亮的網站」可能可以很快結案請款，之後能不能帶來實際的銷售業績? 真不好說。