自訂 CSS｜進階設計設定

店家可以在商店後台自行設定 CSS 語法，靈活調整前台頁面的排版與樣式，打造符合品牌風格的視覺版面，提升整體購物體驗。

⚠️ 開始前請注意：基於 SHOPLINE 作為網路平台，需經常更新網站設計及系統的本質，如果您的自訂 CSS 因網站更新出現問題，本站概不負責。SHOPLINE 建議您定期檢查前台狀況，以確保網店及版面運作正常。

 

本篇文章將分別介紹：

• 如何自訂 CSS
• 注意事項

 

一、如何自訂 CSS

步驟一

前往商店後台 >「網店設計 > 設計」，點選「進階設計設定」頁籤。

 

步驟二

在「自訂 CSS」欄位中，輸入自訂語法。

步驟三

點選頁面下方的「保存」以儲存內容；如需預覽效果，可點選「預覽」開啟新視窗查看前台畫面，確認無誤後請點選「出版」，語法才會正式套用至商店前台。

 

二、注意事項

• SHOPLINE 系統支援 CSS3 tag 的標準規範。
• 不支援 CSS mixins，例如 Sass 或 Less。
• 若您在後台的輸入錯誤格式的 CSS 語法，前台將無法正常顯示。
• 無效或具有安全風險的 CSS 將會被系統自動移除。
• 大部份的 CSS class names 可以在網頁按右鍵並選擇「查看 HTML 原始碼」查看。
• 因為將來有更動的可能，很抱歉 SHOPLINE 無法提供完整的 CSS 樣式表，建議您定期查看網站狀況及更新，以確保網店及版面運作正常。
• 若您有開啟 Layout Engine，請注意 Layout engine > .css.liquid 相關檔案中加入的自訂樣式也會套用至前台，若與後台「自訂 CSS」定義到相同元素，需要確定哪邊的語法層級較高；若權重相同且 CSS selector 完全一樣時：
  • 「自訂 CSS」優先級最高
  • ⁠其次是⁠ Layout engine > theme.css.liquid，且使用者可在此檔案調整載入順序
  • 若有在其他 .css.liquid 加入自訂 CSS
    • 未帶入 render_to_top: true，優先權比 theme.liquid 低
    • 有帶入 render_to_top: true，優先權比 theme.liquid 高