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 more about the unique theme settings available for Brooklyn, including some great examples for how to use them, click the 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.

Presets

Brooklyn comes with one preset, which includes:

  • Brooklyn's unique Collage view instead of the typical grid view available with most themes
  • product images wrapped with light gray borders to enhance the product images and make them the focal point of any page.

To select the Brooklyn preset:

  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 Presets.

  4. Click the Brooklyn preset.

  5. Click Apply preset without saving to use the Brooklyn preset without saving your current theme options. Click Save current as new preset to save your theme options first.

  6. Click Save changes to confirm the changes to your theme options.

Did you know?

If you don't want to use the Brooklyn preset, you can create a new theme preset.

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 Colors.

Did you know?

Clicking the checkered square sets the color to transparent:

Color picker transparent

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

You can add your company's logo to your store's heading. You can also create a favicon, which is the icon that appears on your web browser's tab. Favicons help brand your store to give it a professional look.

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.

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 Header.

  4. Select the Use a custom logo checkbox.

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 check Use an inverted logo to display a lighter-colored logo when a dark slideshow image is displayed, and click Choose File 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

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.

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 Header.

  4. Check Use a custom icon to display a favicon, and then click Choose file to upload your favicon image. The recommended size for Brooklyn is 16 x 16px.

  5. Check Show a search icon to display a search icon at the top of your online store page:

Search icon

Home page

With Brooklyn, you can choose what content to show for each section of the home page. You can upload the images to use for the full-screen slideshow, showcase a single collection or select multiple collections to display. If you have exciting content in your blog page, you can display that blog page right in your home page.

Home page - hero 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 ensure 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.

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 Home page - hero slideshow.

  4. 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.

  5. To display a button that links to a URL, enter the text that will appear on the button in the Button text field, and then paste the URL in the Link URL field.

Did you know?

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.

With Brooklyn, you can automatically 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 section, click Customize theme.

  3. Click Home page - featured collections.

  4. To randomly display collections on your home page, check Automatically (up to 9).

  5. To select up to 9 collections to display, check Manually.

With Brooklyn, you can display a single collection of products on your home page, which is useful when you want to showcase a new collection or a collection that is on sale.

  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 Home page - featured products.

  4. If you want to display a single collection of products on your home page, then select a collection from the Choose collection drop-down-menu. Up to 50 products will be displayed from the collection that you select.

Use the Home page - featured content section to embed any page created in your Shopify admin on your home page. For example, you can feature upcoming events by embedding your blog page, or try 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 section, click Customize theme.

  3. Click Home page - featured content.

  4. Select a page to feature as your home page from the drop-down menu.

Product page

The Brooklyn theme includes an option to zoom in on product images, which is useful when your product has details that are best viewed when the image is enlarged:

Zoom in
  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 Product page.

  4. Check the Enable image zoom box.

Collection page

Brooklyn includes 2 grid styles: collage and 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. Click Collection page.

  4. From the Grid style drop-down menu, select either collage or grid.

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

    Collection tag

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

Vendor name

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:

  • 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

Did you know?

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.

  • Page redirects customers to your cart page when an item is added to the cart.
Cart page

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 Cart page.

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

  5. If you want to allow customers to provide order notes at checkout, check the Enable order notes box.

Newsletter

Brooklyn provides an option to to let customers opt in to your email marketing campaigns. The steps for setting up a newsletter depend on whether you are using MailChimp.

To set newsletter options 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 Newsletter.

  4. Check Show newsletter sign-up.

Without MailChimp

If you check Show newsletter sign-up, but don't provide a MailChimp form action URL, then Brooklyn will still show a newsletter form to customers. Any customer who enters their email in the newsletter sign-up box will be stored in your admin as a customer with the tag newsletter. You can export this list to get a list of customer email addresses for a newsletter.

Using MailChimp

If you enter a MailChimp form action URL in the newsletter sign-up box, then emails that are entered in the box will be sent directly to your MailChimp account so that you can manage your newsletters there.

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 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.

Did you know?

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

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

  • Check Enable product sharing to create social media sharing buttons on product pages.

  • Check Enable blog post sharing to create social media sharing buttons on blog posts.

  • 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.

  • Check Add to Fancy to enable the Fancy sharing button for products or blog posts.

  • Check +1 on Google Plus to enable the Google Plus sharing button for products or blog posts.

Did you know?

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

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, change your "Accent text" under Typography on your Customize theme page.
  • 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 > Text setting on your Customize theme page:

Brooklyn navigation color

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

Did you know?

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.

Show your navigation above the slideshow

To move your navigation bar above your full-screen slideshow, instead of over top of it, you will need to customize your theme:

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

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under Snippets, click hero.liquid to open the slider snippet in the online code editor, or go to this URL.

  4. Inside hero.liquid, locate and remove this line of code:

   {% assign hero_full_height = true %}
  1. Or, keep the line, but set hero_full_height to false:
   {% assign hero_full_height = false %}
  1. Save your file.

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. In the Collection page section, select the Show collection tags checkbox:

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

Did you know?

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

You can avoid all cropping if you move your navigation bar above your slideshow.

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. You can choose a different image by setting your article's excerpt, which will be used on the landing page instead of the main article content.

Add excerpt btn

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
  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. On the Languages page, select your active language.

  4. In the search box at the top of the active language screen, start typing "featured" to bring up the "Featured Collections" translation.

  5. Edit your translation and click Save. If you remove the text, then the heading will be removed from your homepage. The Language editor will warn you that a translation is missing, but you can ignore that warning.

Brooklyn remove featured collections title

Did you know?

You can change any text in your theme that isn't originating from your store content using the Language editor.

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

  2. Click the ... button for the theme you want to customize, then click Edit language.

  3. On the Languages page, select your active language.

  4. In the search box at the top of the active language screen, start typing "featured" to bring up the "Featured Products" translation.

  5. Edit your translation and click Save. If you remove the text, then the heading will be removed from your homepage. The Language editor will warn you that a translation is missing, but you can ignore that warning.

Brooklyn remove featured products title

Did you know?

You can change any text in your theme that isn't originating from your store content using the Language editor.

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