Supply 的秘訣
此文章會大略說明幾個實用的訣竅,以及最佳實踐,以便幫助您在線上商店內建立Supply。
圖片秘訣
產品圖片
解析度較高的照片在 Supply 中看起來會更加精緻且專業,因此建議您提供的圖片寬度和高度至少都須達 1024 像素。若有必要,系統會自動壓縮圖片。若您在產品頁面上啟用「圖片縮放」功能,則更加建議使用較高解析度的照片。
產品照片的最佳寬高比為正方形。
縮小素材輪播
若要減少素材輪播在首頁上佔據的垂直空間,您應該使用橫向圖片,亦即寬度大於高度的圖片。您應該上傳寬度為 1000 像素的圖片,以便在較大畫面顯示投影片時,左右兩側不會有任何留白。在素材輪播中,寬度較小的圖片則會置於畫面中央。
頁首秘訣
如果您的頁首太長,您可以調整標誌來縮短頁首。如果標誌太大,則您可以調整其最大寬度以縮小。您的標誌可能還包含不可見或白色像素,這些像素會加入上下的空白中。您可以使用 Photoshop 等圖片編輯軟體來裁剪標誌圖片中的這些像素。裁剪完標誌後,請重新上傳。裁剪標誌圖片中的這些空白區域可明顯降低頁首高度。
調整標誌寬度
- 在 Shopify 管理員中,前往「線上商店」 > 「佈景主題」。
- 點擊 的秘訣 旁邊的「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 的秘訣 旁,點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 的秘訣 旁,點選「自訂」。
- 點一下「編輯」。
- 點擊「標頭」。
- 在「自訂標誌寬度 (以像素為單位)」欄位中輸入新的寬度。預設像素值為
305
。使用較小的像素值可縮減標誌的大小,從而降低頁首的高度。縮減標誌寬度也會降低高度,因為在縮小標誌的同時也會保持比例。 - 點擊「儲存」。
導覽秘訣
以下秘訣可協助您在使用 Supply 時改善商店的導覽功能。
新增下拉式選單
若要在主選單中新增下拉式選單,就必須在導覽頁面中建立選單。
主選單最佳作法
如果主選單項目太多而無法置入同一行中,最後無法置入的連結就會新增至「更多」下拉式選單中。

這項操作並未受主選單連結數量的嚴格限制,但建議最好將連結數量維持在五或六個。若要包含更多連結,您可以:
- 縮短導覽連結。在字體設定中的「主選單字體大小」調整這類連結的字體大小。
- 每個連結使用較少的字元。例如,您可以將「常見問題集」變更為「FAQ」,將「聯絡我們」更改為「聯絡」,將「商家目錄」更改為「商店」,並將所有的「和」更改為「&」。
導覽區中包含太多項目可能會造成您的網站太難使用。而且選單項目太多,客戶可能會略過重要項目。請試著將導覽區限制在五或六個項目。如果要讓客戶存取超過六個頁面,請使用下拉式選單。
您應避免在主選單中新增每個商品系列的連結。請試著改在「商店」或「目錄」連結下方的下拉式選單中列出商品系列。您也可以將商品系列細分為不同群組,再為每個群組設定一個下拉式選單。或者,您可以使用產品標籤來建立產品的子類別。
移除側邊欄
若要移除商店的側邊欄,您必須在兩個佈景主題檔案中加入一些程式碼。
在 Shopify 管理員中,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在「區段」目錄中,按一下
collection-template.liquid
。在檔案中搜尋
has_sidebar
,刪除以下幾行程式碼:
{% if collection.all_tags.size > 0 %}
{% assign has_sidebar = true %}
{% endif %}
點擊「儲存」。
在「區段」目錄中,按一下
collection-list-template.liquid
。在檔案中搜尋
has_sidebar
,刪除以下幾行程式碼:
{% if collection.all_tags.size > 0 %}
{% assign has_sidebar = true %}
{% endif %}
- 點擊「儲存」。
產品秘訣
以下祕訣可協助您使用 Supply 展示產品。
使用進階群組篩選
如果您擁有多項產品,不妨啟用子群組來協助顧客對產品進行排序。
定義群組。舉相機店為例,群組可分為品牌、焦距,以及解析度。
使用「群組_標籤名稱」的格式在所有現有標籤前面加上您希望其所屬群組的名稱。例如可能將標籤改為以下格式:品牌_Canon、焦距_18-55mm 以及解析度_12 MP。底線的左邊是群組名稱,右邊是產品的標籤。底線的兩側都可能包含空格。
儲存您的
.csv
檔並將產品重新匯入商店。請確認您在上傳檔案時已選取「取代目前具有相同控制代碼的產品」,以免重複建立相同產品。-
在商品系列頁面啟用按群組篩選的功能:
- 在 Shopify 管理員中,前往「線上商店」 > 「佈景主題」。
- 在 Supply旁,點擊「自訂」。
- 在頁面頂端的下拉式選單或「範本」選單中,選取「商品系列頁面」。
- 點擊「商品系列」區段。
- 在「側邊欄產品篩選條件」,選取「按群組篩選」。
- 點擊「儲存」。
重新排序篩選群組和標籤
群組會按字母順序排序,群組內列出的標籤也會按字母順序排列。Shopify 專家可以協助您自訂順序。
定價秘訣
以下秘訣可協助您在使用 Supply 時設定定價。
停用銷售額的捨入功能
在 Shopify 管理員中,前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在 Shopify 應用程式中,點一下「商店」。
在銷售管道畫面上,點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題,然後按一下「操作」>「編輯代碼」。
在左側的「資產」下方,開啟
timber.scss.liquid
。在檔案最下方新增下列程式碼:
.sale-tag sup {
display: inline;
top: 0;
font-size: 100%;
&:before {
content: '.';
}
}
- 點擊「儲存」。
購物車秘訣
當您在 Supply 中加入 JavaScript 時,以下秘訣可確保您的商店購物車正常運作。
變更購物車類型,以便執行進階的 JavaScript
您在 Supply 中新增至 cart.liquid
的任何 JavaScript 都不會在導覽匣或強制回應型購物車中執行。只有在您將 /cart
附加至商店的網址時才會執行。例如:http://your.store.url/cart
。
若您想將以下其中一種功能加入購物車頁面,請務必將購物車類型設定為「頁面」:
- 運費計算機
- 多種貨幣
- 禮品包裝
- 購物車屬性驗證
- 日期選擇器
- 「我同意接受條款」核取方塊。
步驟:
- 在 Shopify 管理員中,前往「線上商店」 > 「佈景主題」。
- 點擊 的秘訣 旁邊的「自訂」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 的秘訣 旁,點選「自訂」。
- 點一下「編輯」。
- 在 Shopify 應用程式中,點一下「商店」。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 在 的秘訣 旁,點選「自訂」。
- 點一下「編輯」。
- 點擊「佈景主題設定」。
- 按一下「購物車」。
- 從「購物車類型」下拉式清單中,選擇「頁面」。
- 點擊「儲存」。