針對 Brooklyn 的提示

本文概述了一些可幫助您設置在線商店的 Brooklyn 的有用提示和最佳做法。

網站地圖提示

添加下拉菜單

若要在您的主菜單中添加下拉菜單，需要在網站地圖頁面上創建菜單。有關詳細信息，請參閱在您的在線商店中設置下拉菜單。

主菜單變為一個側邊欄菜單

如果您的主菜單占用了大量空間，此菜單將轉換為側邊欄菜單，當您點擊標頭分區中的某一按鈕時，便可打開此側邊欄菜單。

您可以通過執行以下步驟來防止主菜單更改為側邊欄樣式：

• 添加不超過四或五個主菜單鏈接。

• 對主菜單鏈接使用窄字體。可以在版式設置中更改強調文本字體。

• 創建字符數受限的菜單項。例如，您可以用“FAQ”代替“常見問題解答”，或者用“聯系”代替“聯系我們”。

圖片提示

Brooklyn 的最佳產品圖片類型

• 高分辨率圖片可呈現精致且專業的效果，因此您的產品圖片至少應為 1024 x 1024 px。產品圖片的最佳形狀是正方形。

• 理想情況下，您的圖片應為單色背景。單色是沒有陰影或高亮的純色。您的所有圖片應具有相同的背景色。

• 若要刪除產品圖片周圍的框架，請在顏色設置中將產品背景色設置為透明。

幻燈片圖片的最佳尺寸

Brooklyn 演示商店中顯示的兩張圖片幻燈片的尺寸均為 1200 x 800 px。最好使所有圖片幻燈片保持相同的尺寸。

小屏幕上的圖片裁剪

在小型設備上，圖片幻燈片將由上邊緣至下邊緣填充屏幕。幻燈片的大小是經過調整的，使它們的高度與設備的屏幕高度相同。為了在不使圖片變形的情況下填充屏幕，幻燈片的左側和右側會被裁剪。

在大屏幕上，圖片幻燈片的尺寸已經過了調整，使它們的寬度與瀏覽器窗口的寬度相匹配。為了在不使圖片變形的情況下填充窗口，幻燈片的底部經過了裁剪。

以下示例展示了同一的桌面版和移動版幻燈片：

為博客文章設置圖片

博客文章中的第一張圖片用作此博客頁面的配圖。您可以在撰寫博客文章中了解如何向博客文章添加圖片。

產品提示

向促銷徽章

您可以通過設置大于常規價格的原價來為產品添加促銷徽章。此徽章顯示在產品系列頁面上此產品的圖片上方。

設置哪些產品會在產品系列頁面上顯得更大

如果您將產品系列頁面設置為以拼貼樣式顯示產品，那么您的有的用大圖片展示，有的用小圖片展示。圖片的大小基于產品在產品系列中的順序。您可以在后臺更改產品在產品系列頁面上的順序。點擊要編輯的產品系列，然后在產品區域中，從排序下拉菜單中選擇手動。然后拖放產品，使其按您希望其在在線商店中顯示的順序排序。

每六個產品中的第一個產品和第六個產品使用大產品圖片。例如，產品系列中的第 1 個、第 6 個、第 7 個、第 12 個、第 13 個和第 18 個圖片使用大圖片：

若要顯示所有相同尺寸的產品圖片的一個網格，請將產品系列設置為以網格樣式顯示產品。

選擇多屬性時滾動動畫

在產品頁面上，如果足夠簡短，能夠在無需滾動的情況下適應屏幕大小，那么您在選擇具有圖片的多屬性時會看到滾動動畫。如果產品描述過長，以致于在不向下滾動的情況下不能適應屏幕大小，那么只會將頂部圖片替換為多屬性圖片，而不會出現滾動動畫。

如果想顯示滾動動畫，則請確保產品描述簡短。

Tips for Brooklyn

This article outlines some helpful hints and best practices that can help you to set up Brooklyn for your online store.

Navigation tips

Add a drop-down menu

To add drop-down menus to your main menu, you need to create menus on your Navigation page. To learn more, see Set up drop-down menus in your online store.

Main menu becomes a sidebar menu

If your main menu takes up a lot of space, then the menu converts to sidebar menu that opens when you click a button in the header section.

You can prevent your main menu from changing to the sidebar style by taking the following steps:

• Add no more than four or five links to your main menu.

• Use a narrow font for your main menu links. You can change the Accent text font from the typography settings.

• Create menu items with a limited number of characters. For example, you might use "FAQ" instead of "Frequently Asked Questions", or "Contact" instead of "Contact us".

Image tips

Best types of product images for Brooklyn

• Because high resolution images look polished and professional, your product images should be at least 1024 x 1024 px. The best shape for your product images is a square.

• Ideally, your images should have a flat color background. A flat color is a solid color with no shading or highlight. All of your images should have the same background color.

• To remove the frame from around your product images, set your Product background color to transparent from the color settings.

Best size for slideshow images

Both of the image slides that are shown in the Brooklyn demo store are 1200 x 800 px. It's a good idea to keep all of your image slides the same size as each other.

Image cropping on small screens

On small devices, image slides fill the screen from the top edge to the bOTTOm edge. The slides are resized so that their height is the same height as the device's screen. To fill the screen without distorting the images, the slides are cropped on the left and right.

On large screens, the image slides are resized so that their width fits the width of the browser window. To fill the window without distorting the images, the slides are cropped at the bottom.

The following example shows the desktop and mobile version of the same online store:

Set an image for blog posts

The first image in a blog article is used as the featured image for the blog page. You can learn about how to add an image to a blog article in Writing blog posts.

Product tips

Add sale badges to products

You can add a sale badge to a product by setting a compare at price that is greater than the regular price. The badge shows over the image for that product on collection pages.

Set which products appear larger on collection pages

If you set your collection pages to show products in a collage style, then some of your products show with large images, and some of them show with small images. The size of the image is based on the order of the products in their collection. You can change the order of the products on the Collection page in the admin. Click the collection that you want to edit, and then in the Products area, select Manually from the Sort drop-down menu. Next, drag and drop the products into the order that you want them to appear on your online store.

For every six products, the first product and the sixth product have large product images. For example, the first, sixth, seventh, 12th, 13th, and 18th images in the collection have large images:

To display a grid of product images that are all the same size, set your collections to show products in the grid style instead.

Scrolling animation when selecting a variant

On the product page, if the product description is short enough to fit on the screen without scrolling, then you see a scrolling animation when you select a variant that has an image. If the description is too long to fit on the screen without scrolling down, then the top image is simply replaced by the variant image, and no scrolling animation occurs.

If you want to show the scrolling animation, then make sure that your product descriptions are short.

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。