Brooklyn 的秘訣

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

導覽秘訣

新增下拉式選單

如要在主選單中加入下拉式選單,您需要在「導覽」頁面上建立選單。若要深入瞭解,請參閱「在您的線上商店中設定下拉式選單」。

線上商店中的主選單。滑鼠游標暫留在「目錄」連結上,這會顯示連結至「客廳」和「臥房」等系列的下拉式選單。

主選單變成側邊欄選單

若您的主選單占用許多空間,則選單會轉換為側邊欄選單,您在標題區段按一下按鈕時便會開啟。

位於線上商店左側的側邊欄選單。如「首頁」和「目錄」等主選單連結會顯示在側邊欄選單上。

您可以執行以下步驟,防止主選單變為側邊欄選單:

  • 請勿新增超過四個或五個連結至主選單。
  • 為主選單連結使用較窄的字體。您可以從字體設定變更強調文字的字體。
  • 建立限制字母數的選單項目。例如,您可以使用「FAQ」而非「常見問題」,或「聯絡」而非「聯絡我們」。

圖片秘訣

Brooklyn 的最佳產品圖片類型

  • 由於高解析度圖片看起來精美且專業,因此您的產品圖片至少應為 1024 x 1024 像素。產品圖片的最佳形狀為正方形。

  • 理想情況下,您的圖片應使用單色背景。單色指的是沒有陰影或加亮的純色。您的所有圖片都應使用相同的背景色彩。

  • 若要移除產品圖片的邊框,請在色彩設定中將「產品背景」色彩設定為透明:

顯示在白色背景上的兩個產品列表。線上商店的背景也使用白色,而產品圖片沒有邊框。

投影片輪播圖片的最佳尺寸

Brooklyn 示範商店中顯示的投影片輪播圖片均為 1200 x 800 像素。我們建議您將所有投影片輪播圖片的尺寸保持一致。

小螢幕上的圖片裁剪

在小型裝置上,投影片會填滿螢幕的上緣到下緣。投影片會重新調整大小,讓高度符合裝置螢幕。若要填滿螢幕而不扭曲圖片,投影片會裁剪左右側。

在大螢幕上,投影片圖片會重新調整大小,讓寬度符合瀏覽器視窗的寬度。若要填滿視窗而不扭曲圖片,投影片會裁剪底部。

下列範例同一顯示線上商店的桌上型和行動裝置版本。

投影片輪播的桌上型版本顯示寬大於高的圖片。而行動裝置版本則顯示高度相同的圖片,但兩者均經過裁剪,讓圖片符合較窄的螢幕。

為商品系列顯示全畫面圖片

若要顯示全畫面圖片,您的商品系列必須具有精選圖片

您可以查看全畫面商品系列圖片在 Brooklyn 示範商店中如何顯示。頂部顯示的商品系列圖片為 1405 x 800 像素。

投影片輪播的桌上型版本顯示寬大於高的圖片。

而行動裝置版本則顯示高度相同的圖片,但兩者均經過裁剪,讓圖片符合較窄的螢幕。

為部落格貼文設定圖片

您部落格文章中的第一張圖片會用作部落格頁面的精選圖片。您可以在「撰寫部落格貼文」中,瞭解如何新增圖片至部落格文章。

產品秘訣

為產品加上特賣徽章

您可以設定高於一般價格的售價,為產品新增促銷徽章。在商品系列頁面上,徽章會顯示在該產品的圖片上。

設定哪些產品在商品系列頁面上會顯得較大

若您將商品系列頁面設定為透過拼貼樣式來展示產品,則部份產品會顯示較大的圖片,另一些產品則會顯示較小的圖片。圖片尺寸是根據產品在商品系列中的順序而定。您可以在管理員中的「商品系列頁面」中變更產品順序。按一下您想編輯的商品系列,接著在「產品」區域中的「排序」下拉式選單中選擇「手動」。接下來,請以您想在線上商店中顯示產品的順序拖放產品。

Shopify 管理員中的「商品系列」頁面。

對於每六個產品,第一個產品和第六個產品會是大型產品圖片。例如,商品系列中的第一張、第六張、第七張、第十二張、第十三張和第十八張圖片為大型圖片:

以拼貼樣式顯示產品的商品系列頁面。產品上方會顯示數字以表示產品順序與圖片尺寸的關聯。

若要顯示尺寸一致的格狀產品圖片檢視,請改為將您的商品系列設定為格狀樣式

選擇變體時的捲動動畫

在產品頁面上,若產品說明夠短,可以配合螢幕而不需要捲動,則您會在選擇含有圖片的變體時看到捲動動畫。若說明過長,必須向下捲動才可配合螢幕,則頂端圖片會由變體圖片所取代,不會有捲動動畫。

若您想顯示捲動動畫,請確保您的產品說明夠短。

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

免費試用