Tips for Brooklyn
This article outlines some helpful hints and best practices that can help you to set up Brooklyn for your online store.
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".
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.
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.