Supply 的秘訣

此頁面列印時間為 Jan 23, 2021。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/os/using-themes/themes-by-shopify/supply/tips。

此文章會大略說明幾個實用的訣竅，以及最佳實踐，以便幫助您在線上商店內建立Supply。

圖片秘訣

產品圖片

解析度較高的照片在 Supply 中看起來會更加精緻且專業，因此建議您提供的圖片寬度和高度至少都須達 1024 像素。若有必要，系統會自動壓縮圖片。若您在產品頁面上啟用「圖片縮放」功能，則更加建議使用較高解析度的照片。

產品照片的最佳寬高比為正方形。

縮小素材輪播

若要減少素材輪播在首頁上佔據的垂直空間，您應該使用橫向圖片，亦即寬度大於高度的圖片。您應該上傳寬度為 1000 像素的圖片，以便在較大畫面顯示投影片時，左右兩側不會有任何留白。在素材輪播中，寬度較小的圖片則會置於畫面中央。

頁首秘訣

如果您的頁首太長，您可以調整標誌來縮短頁首。如果標誌太大，則您可以調整其最大寬度以縮小。您的標誌可能還包含不可見或白色像素，這些像素會加入上下的空白中。您可以使用 Photoshop 等圖片編輯軟體來裁剪標誌圖片中的這些像素。裁剪完標誌後，請重新上傳。裁剪標誌圖片中的這些空白區域可明顯降低頁首高度。

調整標誌寬度

  1. 在 Shopify 管理員中，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的秘訣 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的秘訣 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的秘訣 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 點擊「標頭」。
  2. 在「自訂標誌寬度 (以像素為單位)」欄位中輸入新的寬度。預設像素值為 305。使用較小的像素值可縮減標誌的大小，從而降低頁首的高度。縮減標誌寬度也會降低高度，因為在縮小標誌的同時也會保持比例。
  3. 點擊「儲存」。

導覽秘訣

以下秘訣可協助您在使用 Supply 時改善商店的導覽功能。

新增下拉式選單

若要在主選單中新增下拉式選單，就必須在導覽頁面中建立選單。

主選單最佳作法

如果主選單項目太多而無法置入同一行中，最後無法置入的連結就會新增至「更多」下拉式選單中。

這項操作並未受主選單連結數量的嚴格限制，但建議最好將連結數量維持在五或六個。若要包含更多連結，您可以：

  • 縮短導覽連結。在字體設定中的「主選單字體大小」調整這類連結的字體大小。
  • 每個連結使用較少的字元。例如，您可以將「常見問題集」變更為「FAQ」，將「聯絡我們」更改為「聯絡」，將「商家目錄」更改為「商店」，並將所有的「和」更改為「＆」。

導覽區中包含太多項目可能會造成您的網站太難使用。而且選單項目太多，客戶可能會略過重要項目。請試著將導覽區限制在五或六個項目。如果要讓客戶存取超過六個頁面，請使用下拉式選單。

您應避免在主選單中新增每個商品系列的連結。請試著改在「商店」或「目錄」連結下方的下拉式選單中列出商品系列。您也可以將商品系列細分為不同群組，再為每個群組設定一個下拉式選單。或者，您可以使用產品標籤來建立產品的子類別。

移除側邊欄

若要移除商店的側邊欄，您必須在兩個佈景主題檔案中加入一些程式碼。

  1. 在 Shopify 管理員中，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在「區段」目錄中，按一下 collection-template.liquid。

  2. 在檔案中搜尋 has_sidebar，刪除以下幾行程式碼：

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

  1. 點擊「儲存」。

  2. 在「區段」目錄中，按一下 collection-list-template.liquid。

  3. 在檔案中搜尋 has_sidebar，刪除以下幾行程式碼：

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 點擊「儲存」。

產品秘訣

以下祕訣可協助您使用 Supply 展示產品。

使用進階群組篩選

如果您擁有多項產品，不妨啟用子群組來協助顧客對產品進行排序。

  1. 定義群組。舉相機店為例，群組可分為品牌、焦距，以及解析度。

  2. 將所有產品轉存為 .csv 檔。

  3. 使用「群組_標籤名稱」的格式在所有現有標籤前面加上您希望其所屬群組的名稱。例如可能將標籤改為以下格式：品牌_Canon、焦距_18-55mm 以及解析度_12 MP。底線的左邊是群組名稱，右邊是產品的標籤。底線的兩側都可能包含空格。

  4. 儲存您的 .csv 檔並將產品重新匯入商店。請確認您在上傳檔案時已選取「取代目前具有相同控制代碼的產品」，以免重複建立相同產品。

  5. 在商品系列頁面啟用按群組篩選的功能：

    1. 在 Shopify 管理員中，前往「線上商店」 > 「佈景主題」。
    2. 在 Supply旁，點擊「自訂」。
    3. 在頁面頂端的下拉式選單或「範本」選單中，選取「商品系列頁面」。
    4. 點擊「商品系列」區段。
    5. 在「側邊欄產品篩選條件」，選取「按群組篩選」。
    6. 點擊「儲存」。

重新排序篩選群組和標籤

群組會按字母順序排序，群組內列出的標籤也會按字母順序排列。Shopify 專家可以協助您自訂順序。

定價秘訣

以下秘訣可協助您在使用 Supply 時設定定價。

停用銷售額的捨入功能

  1. 在 Shopify 管理員中，前往「線上商店」>「佈景主題」。

  2. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在 Shopify 應用程式中，點一下「商店」。

  2. 在銷售管道畫面上，點一下「線上商店」。

  3. 點一下「管理佈景主題」。

  4. 找到要編輯的佈景主題，然後按一下「操作」>「編輯代碼」。

  1. 在左側的「資產」下方，開啟 timber.scss.liquid。

  2. 在檔案最下方新增下列程式碼：

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. 點擊「儲存」。

購物車秘訣

當您在 Supply 中加入 JavaScript 時，以下秘訣可確保您的商店購物車正常運作。

變更購物車類型，以便執行進階的 JavaScript

您在 Supply 中新增至 cart.liquid 的任何 JavaScript 都不會在導覽匣或強制回應型購物車中執行。只有在您將 /cart 附加至商店的網址時才會執行。例如：http://your.store.url/cart。

若您想將以下其中一種功能加入購物車頁面，請務必將購物車類型設定為「頁面」：

  • 運費計算機
  • 多種貨幣
  • 禮品包裝
  • 購物車屬性驗證
  • 日期選擇器
  • 「我同意接受條款」核取方塊。

步驟：

  1. 在 Shopify 管理員中，前往「線上商店」 > 「佈景主題」。
  2. 點擊 的秘訣 旁邊的「自訂」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的秘訣 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 在 Shopify 應用程式中，點一下「商店」。
  2. 在銷售管道畫面上，點一下「線上商店」。
  3. 點一下「管理佈景主題」。
  4. 在 的秘訣 旁，點選「自訂」。
  5. 點一下「編輯」。
  1. 點擊「佈景主題設定」。
  2. 按一下「購物車」。
  3. 從「購物車類型」下拉式清單中，選擇「頁面」。
  4. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎？

免費試用