shopify商店Brooklyn 的提示介紹

shopify新聞

2022-03-28

803

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

針對 Brooklyn 的提示

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

網(wǎng)站地圖提示

添加下拉菜單

若要在您的主菜單中添加下拉菜單，需要在網(wǎng)站地圖頁面上創(chuàng)建菜單。有關(guān)詳細(xì)信息，請參閱在您的在線商店中設(shè)置下拉菜單。

主菜單變?yōu)橐粋€(gè)側(cè)邊欄菜單

如果您的主菜單占用了大量空間，此菜單將轉(zhuǎn)換為側(cè)邊欄菜單，當(dāng)您點(diǎn)擊標(biāo)頭分區(qū)中的某一按鈕時(shí)，便可打開此側(cè)邊欄菜單。

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

添加不超過四或五個(gè)主菜單鏈接。
對主菜單鏈接使用窄字體?？梢栽诎媸皆O(shè)置中更改強(qiáng)調(diào)文本字體。
創(chuàng)建字符數(shù)受限的菜單項(xiàng)。例如，您可以用“FAQ”代替“常見問題解答”，或者用“聯(lián)系”代替“聯(lián)系我們”。

圖片提示

Brooklyn 的最佳產(chǎn)品圖片類型

高分辨率圖片可呈現(xiàn)精致且專業(yè)的效果，因此您的產(chǎn)品圖片至少應(yīng)為 1024 x 1024 px。產(chǎn)品圖片的最佳形狀是正方形。
理想情況下，您的圖片應(yīng)為單色背景。單色是沒有陰影或高亮的純色。您的所有圖片應(yīng)具有相同的背景色。
若要刪除產(chǎn)品圖片周圍的框架，請?jiān)陬伾O(shè)置中將產(chǎn)品背景色設(shè)置為透明。

幻燈片圖片的最佳尺寸

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

小屏幕上的圖片裁剪

在小型設(shè)備上，圖片幻燈片將由上邊緣至下邊緣填充屏幕?；脽羝拇笮∈墙?jīng)過調(diào)整的，使它們的高度與設(shè)備的屏幕高度相同。為了在不使圖片變形的情況下填充屏幕，幻燈片的左側(cè)和右側(cè)會被裁剪。

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

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

為博客文章設(shè)置圖片

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

產(chǎn)品提示

向促銷徽章

您可以通過設(shè)置大于常規(guī)價(jià)格的原價(jià)來為產(chǎn)品添加促銷徽章。此徽章顯示在產(chǎn)品系列頁面上此產(chǎn)品的圖片上方。

設(shè)置哪些產(chǎn)品會在產(chǎn)品系列頁面上顯得更大

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

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

若要顯示所有相同尺寸的產(chǎn)品圖片的一個(gè)網(wǎng)格，請將產(chǎn)品系列設(shè)置為以網(wǎng)格樣式顯示產(chǎn)品。

選擇多屬性時(shí)滾動動畫

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

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

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.