Supply 的秘訣

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

圖片秘訣

產品圖片

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

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

縮小素材輪播

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

頁首秘訣

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

調整標誌寬度

  1. 點擊 的秘訣 旁邊的「自訂」。
    1. 點擊「頁首」。5. 在「自訂標誌寬度 (單位為像素)」欄位輸入新寬度。預設像素值為 305。使用較小的像素值會縮小標誌尺寸,藉此降低頁首的高度。縮減標誌寬度也會降低高度,因為在縮小標誌的同時也會保持比例。6. 點擊「儲存」。

導覽秘訣

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

新增下拉式選單

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

主選單最佳作法

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

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

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

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

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

移除側邊欄

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

  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. 在左側的「資產」下方,開啟 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. 點擊 的秘訣 旁邊的「自訂」。
    1. 點擊「佈景主題設定」。2. 點擊「購物車」。3. 在「購物車類型」下拉式選單中選取「頁面」。4. 點擊「儲存」。

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

免費試用