Brooklyn

Brooklyn is a tailor-made theme for the modern apparel store. Features include a mobile-first responsive design, unique typography, an edge-to-edge homepage slideshow, a dynamic product grid, and product pages with at-a-glance availability for each size.

Brooklyn banner

Brooklyn is ideal if you have the following:

  • Full-screen slideshows
  • Small menus
  • More than 5 products

If you have a larger product offering, or you want a theme that displays larger product images, then try Venture, Boundless, or Supply.

If you have fewer than 5 products, then try Jumpstart.

Get Brooklyn from the Shopify Theme Store ›

To learn about the unique sections available to Brooklyn, click the Sections button. To learn more about the unique theme settings available for Brooklyn, including color, font, and favicon settings, click the General Settings button. To access tips and tricks for making your store look amazing, click the Tips button.

You can edit Brooklyn's settings from the Customize theme page of your Shopify admin.

Common sections

Brooklyn includes two sections that appear on every page in your store:

  • the Sidebar menu section, which slides out from the left and typically includes "Search", "About Us", and "Log In" links.
  • the Header section, which is displayed at the top of the page, and typically includes your logo and navigation menus

You can edit the header and sidebar menu sections from any page in the theme editor. Unlike other section types, the Customize theme page displays the header and sidebar menu sections regardless of which store page you are viewing in the theme editor.

Brooklyn includes several unique settings for header and sidebar menu content.

Brooklyn features a sidebar menu that slides out when you hover a mouse over the collapsed menu:

  1. Click Sections.

  2. Click Sidebar menu.

  3. From the Top menu drop-down menu, select a top menu for the the sidebar menu.

  4. From the Bottom menu drop-down menu, select a bottom for the sidebar menu.

  5. Click Save.

You can add your company's logo to your store's heading. You can use a custom logo image with Brooklyn. The best format is a .png file with a transparent background. Logo images should be 450 x 200px. You can resize the logo image by decreasing the width.

You can also add a menu and a search icon to your store's header.

To upload a custom logo:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click Sections.

  4. Click Header.

  5. From the Menu drop-down, select the menu you want to display in the header.

  6. In the Logo image area, click Upload image to select a logo image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

If you are using a slideshow image on your homepage, then it is possible that your image logo will not be readable if it's displayed over a dark slide:

Brooklyn logo not readable

If this happens, then you can upload an inverted logo to display a lighter-colored logo when a dark slideshow image is displayed. In the Inverted logo area, click Upload image or select from library to upload a lighter-colored version of your logo. Ideally, this logo should be white:

Brooklyn use inverted logo

The inverted logo will appear over your slideshow for each slide that has its text color set to Light:

Brooklyn set slider text color to light

Home page sections

By default, Brooklyn includes 5 home page sections:

  • Slideshow is a full-screen slideshow that spans the width of your home page.
  • Rich text is a content section that you customize by either adding text content, or embedding a page from your store.
  • Collection list features several collections on your home page.
  • Featured collection features products from a chosen collection.
  • Newsletter displays a link to sign up to your store's newsletter.

You can add more sections, remove sections, and rearrange sections to create a custom home page. The only section you can't remove or rearrange is the Slideshow section, which is static and will always appear at the top of your home page.

Slideshow

Brooklyn uses a full-screen or "hero" slideshow, so the best size for your slideshow image is 1200px wide. Brooklyn is a responsive theme, which means that it automatically adjusts the image size to fit computer and mobile screens. When using a responsive theme like Brooklyn, it is recommended that you:

  • Avoid having text in the slideshow image, because text can get cropped when the image is resized. Instead, use a heading and subheading text in each slide. When you add text to a slideshow, you can choose light or dark text, to make sure that the text is readable over the slideshow image. You can also add a button to link the slide to a URL.
  • Some large images can become cropped in responsive themes. If your image slideshow contains large images, then some parts of the image might not be visible on smaller screens. Click here to learn more about best practices for using images. You can also learn more about the best types of product images to use for the Brooklyn theme.

You can choose to have the slideshow images automatically rotate by selecting Auto rotate between slides, and then selecting the interval at which the images change.

Note

Because full-screen slideshows are a prominent feature of the Brooklyn theme, you cannot move or delete the Slideshow section from the home page.

To change the slideshow settings for your home page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click Sections.

  4. Click Slideshow.

  5. If you want the slides to automatically rotate, then check Auto rotate between slides, and select the frequency you want them to rotate from the Rotation interval drop-down menu.

  6. In the Content area, click Slide.

  7. In the Image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  8. If you are going to add text to your slideshow, then select whether the text will be light or dark. In the Heading text and Subheading text fields, enter the text that will appear on the slideshow.

  9. If you want to display a button that links to a URL, then enter the text that will appear on the button in the Button text field, and then paste the URL in the Link URL field.

Tip

If you are linking to a URL within your online store, then you do not need to paste the URL root http://mystore.myshopify.com/. For example, you could paste /collections/all to link to your store's collections page.

Rich text

Use the Rich text section to provide any written content you want to display on your home page, or to embed any page created in your Shopify admin. For example, you can feature upcoming events by embedding your blog page, or display a page with any of the following:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn area, click Customize theme.

  3. Click Sections.

  4. Click Rich text.

  5. If you want to add text, then click Rich text enter your text in the Text field. Click the bold or italic icons to format the selected text.

  6. If you want to feature a page from your store, then click Add content and then click Page. Select a page to feature as your home page from the drop-down menu.

Collection list

With Brooklyn, you can display up to 9 collections on your home page.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn area, click Customize theme.

  3. Click Sections.

  4. Click Collections list.

  5. In the Heading field, enter the text you want to appear above the collections.

  6. Click Collection.

  7. Select a collection to display from the drop-down menu.

  8. Click Save.

With Brooklyn, you can feature products from one of your collections on your home page. You can choose a grid or a collage display for the featured collection on your home page.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn area, click Customize theme.

  3. Click Sections.

  4. Click Featured collection.

  5. In the Heading field, enter the text you want to appear above the collection.

  6. Select a collection from the Collection drop-down-menu. Up to 50 products will be displayed from the collection that you select.

  7. From the Grid style list, select whether you want to display the product images in a grid or a collage.

Newsletter

With Brooklyn, you can display a newsletter sign up form on your home page. This section type does not include any options - if you want to display a newsletter form, leave the section as is. If you do not want to display a newsletter form, you can delete the section from your home page.

When someone signs up for a newsletter, they are added as a customer to your store. The Newsletter section includes a link to your Customers page in your admin. You can click this link to see an up-to-date list of your customers.

Collection pages

With Brooklyn, you can display the products in your collection page in either a collage or a grid.

The collage style is unique to Brooklyn. It displays a mix of larger and smaller product images, with the effect of highlighting random products:

Collage grid

The grid style displays product images in a table format. All product images are the same size:

Grid grid
  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. In the theme editor preview of your store, open a collection page.

  4. Click Sections.

  5. Click Collection page.

  6. From the Grid style drop-down menu, select either Collage or Grid.

  7. Check Show collection tags to include a link at the top of the page that filters the product results by collection tag:

    Collection tag

  8. Check Show product vendor to add the vendor name below the product image:

    Vendor name

  9. Click Save.

Product pages

With Brooklyn, you can enable zooming over product images to allow your customers to get a closer, more detailed look at your products. To enable zooming, you must open a product page in the theme editor preview.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. In the theme editor preview, open a product page.

  4. Click Sections.

  5. Click Product pages.

  6. If you want to let customers zoom in on product images, then check Enable image zoom.

  7. If you want to let customers share the product on social media such as Facebook, then check Enable product sharing.

  8. Click Save.

Colors

Some color options will affect more than one section of the theme. Click any color in the Color menu to change the color.

To set color options:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click General settings.

  4. Click Colors.

  5. For each type of text or background, click the color swatch to select a new color from a palette.

    Tip

    Clicking the checkered square sets the color to transparent:

    Color picker transparent

  6. Click Save.

Brooklyn also includes a color option to select light or dark text to contrast with the slideshow image.

Typography

With Brooklyn, you can change the font and font size of the text in your store.

To set typography options:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click Customize theme.

  3. Click General settings.

  4. Click Typography.

  5. In the Headings section, select the font, size, and underline thickness for heading text from the drop-down menus.

  6. In the Accent text section, select the font for menus, buttons, and subheading text in your store. If you want to capitalize text, then check Capitalize text. If you want to increase the space between letters, then check Space letters.

  7. In the Body text section, select the font and font size for body text in your store. If you want to format body text, check Italicize titles, blockquotes, comment author name, and dates.

  8. Click Save.

Cart page

Brooklyn lets you customize your cart page by selecting the cart type and enabling order notes from the customer.

The Brooklyn theme supports 2 cart types:

  • Page redirects customers to your cart page when an item is added to the cart.
Cart page
  • Drawer opens a drawer on the side of the page when items are added to a cart and prompts the user to proceed to the checkout page.
Drawer

Tip

The Drawer cart is an AJAX cart type, which means that it might prevent the functionality of scripts such as a date picker that allows your customer to select a delivery date. Click here to read up on the Shopify Ajax API.

Brooklyn also includes an option to let your customers send you special instructions with their order.

To set cart options in Brooklyn:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click General settings.

  4. Click Cart page.

  5. Select a cart type from the Cart type drop-down menu.

  6. If you want to allow customers to provide order notes at checkout, then check Enable order notes.

Social Media

Brooklyn includes several options for integrating your online store with social media, including Facebook, Twitter, and Pinterest.

To enable social media settings for Brooklyn:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click General settings.

  4. Click Social media.

Accounts

You can display links to your social media accounts in the footer of your site.

Social media icons

Enter the URLs of your social media sites in the fields provided.

Tip

You need to enter https:// at the beginning of the social media URL for the social media icons to display in your site's footer. For example, https://instragram.com/shopify

Sharing options

You can also allow your customers to share content from your online store to their social media accounts. In the Sharing options section, select the check box for each type of social media sharing you want to allow:

  • Check Share on Facebook to enable the Facebook sharing button for products or blog posts.

  • Check Tweet on Twitter to enable the Twitter sharing button for products or blog posts.

  • Check Pin on Pinterest to enable the Pinterest sharing button for products or blog posts.

Tip

Pin it buttons for Pinterest will not display on blog or article pages.

Favicon

You can upload a favorites icon, or a "favicon", which can help brand your online store by displaying your logo in the following locations:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • next to your online store name when it is bookmarked.

You can also add alt text to your favicon. Alt text is displayed if an image can't load, and is used by screen-reading software to describe the image to users who are visually impaired. Including alt text also improves your website's SEO.

To upload a favicon:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Brooklyn section, click Customize theme.

  3. Click General settings.

  4. Click Favicon.

  5. In the Favicon image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin. The recommended size for Brooklyn is 16 x 16px. Larger images will be scaled down to 32 x 32px.

  6. If you want to add alt text to your favicon image, then click Update. In the Edit image window, enter the alt text in the Image alt text field.

  7. Click Save.

Change theme style

You can reset your theme's general settings to their default values. When you reset your theme's style, any changes you have made on the General settings tab will be lost, but you will not lose content such as text and images.

  1. Click the General settings tab.

  2. Click Change theme style.

  3. Click the button bellow Change theme style. The name of this button is typically the theme name.

  4. Click Change style.

Add a drop-down menu

To add drop-down menus to your Main Menu, you will need to create menus on your Navigation page. This article will walk you through that process.

Brooklyn drop down menu

A limited part of your header is set aside for your navigation. If your links exceed the allotted width, then your navigation will automatically be converted to a button that opens a slide-out menu.

The behavior isn't controlled strictly by the number of links in your Main Menu, although keeping that number down to four or five will help. To include more links, you can:

  • Use a narrower font. To do this, on your Customize theme page, click General settings, and then click Typography. Change the font for the Accent text.
  • Make each link use less characters. For example change 'Frequently Asked Questions' to 'FAQ', 'Contact Us' to 'Contact', 'Catalog' to 'Shop', and all occurrences of 'and' to '&'.

Note

Too many items in your navigation might be a bad idea from a usability point of view. With fewer menu items, your visitors' eyes are less likely to scan past important items. Challenge yourself to limit your navigation to four or five items. Use drop-down menus if you want to give access to more than five pages. A typical error for a shop with a lot of collections is linking to all of them in the Main Menu. A better approach is listing the collections in a drop-down menu under a 'Shop' or 'Catalog' link, or breaking down the collections into groups, giving each group a drop-down menu. You can also use product tags to create subcategories of products.

If you must use a lot of links in your Main Menu and you want to disable the slide-out menu behavior, then check out this customization guide. Disabling that feature is not supported by Shopify.

Brooklyn navigation

The color of the navigation links at the top of your page is linked to the Colors setting on the General settings tab of your Customize theme page:

Brooklyn navigation color

You can pick any color you want - it does not need to be white or black.

Tip

If you aren't using a logo, then the color of the navigation links and shop name on all pages is the color of the text controlled by the theme setting Colors > Text.

If you are using the full-screen slideshow, then your navigation links and slideshow heading text will either be white or black, depending on whether the currently shown slide has its Text color set to Light or Dark. Using black and white increases the contrast between the slide photo and the text, to make sure the text is easy to read. Click here for more information on selecting Text color.

Add a sub navigation to a collection page

Brooklyn sub navigation links on collection pages

To list subcategories under the heading of your collection page, as seen on the Womens page of the Brooklyn demo store, your collection needs to contain products with tags. Product tags are used to create subcategories of products in your store.

Make sure the feature isn't turned off on your Customize theme page. Navigate to a collection page in the theme editor preview, and then click Sections. Click Collection pages, and then check Show collection tags:

Brooklyn add tags

Image tips

Best types of product images for Brooklyn

Higher resolution photos look more polished and professional in the Brooklyn theme, so images should be at least 1024 x 1024px. Your images can be as large as 2048 by 2048. Images are automatically scaled down when necessary, so the higher quality the better.

The optimal width to height ratio for your product photos is a square.

Ideally, your photos should have a flat color background along the edges. Flat is a solid color with no shading or highlight. All photos should share the same flat color along their edges.

To match the color of the product frame around your photos with the background color in your photos, go to your Customize theme page and under Colors edit the Product background color. The Product background color needs to be the same as the background color inside your product photos for your photos to blend in the frame around them.

Before you adjust the Product background color:

Brooklyn change backdrop color

After you've adjusted the Product background color to match the background color in your photos:

Brooklyn make product backdrop match background in photo

Tip

If your photos have a white background, then you can set your Background color to any color other than white, and set your Product background color to white:

Brooklyn collage with colored background

Optimal size for slideshow images

Both slides used in the Brooklyn demo store are exactly 1200px wide by 800px high. It's a good idea to keep all of your slides the same size.

Some clipping on the sides of your slides is to be expected on mobile phones, while clipping at the bottom is to be expected on laptop screens. You'll find more information on why that is happening here.

Why slideshow images are cropped on mobile

On mobile phones, slides are rendered so that they completely fill the device screen from their top edge to their bottom edge. The slides are resized so that their height is the same as the height of your mobile device. Your slides then become a background image that covers the mobile screen, and for that to happen, the slides will be clipped on the left and right.

On large displays, the behavior is somewhat reversed due to a different width to height ratio. The slides are resized so that their width, not their height, fits the width of the browser, and the slides are then clipped at the bottom.

Both behaviors are clear in the screenshot below, which shows the desktop and mobile views side by side.

Brooklyn hero desktop versus mobile

Show an edge-to-edge image for a collection

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

After you have added a Featured image, on your collection page in your Admin, scroll down to the Template section and select collection.image as your template for your collection.

Brooklyn collection image template

Caution

Use the collection.image template only if you have a wide Featured image because your image will otherwise be scaled up to stretch across the width of the screen. By using the collection.image template, you can also expect your Featured image to be clipped at the top and bottom. That is normal, because your image will be applied as "background image" to a section of the page with a fixed height.

You can see a demonstration of how this works on the Mens page of the Brooklyn demo store. The collection image shown at the top is the same image you see here. It is 1405px by 800px.

Brooklyn collection image demo
Brooklyn collection image demo mobile

Set an image for blog posts

The first image from your blog article will be chosen as the featured image for the blog landing page. Click here to learn how you can add an image to a blog article.

Change the credit card icons at the bottom of pages

This article will show you how to add credit cards, and remove some or all of them.

Show thumbnails for videos in blog posts

If you have a video in your blog article, then add a thumbnail of that video to your article's excerpt and it will be shown on the blog landing page.

Product tips

Remove the gray border around product images

Go to your Customize theme page and under Colors set your Product background color to transparent:

Brooklyn remove backdrop

If your product images are too small, read the advanced customization guide. Applying this customization to your Brooklyn theme is not supported by Shopify. If you need help with customizing your Brooklyn theme, then try the Design community forum.

Add a Save badge to products

Set a Compare at Price that is greater than the price on your product variants. If a product is set on sale correctly in that matter, then the badge will show up automatically over that product image on collection pages.

Minimal sale

Set which products appear larger on collection pages

The size of products in the collage grid is based on the order they appear in the collection. You can manually rearrange your products in the admin to adjust the sizing.

Brooklyn manual order for collage

For every six products, the first and sixth product will receive the larger treatment. For example, the 1st, 6th, 7th, 12th, 13th, and 18th images in your collection will be larger.

Brooklyn collage grid

To display a grid of product images that are all the same size, go to the Customize theme page and in the Collection page change the Grid style from Collage to Grid.

Brooklyn turn off collage grid

Hide product tags on collection pages

On the Customize theme page, click the Collection page section, and then clear the Show collection tags check box:

Brooklyn hide tags

Cross out product options when they are sold out

Brooklyn crossed out options

Sold-out options are crossed out automatically in the Brooklyn theme for products that have only one option.

If a product has more than one option, for example color and size, then the product is available for purchase only if both the size and the color are available. Selecting a color and size combination that results in an unavailable or sold-out variant will result in the Add to Cart button being disabled and relabelled 'Unavailable' or 'Sold Out'.

For the product below, the Brown - Medium combination is sold out:

Brooklyn sold out

Scrolling animation when selecting a variant

On the product page, if the product description is short enough to fit entirely in the viewport, then selecting a variant that has a variant image will produce a scrolling animation which will reveal that variant image. If the description is too long to fit on screen, then the top image will be replaced by the variant image, and there will be no scrolling animation.

The product description is fixed on the screen only when it is short enough to fit inside the viewport. The scrolling animation that is intended to reveal the image of a selected variant is only possible if the description is fixed. When the description is not fixed because it's too long, then the theme can't scroll and will instead reveal the new variant image with a swap of the topmost image.

If you prefer the scrolling animation, then keep your product descriptions short. If you'd rather have an image swap, then use longer product descriptions.

Regardless of the size of your descriptions, the result is the same in that selecting a variant with a variant image will show you that image without losing sight of the product options buttons. You'll be able to cycle through all colors of a product, and see what the product looks like in each color, without scrolling up and down.

Currency tips

Show multiple currencies

The Brooklyn theme is compatible with displaying prices in multiple currencies.

Brooklyn currency toggle

Before adding support for multiple currencies to your Brooklyn theme, you will need to edit the snippet file product-grid-item.liquid snippet in your theme to replace all occurrences of this filter:

money_without_trailing_zeros

… with this one:

money

Caution

Adding a currency picker or currency toggle to your theme is an advanced customization that is not supported by Shopify.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free