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.

The main menu on an online store. The mouse is hovering over the

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:

A sidebar menu on the left side of an online store. Main menu links such as

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:

Two product listings are shown with white backgrounds. The background of the online store is also white, and there are no frames around the product images.

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:

The desktop version of the slideshow shows an image that is wider than it is tall. The mobile version shows the same image at the same height, but with both sizes of the image cropped so that the image fits the narrow screen.

Show an edge-to-edge image for a collection

To show an edge-to-edge image, your collection needs to have a featured image.

You can see how an edge-to-edge collection image looks on the Brooklyn demo store. The collection image shown at the top is 1405 x 800 px.

The desktop version of the slideshow shows an image that is wider than it is tall.

The mobile version shows the same image at the same height, but with both sizes of the image cropped off to fit the narrow screen.

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.

The Collections page in the Shopify admin.

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:

A collection page that shows products in the collage style. Numbers show over the products to illustrate how the order of the products relates to the size of the image.

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.

Ready to start selling with Shopify?

Try it free