SHOPLINE Web Design

前言

為了提升網站的SEO，現在網頁商品的介紹會希望以ＲＷＤ形式，做圖文切版與設計。在使用這個「電商網站後台」做切版時，發現開發限制非常多。因此開了這個筆記本，當遇到shopline電商後台需要切版時，可以告知業主或是合作商，這個後台原有的限制，使後續專案進行uiux的設計階段更順暢。

Shopline外掛限制

• 一般框架外掛大多不支援：
  目前確認不支援的外掛包含以下幾個大家常用的切版方式
  • Bootstrap 不支援。
  • fontawsome 符號不支援。
  • buefy 不支援。

Shopline其他限制

• Shopline 對部分 CSS 語法的限制：
  許多自訂的 CSS 語法可能會被系統屏蔽，導致無法正常顯示!
  • aspect-ratio 和 CSS render 可能會被系統抓住並刪除，特別是在商品頁面中。
  • display: none 也可能會被移除，影響到響應式網頁設計 (RWD)。
  • 後台背景主題有時會將 width 和 max-width 設定為固定值，限制了自定義設計的靈活性。
  • 不支援css偽元素寫法。預覽可以，正式環境不會render出來。
  • 文字tag，除了 h1、p、 span，其他都有自己的設定，只要使用 h2、h3、h4、h5….等。文字大小必定出問題。
  • a 樣式設定也不能直接寫，會完全影響整個頁面的連結樣式。
  • Section 級別不支持使用@ 符號。
  • 不支持SCSS寫法。
• JS限制：
  • 全鎖
• 建議採用 HTML 編輯：
  • 為避免以上問題，建議使用 HTML 編輯內容。
  • 但需注意，HTML 也有字數限制（大概1000行），可能限制編輯的複雜性。

第三方工具的選項

• 使用 Google 代碼管理工具（GTM）來安裝第三方工具。
• 常用的第三方工具：
  • SUMO：置頂 banner、彈出視窗
  • zotabox：包含多種掛件種類
  • wisepops：彈出視窗
  • Getsitecontrol：彈出視窗

自訂 CSS 語法注意事項

• 全站透過自訂 CSS 來撰寫對應的顯示語法。自訂 CSS 語法需自行撰寫和維護。
• 系統經常更新及優化，因此需要定期檢查顯示是否正常。
• 請將撰寫好的語法輸入到「網店設計」>「設計」>「進階設計設定」中的自訂 CSS 欄位，並保存及出版來套用至前台。

商品頁面建議寫法

現在電商大多以手機版為主、電腦版為輔，但有些講究的商家會希望手機電腦版可以做到RWD。因此我是以常用的電腦尺寸與手機尺寸設計為主，直接略過平板（如果有時間可以再做）。

• 電腦版裝置尺寸：1366 x 768
• 平板裝置尺寸：768 x 1024
• 手機板裝置尺寸：360 x 640

我直接做一般桌機尺寸＋768以下的手機尺寸排版。但須注意現在有些人手機老舊，模擬畫面的時候要考量360px的裝置。

• media query的設定：
  • 上方一定要加上viewport，下方則是以768px做手機尺寸的style設定

撰寫類似bootstrap的grid system

把基礎設定好，在寫網頁的時候就可以非常快速完成，我一開始寫這些時花了3-4個小時trial & error，因為shopline不對商家提供style list，非常麻煩，以下簡單設定，可以提供未來撰寫參考。

• html的基本設定在一開始完成
  html { margin: 0 auto; padding: 0px; font-family: "Noto Sans TC", "Segoe UI", "Noto Sans", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff; }

• 使用bootstrap做最簡單的grid system
  `.container {
  width: 100%;
  margin: 0 auto;
  }
  /* Row /
  .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  }
  / Column /
  [class=”col-“] {
  position: relative;
  width: 100%;
  padding: 0rem;
  margin: 0;
  }
  /* Column Width Classes */
  .col-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
  }
  .col-2 {
  flex: 0 0 16.67%;
  max-width: 16.67%;
  }
  .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
  }

  .col-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  }

  .col-5 {
  flex: 0 0 41.67%;
  max-width: 41.67%;
  }

  .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  }

  .col-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
  }

  .col-8 {
  flex: 0 0 66.67%;
  max-width: 66.67%;
  }

  .col-9 {
  flex: 0 0 75%;
  max-width: 75%;
  }

  .col-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
  }

  .col-11 {
  flex: 0 0 91.67%;
  max-width: 91.67%;
  }

  .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  }
  /* Medium Devices (Tablets, 768px and Up) */
  @media (min-width: 768px) {
  .col-md-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
  }
  
  .col-md-2 {
  flex: 0 0 16.67%;
  max-width: 16.67%;
  }
  
  .col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
  }
  
  .col-md-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  }
  
  .col-md-5 {
  flex: 0 0 41.67%;
  max-width: 41.67%;
  }
  
  .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  }
  
  .col-md-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
  }
  
  .col-md-8 {
  flex: 0 0 66.67%;
  max-width: 66.67%;
  }
  
  .col-md-9 {
  flex: 0 0 75%;
  max-width: 75%;
  }
  
  .col-md-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
  }
  
  .col-md-11 {
  flex: 0 0 91.67%;
  max-width: 91.67%;
  }
  
  .col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  }
  }`

• 圖片的設定: shopline後台的css就是純手刻，也可以在head裡面設定好
  /* Image Settings */ img { max-width: 100%; height: auto; }

• 好用的’order’，調整圖文順序，我設定了三個順序
  /* Medium Devices Order (768px and Down) */ @media (max-width: 768px) { .custom-order-md-1 { order: 1; } .custom-order-md-2 { order: 2; } .custom-order-md-3 { order: 3; } }

• 文字設定建議：rem 為單位，繼承html的設定，例如以下.9rem約11.3px，在手機版當小字排版還行。
  p { font-size: .9rem; font-weight: 300; padding: 0px 10px; margin: 0 0 .5rem 0; color: #ffffff; text-align: center; }

結語

看似簡單的基礎設定，大約花了我一個禮拜研究、shopline本身對於這塊的說明並不清楚，很多都需要自己在線上嘗試才能獲得相關經驗

如果初步完成以上基礎設定，就可以再根據自己的需求寫出樣式，要調整時，如果渲染不出來，就直接寫在元素的樣式裡，雖然看起來很醜，但基本上可以完成需求的layout。以上就是辛苦踩雷的坑之筆記。