针对 Brooklyn 的提示

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

网站地图提示

添加下拉菜单

若要在您的主菜单中添加下拉菜单，需要在网站地图页面上创建菜单。有关详细信息，请参阅在您的在线商店中设置下拉菜单。

主菜单变为一个侧边栏菜单

如果您的主菜单占用了大量空间，此菜单将转换为侧边栏菜单，当您点击标头分区中的某一按钮时，便可打开此侧边栏菜单。

您可以通过执行以下步骤来防止主菜单更改为侧边栏样式：

• 添加不超过四或五个主菜单链接。

• 对主菜单链接使用窄字体。可以在版式设置中更改强调文本字体。

• 创建字符数受限的菜单项。例如，您可以用“FAQ”代替“常见问题解答”，或者用“联系”代替“联系我们”。

图片提示

Brooklyn 的最佳产品图片类型

• 高分辨率图片可呈现精致且专业的效果，因此您的产品图片至少应为 1024 x 1024 px。产品图片的最佳形状是正方形。

• 理想情况下，您的图片应为单色背景。单色是没有阴影或高亮的纯色。您的所有图片应具有相同的背景色。

• 若要删除产品图片周围的框架，请在颜色设置中将产品背景色设置为透明。

幻灯片图片的最佳尺寸

Brooklyn 演示商店中显示的两张图片幻灯片的尺寸均为 1200 x 800 px。最好使所有图片幻灯片保持相同的尺寸。

小屏幕上的图片裁剪

在小型设备上，图片幻灯片将由上边缘至下边缘填充屏幕。幻灯片的大小是经过调整的，使它们的高度与设备的屏幕高度相同。为了在不使图片变形的情况下填充屏幕，幻灯片的左侧和右侧会被裁剪。

在大屏幕上，图片幻灯片的尺寸已经过了调整，使它们的宽度与浏览器窗口的宽度相匹配。为了在不使图片变形的情况下填充窗口，幻灯片的底部经过了裁剪。

以下示例展示了同一在线商店的桌面版和移动版幻灯片：

为博客文章设置图片

博客文章中的第一张图片用作此博客页面的配图。您可以在撰写博客文章中了解如何向博客文章添加图片。

产品提示

向产品添加促销徽章

您可以通过设置大于常规价格的原价来为产品添加促销徽章。此徽章显示在产品系列页面上此产品的图片上方。

设置哪些产品会在产品系列页面上显得更大

如果您将产品系列页面设置为以拼贴样式显示产品，那么您的产品有的用大图片展示，有的用小图片展示。图片的大小基于产品在产品系列中的顺序。您可以在后台更改产品在产品系列页面上的顺序。点击要编辑的产品系列，然后在产品区域中，从排序下拉菜单中选择手动。然后拖放产品，使其按您希望其在在线商店中显示的顺序排序。

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

若要显示所有相同尺寸的产品图片的一个网格，请将产品系列设置为以网格样式显示产品。

选择多属性时滚动动画

在产品页面上，如果产品描述足够简短，能够在无需滚动的情况下适应屏幕大小，那么您在选择具有图片的多属性时会看到滚动动画。如果产品描述过长，以致于在不向下滚动的情况下不能适应屏幕大小，那么只会将顶部图片替换为多属性图片，而不会出现滚动动画。

如果想显示滚动动画，则请确保产品描述简短。

Shopify商户官网原文详情：

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.

文章内容来源：Shopify商户官方网站